{% stories PageTitle with {
  "title": "Molecules/Page Title",
  "parameters": {
    "componentSubtitle": "Bootstrap Page Title Component",
    "docs": {
      "description": {
        "component": "The Title component is responsible for rendering the page's main heading using the h1 HTML tag."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "title": {
      "name": "Title",
      "description": "The page title, for use in the actual content.",
      "defaultValue": ""
    },
    "display": {
      "name": "Display",
      "description": "Bootstrap button size class",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Display1": "display-1",
        "Display2": "display-2",
        "Display3": "display-3",
        "Display4": "display-4",
        "Display5": "display-5",
        "Display6": "display-6"
      }
    },
    "page_title_utility_classes": {
      "name": "Utility Classes",
      "description": "An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to this to this component.",
      "control": "object",
      "defaultValue": []
    },
    "title_attributes": {
      "name": "Title Attributes",
      "description": "HTML attributes for the title element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}


{% story PageTitle with {
  "name": "Page Title",
  "args": {
    "title": "Page Title Example",
    "display": "",
    "page_title_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:page-title') }}
{% endstory %}

{% story PageTitleDisplay1 with {
  "name": "Page Title with Display 1",
  "args": {
    "title": "Page Title with Display 1",
    "display": "display-1",
    "page_title_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:page-title') }}
{% endstory %}


{% endstories %}
