Section Header

Notes
HTML
View

A page or section header.


        
        <header class="azalea-section-header azalea-container sm:flex sm:items-center sm:justify-between">
    <h3 class="azalea-heading-section mb-0">

        Section One
    </h3>
</header>
<div class="mb-4 md:mb-8">
    <div class="azalea-container azalea-my-sm relative py-2 md:py-4">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-tertiary-300"></div>
        </div>
    </div>
</div>


        {% apply spaceless %}
  {#
    Prop: divide
    values: ['top', 'bottom', 'all']
  #}
  {% if not divide == 'bottom' %}
    {% include "@components/divider/divider.twig" with { contrast : 'dark', size: 'small' } only %}
  {% endif %}
  <header class="azalea-section-header azalea-container sm:flex sm:items-center sm:justify-between">
    <h3 class="azalea-heading-section mb-0">
      {% block content %}
        {# Prop: headingText #}
        {{ headingText }}
      {% endblock content %}
    </h3>
    {# Slot: action #}
    {% if block('action') is defined and block('action') != '' %}
      <div class="mt-3 flex sm:mt-0 sm:ml-4">
        {% block action %}{% endblock action %}
      </div>
    {% endif %}
  </header>
  <div class="mb-4 md:mb-8">
    {% if not divide or not divide == 'top' %}
      {% include "@components/divider/divider.twig" with { contrast : 'light', size: 'small' } only %}
    {% endif %}
  </div>
{% endapply %}