{% stories OverlayCard with {
  "title": "Organisms/Overlay Card",
  "parameters": {
    "componentSubtitle": "Bootstrap Overlay card component",
    "docs": {
      "description": {
        "component": "Overlay card component for a media and a content over the media with sizes."
      },
      "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",
      "control": "boolean",
      "defaultValue": false
    },
    "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": false
    },
    "anchor_all": {
      "name": "Anchor All",
      "description": "Anchor All",
      "control": "boolean",
      "defaultValue": false
    },
    "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 content for card",
      "control": "text",
      "defaultValue": ""
    },
    "content": {
      "name": "Card content",
      "slots": "The content for card",
      "control": "text",
      "defaultValue": ""
    }
  }
} %}


{% story xlarge with {
  "name": "xlarge",
  "args": {
    "style_size": "xlarge",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "",
    "vertical_alignment": "",
    "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=\"#\">Example title</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story large with {
  "name": "large",
  "args": {
    "style_size": "large",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "",
    "vertical_alignment": "",
    "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=\"#\">Example title</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story medium with {
  "name": "medium",
  "args": {
    "style_size": "medium",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "",
    "vertical_alignment": "",
    "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=\"#\">Example title</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story small with {
  "name": "small",
  "args": {
    "style_size": "small",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "",
    "vertical_alignment": "",
    "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=\"#\">Example title</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story xsmall with {
  "name": "xsmall",
  "args": {
    "style_size": "xsmall",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "",
    "vertical_alignment": "",
    "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=\"#\">Example title</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story xlargeCentered with {
  "name": "xlarge - Centered",
  "args": {
    "style_size": "xlarge",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "center",
    "vertical_alignment": "center",
    "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=\"#\">Amet Brevitas Dolore Jugis</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story largeCentered with {
  "name": "large - Centered",
  "args": {
    "style_size": "large",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "center",
    "vertical_alignment": "center",
    "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=\"#\">Amet Brevitas Dolore Jugis</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story mediumCentered with {
  "name": "medium - Centered",
  "args": {
    "style_size": "medium",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "center",
    "vertical_alignment": "center",
    "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=\"#\">Amet Brevitas Dolore Jugis</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story smallCentered with {
  "name": "small - Centered",
  "args": {
    "style_size": "small",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "center",
    "vertical_alignment": "center",
    "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=\"#\">Amet Brevitas Dolore Jugis</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}


{% story xsmallCentered with {
  "name": "xsmall - Centered",
  "args": {
    "style_size": "xsmall",
    "card_border": false,
    "padded": false,
    "equal_height": true,
    "anchor_all": true,
    "horizontal_alignment": "center",
    "vertical_alignment": "center",
    "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=\"#\">Amet Brevitas Dolore Jugis</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>"
  }
} %}
{{ include('vartheme_bs5:card-overlay') }}
{% endstory %}

{% endstories %}
