Mini

<div class="
    mini
    
">
    <div class="mini__title-and-cta">
    </div>
    <div class="mini__cards">
    </div>

</div>
<div class="
    mini
    {{ fields.jumbo ? 'mini--jumbo' : '' }}
">
    <div class="mini__title-and-cta">
        {% if fields.showTitle | default %}
            <h2 class="
                mini__title
                "
                {{ fields.showTitle ? 'data-show-title="true"' : 'data-show-title="false"'}}
                data-cy="event-mini__title"
                id="{{ fields.title|sanitize }}">
                {{ fields.title }}
            </h2>
        {% endif %}
        {% if fields.showCTALink | default %}
            <div class="mini__cta-container" data-cy="event-mini__cta-container"
                {{ fields.showCTALink ? 'data-show-cta="true"' : 'data-show-cta="false"' }}>
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        text: fields.linkText,
                        type: 'tertiary',
                        url: fields.linkUrl,
                    },
                    background: 'light'
                } %}
            </div>
        {% endif %}
    </div>
    <div class="mini__cards">
        {% block content %}
        {% endblock %}
    </div>

</div>
/* No context defined. */
  • Content:
    .mini
        @extends $componentWithMargin
        container-type inline-size
    
        &__title-and-cta
            justify-content space-between
            flex-direction column
            gap 18px 32px
            display flex
            margin-bottom 32px
            @container (width > 600px)
                &
                    align-items flex-end
                    flex-direction row
    
        &__title
            @extends $headline2
            color blue500
    
        &--jumbo &__title
                @extends $headline2alt
                max-width 600px
    
        &--jumbo &__title-and-cta
            gap 18px 0
            fluid(margin-bottom, 48px, 64px)
    
  • URL: /components/raw/mini/mini.styl
  • Filesystem Path: patterns/templates/mini/mini.styl
  • Size: 593 Bytes

No notes defined.