E3 Alliance Pattern Library

Impact 

<div class="impact">
    <div class="impact__intro">
        <h2 class="impact__header">Our impact</h2>
        <span class="impact__description">As a backbone organization, we collaborate to make the most impact for students today and tomorrow.</span>
    </div>
    <ul class="impact__figures">
        <li class="impact-figure">
            <div class="impact-figure__data">
                <span class="impact-figure__number">52,099</span>
                <span class="impact-figure__description">More Texas students who would have had access to Algebra I in 2021-22 if Senate Bill 2024 was already in law in 2018-19.</span>
            </div>
            <div class="impact-figure__image">

                <figure class="image ">
                    <picture class="image__picture">
                        <img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/440x330" alt="">

                    </picture>
                </figure>
            </div>
        </li>
        <li class="impact-figure">
            <div class="impact-figure__data">
                <span class="impact-figure__number">100%</span>
                <span class="impact-figure__description">Central Texas schools offering full-day, low teacher-to-student ratio pre-K, compared to 5% in 2012-2013.</span>
            </div>
            <div class="impact-figure__image">

                <figure class="image ">
                    <picture class="image__picture">
                        <img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/440x330" alt="">

                    </picture>
                </figure>
            </div>
        </li>
        <li class="impact-figure">
            <div class="impact-figure__data">
                <span class="impact-figure__number">6x</span>
                <span class="impact-figure__description">Six times as many Emergent Bilingual students completed Algebra I by 8th grade as compared to 2017.</span>
            </div>
            <div class="impact-figure__image">

                <figure class="image ">
                    <picture class="image__picture">
                        <img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/440x330" alt="">

                    </picture>
                </figure>
            </div>
        </li>
    </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>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "impact": {
    "impactHeader": "Our impact",
    "impactDescription": "As a backbone organization, we collaborate to make the most impact for students today and tomorrow.",
    "impactFigures": [
      {
        "header": "52,099",
        "description": "More Texas students who would have had access to Algebra I in 2021-22 if Senate Bill 2024 was already in law in 2018-19.",
        "image": {
          "src": "holder.js/440x330",
          "altText": "alt text example"
        }
      },
      {
        "header": "100%",
        "description": "Central Texas schools offering full-day, low teacher-to-student ratio pre-K, compared to 5% in 2012-2013.",
        "image": {
          "src": "holder.js/440x330",
          "altText": "alt text example"
        }
      },
      {
        "header": "6x",
        "description": "Six times as many Emergent Bilingual students completed Algebra I by 8th grade as compared to 2017.",
        "image": {
          "src": "holder.js/440x330",
          "altText": "alt text example"
        }
      }
    ]
  }
}
  • 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 aquaDark1

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

    &: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.