A tile is a small grouping of related information often displayed in a list.
<div class="azalea-tile max-h-full grid grid-flow-row grid-cols-1 gap-4 w-full lg:max-h-128 lg:grid-cols-6">
<div class="col-span-1 lg:col-span-4"></div>
</div>
{% apply spaceless %}
{% set defaultClasses = [
'azalea-tile',
'max-h-full',
'grid',
'grid-flow-row',
'grid-cols-1',
'gap-4',
'w-full',
] %}
{% set mediaClasses = ['col-span-1'] %}
{#
Prop: variant
The component variations.
@values 'default', 'compact'
#}
{% if variant == 'compact' %}
{% set defaultClasses = defaultClasses|merge(['md:max-h-96', 'md:grid-cols-6']) %}
{% set mediaClasses = mediaClasses|merge(['md:col-span-2']) %}
{% else %}
{% set variant = 'default' %}
{% set defaultClasses = defaultClasses|merge(['lg:max-h-128', 'lg:grid-cols-6']) %}
{% set mediaClasses = mediaClasses|merge(['lg:col-span-2']) %}
{% endif %}
{# Prop: classes #}
{% if classes and classes is iterable %}
{% set defaultClasses = defaultClasses|merge(classes) %}
{% endif %}
{# Prop: as #}
{% set tag = 'div' %}
{% if as and as == 'a' %}
{% set tag = 'a' %}
{% 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 {% if variant == 'compact' %}md:col-span-4{% else %}lg:col-span-4{% endif %}">
{# 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 %}