A card is a common design pattern which gives users as a way of taking action to discover more information. Cards commonly exist as links to more detailed Article content, links, and occasionally as content which supplements a larger subject.
Props:
- extraClasses
- width
- link
<div class="azalea-card flex flex-col overflow-hidden rounded-sm max-w-md"></div>
{% apply spaceless %}
{% set classes = ['azalea-card', 'flex', 'flex-col', 'overflow-hidden', 'rounded-sm'] %}
{# Prop: extraClasses #}
{% if extraClasses is defined and extraClasses is iterable %}
{% set classes = classes|merge(extraClasses) %}
{% endif %}
{# Prop: width #}
{% if width is defined and width in ['full'] %}
{# add class: w-full #}
{% set classes = classes|merge(['w-' ~ width]) %}
{% else %}
{% set classes = classes|merge(['max-w-md']) %}
{% endif %}
{% if link is defined and link.url is defined %}
{% set url = link.url %}
{% set tag = 'a' %}
{% set classes = classes|merge(['hover:no-underline']) %}
{% else %}
{% set tag = 'div' %}
{% endif %}
<{{ tag }} class="{{ classes|join(' ') }}"{% if url %} href="{{ url }}" rel="bookmark"{% endif %}>
{# Media slot #}
{% if block('media') is defined and block('media') != '' %}
<div class="flex w-full mb-4">
{{ block('media') }}
</div>
{% endif %}
{# Header slot #}
{% if block('header') is defined and block('header')|trim != '' %}
<header class="pb-4 font-heading font-bold text-tertiary-900 text-xl">
{{ block('header') }}
</header>
{% endif %}
{# Body slot #}
{% if block('body') is defined and block('body') != '' %}
<div class="azalea-text-sm pb-4 text-tertiary-900">
{{ block('body') }}
</div>
{% endif %}
{# Footer slot #}
{% if block('footer') is defined and block('footer') != '' %}
<footer class="pb-4 text-left">
{{ block('footer') }}
</footer>
{% endif %}
</{{ tag }}>
{% endapply %}