{% stories ImpressedCard with {
  "title": "Organisms/Impressed Card",
  "parameters": {
    "componentSubtitle": "Bootstrap Impressed card component",
    "docs": {
      "description": {
        "component": "Impressed 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"
      }
    },
    "media_position": {
      "name": "Media position",
      "description": "Media position",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "Top": "top",
        "Bottom": "bottom"
      }
    },
    "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
    },
    "equal_height": {
      "name": "Equal height",
      "description": "Equal height",
      "control": "boolean",
      "defaultValue": true
    },
    "anchor_all": {
      "name": "Anchor All",
      "description": "Anchor All",
      "control": "boolean",
      "defaultValue": false
    },
    "media": {
      "name": "Card media",
      "description": "Choose the location of the media from (top|bottom).",
      "control": "text",
      "defaultValue": ""
    },
    "content": {
      "name": "Card content",
      "slots": "The content slot for the card.",
      "control": "text",
      "defaultValue": ""
    },
    "card_impressed_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_impressed_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_impressed_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 xlarge with {
  "name": "xlarge",
  "args": {
    "style_size": "xlarge",
    "media_position": "top",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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_impressed_utility_classes": ['col-12'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story large with {
  "name": "large",
  "args": {
    "style_size": "large",
    "media_position": "top",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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_impressed_utility_classes": ['col-9'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story medium with {
  "name": "medium",
  "args": {
    "style_size": "medium",
    "media_position": "top",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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_impressed_utility_classes": ['col-6'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story small with {
  "name": "small",
  "args": {
    "style_size": "small",
    "media_position": "top",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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_impressed_utility_classes": ['col-4'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story xsmall with {
  "name": "xsmall",
  "args": {
    "style_size": "xsmall",
    "media_position": "top",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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_impressed_utility_classes": ['col-3'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story xlargePadded with {
  "name": "xlarge - Padded",
  "args": {
    "style_size": "xlarge",
    "media_position": "top",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div>",
    "card_impressed_utility_classes": ['col-12'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story largePadded with {
  "name": "large - Padded",
  "args": {
    "style_size": "large",
    "media_position": "top",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div>",
    "card_impressed_utility_classes": ['col-9'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story mediumPadded with {
  "name": "medium - Padded",
  "args": {
    "style_size": "medium",
    "media_position": "top",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div>",
    "card_impressed_utility_classes": ['col-6'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story LargeShadowTopMedia with {
  "name": "Large Shadow - Top Media",
  "args": {
    "style_size": "medium",
    "media_position": "top",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div>",
    "card_impressed_utility_classes": ['shadow-lg', 'col-12'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story LargeShadowButtomMedia with {
  "name": "Large Shadow - Buttom Media",
  "args": {
    "style_size": "medium",
    "media_position": "bottom",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div>",
    "card_impressed_utility_classes": ['shadow-lg', 'col-6'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story LightBackbroundLargeShadow with {
  "name": "Light Backbround - Large Shadow",
  "args": {
    "style_size": "medium",
    "media_position": "top",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div>",
    "card_impressed_utility_classes": ['bg-light', 'text-dark', 'shadow-lg', 'col-6'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story LightBackbroundSmallShadow with {
  "name": "Light Backbround - Small Shadow",
  "args": {
    "style_size": "medium",
    "media_position": "top",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div>",
    "card_impressed_utility_classes": ['bg-light', 'text-dark', 'shadow-sm', 'col-6'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story DarkBackbroundTopMedia with {
  "name": "Dark Backbround - Top Media",
  "args": {
    "style_size": "medium",
    "media_position": "top",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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 text-light\"><a class=\"text-light\" href=\"#\" hreflang=\"en\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div><div class=\"read-more text-end\"></div>",
    "card_impressed_utility_classes": ['bg-dark', 'text-light', 'col-6'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}


{% story DarkBackbroundBottomMedia with {
  "name": "Dark Backbround - Bottom Media",
  "args": {
    "style_size": "medium",
    "media_position": "bottom",
    "card_border": true,
    "padded": true,
    "equal_height": true,
    "anchor_all": true,
    "media": "<picture class=\"card-img-top img-fluid\"><img class=\"card-img-top 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 text-light\"><a class=\"text-light\" href=\"#\" hreflang=\"en\">Lorem Ipsum Dolor Sit Amet</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. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas ...</div><div class=\"read-more text-end\"></div>",
    "card_impressed_utility_classes": ['bg-dark', 'text-light', 'col-6'],
    "card_impressed_media_utility_classes": [],
    "card_impressed_content_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:card-impressed') }}
{% endstory %}

{% endstories %}
