<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. */
.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)
No notes defined.