<div class="data-section__container">
</div>
<div class="data-section__container">
{% if component.title %}<h2 class="data-section__header">{{ component.title }}</h2> {% endif %}
{% if post.dataContent %}<div class="data-section__body-text">{{ post.dataContent }}</div> {% endif %}
{% for card in component.cards %}
{% include 'partials/data-card/data-card.twig' with {
card: card
} %}
{% endfor %}
{% if post.enableDataCTA or component.enableDataCTA %}
{% include 'bits/cta-button/cta-button.twig' with {
background: 'dark',
link: post.dataCTALink | default(component.dataCTALink),
linkText: 'Get a Closer Look at This Data',
icon: 'right-arrow',
} %}
{% endif %}
</div>
/* No context defined. */
.data-section
--buttonBackgroundColor sapphire
&__header
@extends $headline2
color jet
&__body-text
@extends $richText
font-size 20px
font-weight 300
line-height 1.75em
margin-top 24px
&__cta-container
padding 24px 0 0 0
&__cta-button
background-color sapphire
display flex
justify-content center
padding 8px 0
text-decoration none
&__cta-text
@extends $hypertext
color white
text-decoration none
&:hover
&:active
&:focus
color greenApple
&__cta-icon
padding-left 8px
No notes defined.