Gigaclear Pattern Library

Headline 

<div class="text-center mb-10 lg:mb-16">
    <div>

        <h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo  mb-4 lg:mb-6">Heading text</h2>
    </div>
    <div class="">

        <div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl  max-w-screen-sm mx-auto">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>

    </div>
</div>
 
{% if headingColour %}
    {% set headingColourClass = headingColour %}
{% else %}
    {% set headingColourClass = "text-bravo" %}
{% endif %}

{% if preHeadingColour %}
    {% set preHeadingColourClass = preHeadingColour %}
{% else %}
    {% set preHeadingColourClass = "text-grey-600" %}
{% endif %}

{% if summaryColour %}
    {% set summaryColourColourClass = summaryColour %}
{% else %}
    {% set summaryColourColourClass = "" %}
{% endif %}

{% if buttonColour %}
    {% set buttonModifier = buttonColour %}
{% else %}
    {% set buttonModifier = 'default' %}
{% endif %}

{% if textAlign == 'left' %}
    {% set textAlignClass = 'text-left' %}
    {% set spacingClasses = '' %}
{% elseif textAlign == 'right' %}
    {% set textAlignClass = 'lg:flex lg:gap-32' %}
    {% set spacingClasses = '' %}
    {% set textAlignContentClass = 'lg:flex-1' %}
{% else %}
    {% set textAlignClass = 'text-center' %}
    {% set spacingClasses = 'max-w-screen-sm mx-auto' %}
{% endif %}

{% if heading or summary %}
    <div class="{{textAlignClass}} mb-10 lg:mb-16">
        <div>
            {% if preheading %}
                <div class="uppercase {{ preHeadingColourClass }} mb-3 font-semibold">
                    <p>{{ preheading }}</p>
                </div>
            {% endif %}
            <h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight {{headingColourClass}} {{textAlignContentClass}} mb-4 lg:mb-6">{{ heading }}</h2>
        </div>
        <div class="{{textAlignContentClass}}">
            {% if summary %}
                <div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl {{ summaryColourColourClass }} {{spacingClasses}}">
                    <p>{{ summary }}</p>
                </div>
            {% endif %}
            {% if link %}
                <div class="mt-12">
                    {% render "@button--" + buttonModifier, link, true %}
                </div>
            {% endif %}
        </div>
    </div>
{% endif %}
 
{
  "siteName": "Gigaclear Pattern Library",
  "heading": "Heading text",
  "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco."
}

No notes defined.