{% stories HeroCard with {
  "title": "Organisms/Hero Card",
  "parameters": {
    "componentSubtitle": "Bootstrap Hero card component",
    "docs": {
      "description": {
        "component": "Hero card component and pattern with media and content."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "card_border": {
      "name": "Card Border",
      "description": "Add a default border to the card.",
      "control": "boolean",
      "defaultValue": true
    },
    "padded": {
      "name": "Padded",
      "description": "Add a default padding to the card.",
      "control": "boolean",
      "defaultValue": false
    },
    "media_position": {
      "name": "Media position",
      "description": "Choose the location of the media from (overlay|start|end|top|bottom).",
      "control": "select",
      "defaultValue": "overlay",
      "options": {
        "' - none - '": "",
        "Overlay": "overlay",
        "Start": "start",
        "End": "end",
        "Top": "top",
        "Bottom": "bottom"
      }
    },
    "horizontal_alignment": {
      "name": "Horizontal Alignment",
      "description": "Horizontal alignment of the content.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "Start": "start",
        "Center": "center",
        "End": "end"
      }
    },
    "vertical_alignment": {
      "name": "Vertical Alignment",
      "description": "Vertical alignment of the content.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "Start": "start",
        "Center": "center",
        "End": "end"
      }
    },
    "media": {
      "name": "Card media",
      "description": "The media image/video slot for the card.",
      "control": "text",
      "defaultValue": ""
    },
    "content": {
      "name": "Card content",
      "slots": "The content slot for the card.",
      "control": "text",
      "defaultValue": ""
    },
    "card_hero_utility_classes": {
      "name": "Utility Classes",
      "description": "Use to add extra Bootstrap utility classes for the main Card wrapper. E.g. `mb-3 shadow-lg` ( Do not add `card`).",
      "control": "object",
      "defaultValue": []
    },
    "card_hero_media_utility_classes": {
      "name": "Media Utility Classes",
      "description": "Use to add extra Bootstrap utility classes for the Card Media region wrapper. E.g. `bg-secondary mb-3` ( Do not add `card-img`).",
      "control": "object",
      "defaultValue": []
    },
    "card_hero_content_utility_classes": {
      "name": "Content Utility Classes",
      "description": "Use to add extra Bootstrap utility classes for the Card Content region wrapper. E.g. `w-75 mb-3 overflow-y-hidden`  ( Do not add `card-body`).",
      "control": "object",
      "defaultValue": []
    },
    "card_attributes": {
      "name": "Card Attributes",
      "description": "HTML attributes for the card element.",
      "control": "object",
      "defaultValue": {}
    },
    "content_attributes": {
      "name": "Content Attributes",
      "description": "HTML attributes for the content element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}

{% story HeroCardOverlay with {
  "name": "Hero Card - Media overlay",
  "args": {
    "media_position": "overlay",
    "card_border": false,
    "padded": false,
    "horizontal_alignment": "start",
    "vertical_alignment": "end",
    "content": "<div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h3 class=\"card-title\">Varbase; better than ever</h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div><div class=\"mt-5\"><a href=\"\" class=\"btn btn-primary btn-lg\">Learn More</a></div>",
    "card_hero_utility_classes": [],
    "card_hero_media_utility_classes": [],
    "card_hero_content_utility_classes": []
  }
} %}

  {% set image1_html = include('vartheme_bs5:image', {
    attributes: create_attribute({
      'src': 'https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.1.x/recipes/default/content/file/meeting-1.webp',
      'class': ['card-image', 'img-fluid']
    })
  }) %}

  <div class="varbase-heroslider carousel slide hero-style-overlay">
    <div class="carousel-inner">
     <div class="carousel-item active">
        {{
          include('vartheme_bs5:card-hero', {
            media: image1_html
          })
        }}
      </div>
    </div>
  </div>
{% endstory %}


{% story HeroCardMediaStart with {
  "name": "Hero Card - Media start",
  "args": {
    "media_position": "start",
    "card_border": false,
    "padded": false,
    "horizontal_alignment": "start",
    "vertical_alignment": "center",
    "content": "<div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h3 class=\"card-title\">Varbase; better than ever</h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div><div class=\"mt-5\"><a href=\"\" class=\"btn btn-primary btn-lg\">Learn More</a></div>",
    "card_hero_utility_classes": [],
    "card_hero_media_utility_classes": [],
    "card_hero_content_utility_classes": []
  }
} %}

  {% set image1_html = include('vartheme_bs5:image', {
    attributes: create_attribute({
      'src': 'https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.1.x/recipes/default/content/file/meeting-1.webp',
      'class': ['card-image', 'img-fluid']
    })
  }) %}

  <div class="varbase-heroslider carousel slide hero-style-start">
    <div class="carousel-inner">
     <div class="carousel-item active">
        {{
          include('vartheme_bs5:card-hero', {
            media: image1_html
          })
        }}
      </div>
    </div>
  </div>
{% endstory %}


{% story HeroCardMediaEnd with {
  "name": "Hero Card - Media end",
  "args": {
    "media_position": "end",
    "card_border": false,
    "padded": false,
    "horizontal_alignment": "start",
    "vertical_alignment": "center",
    "content": "<div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h3 class=\"card-title\">Varbase; better than ever</h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div><div class=\"mt-5\"><a href=\"\" class=\"btn btn-primary btn-lg\">Learn More</a></div>",
    "card_hero_utility_classes": [],
    "card_hero_media_utility_classes": [],
    "card_hero_content_utility_classes": []
  }
} %}

  {% set image1_html = include('vartheme_bs5:image', {
    attributes: create_attribute({
      'src': 'https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.1.x/recipes/default/content/file/meeting-1.webp',
      'class': ['card-image', 'img-fluid']
    })
  }) %}

  <div class="varbase-heroslider carousel slide hero-style-end">
    <div class="carousel-inner">
     <div class="carousel-item active">
        {{
          include('vartheme_bs5:card-hero', {
            media: image1_html
          })
        }}
      </div>
    </div>
  </div>
{% endstory %}


{% story HeroCardMediaTop with {
  "name": "Hero Card - Media top",
  "args": {
    "media_position": "top",
    "card_border": false,
    "padded": false,
    "horizontal_alignment": "center",
    "vertical_alignment": "center",
    "content": "<div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h3 class=\"card-title\">Varbase; better than ever</h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div><div class=\"mt-5\"><a href=\"\" class=\"btn btn-primary btn-lg\">Learn More</a></div>",
    "card_hero_utility_classes": [],
    "card_hero_media_utility_classes": [],
    "card_hero_content_utility_classes": []
  }
} %}

  {% set image1_html = include('vartheme_bs5:image', {
    attributes: create_attribute({
      'src': 'https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.1.x/recipes/default/content/file/meeting-1.webp',
      'class': ['card-image', 'img-fluid']
    })
  }) %}

  <div class="varbase-heroslider carousel slide hero-style-top">
    <div class="carousel-inner">
     <div class="carousel-item active">
        {{
          include('vartheme_bs5:card-hero', {
            media: image1_html
          })
        }}
      </div>
    </div>
  </div>
{% endstory %}


{% story HeroCardMediaBottom with {
  "name": "Hero Card - Media bottom",
  "args": {
    "media_position": "bottom",
    "card_border": false,
    "padded": false,
    "horizontal_alignment": "center",
    "vertical_alignment": "center",
    "content": "<div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h3 class=\"card-title\">Varbase; better than ever</h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div><div class=\"mt-5\"><a href=\"\" class=\"btn btn-primary btn-lg\">Learn More</a></div>",
    "card_hero_utility_classes": [],
    "card_hero_media_utility_classes": [],
    "card_hero_content_utility_classes": []
  }
} %}

  {% set image1_html = include('vartheme_bs5:image', {
    attributes: create_attribute({
      'src': 'https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.1.x/recipes/default/content/file/meeting-1.webp',
      'class': ['card-image', 'img-fluid']
    })
  }) %}

  <div class="varbase-heroslider carousel slide hero-style-bottom">
    <div class="carousel-inner">
     <div class="carousel-item active">
        {{
          include('vartheme_bs5:card-hero', {
            media: image1_html
          })
        }}
      </div>
    </div>
  </div>
{% endstory %}


{% story HeroCardContent with {
  "name": "Hero Card - Content",
  "args": {
    "media_position": "top",
    "card_border": false,
    "padded": false,
    "horizontal_alignment": "start",
    "vertical_alignment": "center",
    "content": "<div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h3 class=\"card-title\">Varbase; better than ever</h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div><div class=\"mt-5\"><a href=\"\" class=\"btn btn-primary btn-lg\">Learn More</a></div>",
    "card_hero_utility_classes": [],
    "card_hero_media_utility_classes": [],
    "card_hero_content_utility_classes": []
  }
} %}

  <div class="varbase-heroslider carousel slide hero-style-overlay">
    <div class="carousel-inner">
     <div class="carousel-item active">
        {{
          include('vartheme_bs5:card-hero')
        }}
      </div>
    </div>
  </div>
{% endstory %}

{% endstories %}
