36 lines
2.5 KiB
HTML
36 lines
2.5 KiB
HTML
{% 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 -%}
|
|
<div class="narrow-content">
|
|
<div class="card mb-3{% if include.float %} feature-float-{{ include.float }}{% endif %}{% if include.width %} feature-w-{{ include.width }}{% endif %}{% if include.centered %} mx-auto{% endif %}">
|
|
{% if src %}<img class="card-img-top" src="{{ src }}" alt="{{ alt | escape }}">{%- endif -%}
|
|
{% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{%- endif -%}
|
|
<div class="card-body">
|
|
{% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{%- endif -%}
|
|
<div class="card-text">{{ include.text | markdownify }}</div>
|
|
</div>
|
|
</div>
|
|
</div> |