{% comment %} Bootstrap Card, https://getbootstrap.com/docs/5.1/components/card/ E.G. --> {% include feature/card.html text="Some text" header="Example item" objectid="demo_004" %} Options: - "text" = main card text, can use markdown formatting (tip: use a Liquid capture to add more complex content) - "header" = card header text (in bar above card content) - "title" = card title text inside card content area - "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2") - "objectid" = the given object or link to external image will create a card cap image - "alt" = if adding an external image using objectid option, provide alt text for image - "width" = will use responsive sizing to set the % size on desktop (will be 100% on mobile), choose from "25", "50", "75", or "100" - "centered" = give "true" to add mx-auto class on the card to center it (don't use with float!) - "float" = will use responsive float utility to add float on desktop (will not float on mobile), choose from "start" (left) or "end" (right) {%- endcomment -%} {%- if include.objectid contains '/' -%} {%- capture src -%}{{ include.objectid | relative_url }}{% endcapture %} {%- capture alt -%}{{ include.alt | default: include.title }}{% endcapture %} {%- elsif include.objectid -%} {%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%} {%- capture src -%}{{ item.image_small | default: item.object_location | relative_url }}{% endcapture %} {%- capture alt -%}{{ item.image_alt_text | default: item.description | default: item.title }}{% endcapture %} {%- endif -%}
{% if src %}{{ alt | escape }}{%- endif -%} {% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header">{{ include.header }}{%- endif -%}
{% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title">{{ include.title }}{%- endif -%}
{{ include.text | markdownify }}