A teaser is a common design pattern which gives users as a way of taking action to discover more information. Teasers commonly exist as links to more detailed Article content, links, and occasionally as content which supplements a larger subject.
<div class="azalea-teaser grid grid-flow-row grid-cols-1 lg:grid-cols-10 gap-4 w-full px-0 lg:px-6 py-4">
<div class="col-span-1 lg:col-span-8"></div>
</div>
{% apply spaceless %}
{% set defaultClasses = [
'azalea-teaser',
'grid',
'grid-flow-row',
'grid-cols-1',
'lg:grid-cols-10',
'gap-4',
'w-full',
'px-0',
'lg:px-6',
'py-4'
] %}
{% set mediaClasses = ['col-span-1', 'lg:col-span-2'] %}
{% if classes and classes is iterable %}
{% set defaultClasses = defaultClasses|merge(classes) %}
{% endif %}
{#
Prop: variant
The component variations.
@values 'default', 'compact'
#}
{% if variant == 'compact' %}
{% set mediaClasses = mediaClasses|merge(['md:max-h-40']) %}
{% else %}
{% set variant = 'default' %}
{% set mediaClasses = mediaClasses|merge(['mx-auto', 'md:max-h-128', 'lg:max-h-max']) %}
{% endif %}
{# Prop: link #}
{% if link is defined and link.url is defined %}
{% set url = link.url %}
{% set tag = 'a' %}
{% else %}
{% set tag = 'div' %}
{% endif %}
<{{ tag }} class="{{ defaultClasses|join(' ') }}"{% if url %} href="{{ url }}" rel="bookmark"{% endif %}>
{# Media slot #}
{% if block('media') is defined and block('media') != '' %}
<div class="{{ mediaClasses|join(' ') }}">
{{ block('media') }}
</div>
{% endif %}
<div class="col-span-1 lg:col-span-8">
{# Header slot #}
{% if block('header') is defined and block('header') != '' %}
<header class="mb-4">
{{ block('header') }}
</header>
{% endif %}
{# Body slot #}
{% if block('body') is defined and block('body') != '' %}
<div>
{{ block('body') }}
</div>
{% endif %}
{# Footer slot #}
{% if block('footer') is defined and block('footer') != '' %}
<footer class="text-left">
{{ block('footer') }}
</footer>
{% endif %}
</div>
</{{ tag }}>
{% endapply %}