Custom theme (replace with client name)

Impact 

<div class="impact">
    <div class="impact__intro">
        <h2 class="impact__header"></h2>
        <span class="impact__description"></span>
    </div>
    <ul class="impact__figures">
    </ul>
</div>
 
<div class="impact">
    <div class="impact__intro">
        <h2 class="impact__header">{{ impact.impactHeader }}</h2>
        <span class="impact__description">{{ impact.impactDescription }}</span>
    </div>
    <ul class="impact__figures">
        {% for figure in impact.impactFigures %}
            <li class="impact-figure">
                <div class="impact-figure__data">
                    <span class="impact-figure__number">{{ figure.header }}</span>
                    <span class="impact-figure__description">{{ figure.description }}</span>
                </div>
                <div class="impact-figure__image">
                    {% include 'partials/image/image.twig' with
                        {
                            image: figure.image
                        }
                    %}
                </div>
            </li>
        {% endfor %}
    </ul>
</div>
 
/* No context defined. */
  • Content: 
    .impact
    background-Color lightGrey
    border-radius 22px
    display grid
    grid-gap 120px
    margin 80px 0
    padding 61px 38px

    &__intro
        display grid
        grid-gap 24px

    &__header
        @extends $headline1
        color jet
        font-weight 700
        line-height 1.5
        margin-bottom 24

    &__description
        @extends $bodyLarge

    &__figures
        display grid
        grid-template-rows repeat(3, 1fr)
        grid-gap 120px
        margin 0 auto

        +above(1000px)
            grid-gap 104px
            max-width 960px

.impact-figure
    display grid
    grid-template-columns 2fr
    grid-gap 48px

    +above(1000px)
        grid-template-columns repeat(2, 1fr)
        grid-gap 80px

        &:nth-of-type(2)
            .impact-figure__image
                order: 2

            .impact-figure__dataß
                order: 1

    &__image
        order 1

    &__data
        order 2

    &__number
        display block
        fluid('font-size', 60px, 127px)
        font-weight 700
        line-height 1.2

    &__description
        @extends $bodyLarge
        word-break break-word

    &:nth-of-type(1)
        .impact-figure__number
            color aquaDk1

    &:nth-of-type(2)
        .impact-figure__number
            color tigerDk1

    &:nth-of-type(3)
        .impact-figure__number
            color grape
  • URL: /components/raw/impact/impact.styl
  • Filesystem Path: patterns/partials/impact/impact.styl
  • Size: 1.4 KB

No notes defined.