Page Header -action

Notes:

Detail is optional

{% include "_components/page-header--action" with { content: content } %}

<header class="page-header -action -left | container--sm gutter-md | space-t space-b--sm">

    <div class="page-header__title | label-title-group">
        <h3 class="meta-label text-bronze-light | label-title-group__label">{{ content.category }}</h3>
        <h1 class="header-xl font-serif | label-title-group__title">{{ content.title }}</h2>
    </div>

    {% if content.detail is defined %}
    <div class="page-header__detail">

        <div class="paragraphs -sm -loose -inline | w-3/4">
            <p>
                {{ content.detail }}
            </p>
            <a href="#" class="link | meta-label | text-red hover:text-bronze | ml-2">Keep Reading</a>
        </div>

        <div class="page-header__badge | w-1/4">
            {{ global.image('', '-is1x1 rounded-full -fit-cover', '/assets/placeholder/placeholder_03.png')}}
        </div>

    </div>
    {% endif %}

</header>