{% stories FeaturedCard with {
  "title": "Organisms/Featured Card",
  "parameters": {
    "componentSubtitle": "Bootstrap Featured Card component",
    "docs": {
      "description": {
        "component": "Featured card component and pattern with media and content."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "style_size": {
      "name": "Card style size",
      "description": "Card style size",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "XSmall": "xsmall",
        "Small": "small",
        "Medium": "medium",
        "Large": "large",
        "XLarge": "xlarge"
      }
    },
    "card_border": {
      "name": "Card Border",
      "description": "Card Border",
      "defaultValue": false,
      "control": "boolean"
    },
    "padded": {
      "name": "Padded",
      "description": "Add a default padding to the card.",
      "defaultValue": false,
      "control": "boolean"
    },
    "equal_height": {
      "name": "Equal height",
      "description": "Equal height",
      "defaultValue": true,
      "control": "boolean"
    },
    "anchor_all": {
      "name": "Anchor All",
      "description": "Anchor All",
      "defaultValue": false,
      "control": "boolean"
    }, 
    "media_position": {
      "name": "Media position",
      "description": "Choose the location of the media from (start|end).",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "Start": "start",
        "End": "end"
      }
    },
    "content_vertical_alignment": {
      "name": "Content Vertical Alignment",
      "description": "Vertical alignment of the content",
      "control": "select",
      "defaultValue": "center",
      "options": {
        "' - none - '": "",
        "Start": "start",
        "Center": "center",
        "End": "end"
      }
    },
    "gutters_between": {
      "name": "Gutters Between",
      "description": "Manage the guttering between the start and end columns.",
      "control": "select",
      "defaultValue": "no",
      "options": {
        "Large": "large",
        "'Small start'": "small-start",
        "'Small end'": "small-end",
        "No": "no"
      }
    },
    "columns_xs_size": {
      "name": "All Breakpoints",
      "description": "Size of two columns for all devices. Starting from Extra small and up",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'16% - 83%'": "02_10",
        "'83% - 16%'": "10_02",
        "'25% - 75%'": "03_09",
        "'75% - 25%'": "09_03",
        "'33% - 66%'": "04_08",
        "'66% - 33%'": "08_04",
        "'50% - 50%'": "06_06",
        "'100% - 100%'": "12_12"
      }
    },
    "columns_sm_size": {
      "name": "Small Breakpoint size (sm)",
      "description": "Size of two columns for Small devices (landscape phones, 576px and up)",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'16% - 83%'": "02_10",
        "'83% - 16%'": "10_02",
        "'25% - 75%'": "03_09",
        "'75% - 25%'": "09_03",
        "'33% - 66%'": "04_08",
        "'66% - 33%'": "08_04",
        "'50% - 50%'": "06_06",
        "'100% - 100%'": "12_12"
      }
    },
    "columns_md_size": {
      "name": "Medium Breakpoint size (md)",
      "description": "Size of two columns for Medium devices (tablets, 768px and up)",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'16% - 83%'": "02_10",
        "'83% - 16%'": "10_02",
        "'25% - 75%'": "03_09",
        "'75% - 25%'": "09_03",
        "'33% - 66%'": "04_08",
        "'66% - 33%'": "08_04",
        "'50% - 50%'": "06_06",
        "'100% - 100%'": "12_12"
      }
    },
    "columns_lg_size": {
      "name": "Large Breakpoint size (lg)",
      "description": "Size of two columns for Large devices (desktops, 992px and up)",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'16% - 83%'": "02_10",
        "'83% - 16%'": "10_02",
        "'25% - 75%'": "03_09",
        "'75% - 25%'": "09_03",
        "'33% - 66%'": "04_08",
        "'66% - 33%'": "08_04",
        "'50% - 50%'": "06_06",
        "'100% - 100%'": "12_12"
      }
    },
    "columns_xl_size": {
      "name": "Extra Large Breakpoint size (xl)",
      "description": "Size of two columns for X-Large devices (large desktops, 1200px and up)",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'16% - 83%'": "02_10",
        "'83% - 16%'": "10_02",
        "'25% - 75%'": "03_09",
        "'75% - 25%'": "09_03",
        "'33% - 66%'": "04_08",
        "'66% - 33%'": "08_04",
        "'50% - 50%'": "06_06",
        "'100% - 100%'": "12_12"
      }
    },
    "columns_xxl_size": {
      "name": "Extra Extra Large Breakpoint size (xxl)",
      "description": "Size of two columns for XX-Large devices (larger desktops, 1400px and up)",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "'16% - 83%'": "02_10",
        "'83% - 16%'": "10_02",
        "'25% - 75%'": "03_09",
        "'75% - 25%'": "09_03",
        "'33% - 66%'": "04_08",
        "'66% - 33%'": "08_04",
        "'50% - 50%'": "06_06",
        "'100% - 100%'": "12_12"
      }
    },
    "media": {
      "name": "Card media",
      "description": "The content for card",
      "control": "text",
      "defaultValue": ""
    },
    "content": {
      "name": "Card content",
      "slots": "The content for card",
      "control": "text",
      "defaultValue": ""
    },
    "card_featured_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_featured_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_featured_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": {}
    },
    "media_attributes": {
      "name": "Media Attributes",
      "description": "HTML attributes for the Media element.",
      "control": "object",
      "defaultValue": {}
    },
    "content_attributes": {
      "name": "Content Attributes",
      "description": "HTML attributes for the content element.",
      "control": "object",
      "defaultValue": {}
    },
    "row_attributes": {
      "name": "Row Attributes",
      "description": "HTML attributes for the row element.",
      "control": "object",
      "defaultValue": {}
    },
    "start_column_attributes": {
      "name": "Start Attributes",
      "description": "HTML attributes for the start column element.",
      "control": "object",
      "defaultValue": {}
    },
    "end_column_attributes": {
      "name": "End Column Attributes",
      "description": "HTML attributes for the end column element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}


{% story xlarge with {
  "name": "xlarge",
  "args": {
    "style_size": "xlarge",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "no",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "content": "<h3 class=\"card-title\"><a href=\"#\">Lorem Ipsum Dolor Sit Amet</a></h3><p class=\"card-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor dignissim risus, et congue lectus placerat nec. Donec congue diam leo, in faucibus sem facilisis tempus. Duis congue leo interdum</p>",
    "card_featured_utility_classes": ['col-12'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}


{% story large with {
  "name": "large",
  "args": {
    "style_size": "large",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "no",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "content": "<h3 class=\"card-title\"><a href=\"#\">Lorem Ipsum Dolor Sit Amet</a></h3><p class=\"card-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor dignissim risus, et congue lectus placerat nec. Donec congue diam leo, in faucibus sem facilisis tempus. Duis congue leo interdum</p>",
    "card_featured_utility_classes": ['col-9'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}


{% story medium with {
  "name": "medium",
  "args": {
    "style_size": "medium",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "no",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "content": "<h3 class=\"card-title\"><a href=\"#\">Lorem Ipsum Dolor Sit Amet</a></h3><p class=\"card-text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor dignissim risus, et congue lectus placerat nec. Donec congue diam leo, in faucibus sem facilisis tempus. Duis congue leo interdum</p>",
    "card_featured_utility_classes": ['col-6'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}


{% story Small with {
  "name": "small",
  "args": {
    "style_size": "small",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "no",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "content": "<h3 class=\"card-title\"><a href=\"#\">Lorem Ipsum Dolor Sit Amet</a></h3><p class=\"card-text\">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>",
    "card_featured_utility_classes": ['col-4'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}


{% story xsmall with {
  "name": "xsmall",
  "args": {
    "style_size": "xsmall",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "no",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "content": "<h3 class=\"card-title\"><a href=\"#\">Lorem ipsum dolor sit amet</a></h3>",
    "card_featured_utility_classes": ['col-3'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}


{% story xlargePadded with {
  "name": "xlarge - Padded",
  "args": {
    "style_size": "xlarge",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "no",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "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\"><a href=\"#\" hreflang=\"en\">Amet Brevitas Dolore Jugis Pertineo Pneum Ratis Refoveo Scisco Sed Sino Validus</a></h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra arcu risus, id tempus risus elementum at ...</div>",
    "card_featured_utility_classes": ['col-12'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}


{% story largePadded with {
  "name": "large - Padded",
  "args": {
    "style_size": "large",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "no",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "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\"><a href=\"#\" hreflang=\"en\">Amet Brevitas Dolore Jugis Pertineo Pneum Ratis Refoveo Scisco Sed Sino Validus</a></h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra arcu risus, id tempus risus elementum at ...</div>",
    "card_featured_utility_classes": ['col-9'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}


{% story mediumPadded with {
  "name": "medium - Padded",
  "args": {
    "style_size": "medium",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": false,
    "media_position": "start",
    "content_vertical_alignment": "center",
    "gutters_between": "large",
    "columns_xs_size": "06_06",
    "columns_sm_size": "",
    "columns_md_size": "",
    "columns_lg_size": "",
    "columns_xl_size": "",
    "columns_xxl_size": "",
    "media": "<picture class=\"card-img img-fluid \"><img class=\"card-img img-fluid\" src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></picture>",
    "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\"><a href=\"#\" hreflang=\"en\">Amet Brevitas Dolore Jugis Pertineo Pneum Ratis Refoveo Scisco Sed Sino Validus</a></h3></div><div class=\"field field--name-body field--type-text-with-summary field--label-hidden field__item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra arcu risus, id tempus risus elementum at ...</div>",
    "card_featured_utility_classes": ['col-6'],
    "card_featured_media_utility_classes": [],
    "card_featured_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-featured') }}
{% endstory %}

{% endstories %}
