E3 Alliance Pattern Library

Data Block Component: Default 

<div class="data-section__container">
    <h2 class="data-section__header">Data Block Component</h2>
    <div class="data-card">
        <div class="data-card__meta">
            <div class="data-card__meta-type">
                <div class="data-card__data-icon"><svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.7891 1.25781L7.85156 4.63281C7.64062 4.79688 7.33594 4.79688 7.125 4.63281L4.45312 2.28906L0.867188 4.65625C0.609375 4.84375 0.257812 4.77344 0.09375 4.51562C-0.09375 4.25781 -0.0234375 3.90625 0.234375 3.71875L4.17188 1.09375C4.38281 0.953125 4.66406 0.976562 4.85156 1.14062L7.5 3.46094L11.0625 0.390625C11.2969 0.203125 11.6484 0.226562 11.8594 0.460938C12.0469 0.695312 12.0234 1.04688 11.7891 1.25781ZM4.6875 9.625V5.875C4.6875 5.78125 4.59375 5.6875 4.5 5.6875C4.38281 5.6875 4.3125 5.78125 4.3125 5.875V9.625C4.3125 9.74219 4.38281 9.8125 4.5 9.8125C4.59375 9.8125 4.6875 9.74219 4.6875 9.625ZM4.5 4.75C5.10938 4.75 5.625 5.26562 5.625 5.875V9.625C5.625 10.2578 5.10938 10.75 4.5 10.75C3.86719 10.75 3.375 10.2578 3.375 9.625V5.875C3.375 5.26562 3.86719 4.75 4.5 4.75ZM1.6875 9.625V8.125C1.6875 8.03125 1.59375 7.9375 1.5 7.9375C1.38281 7.9375 1.3125 8.03125 1.3125 8.125V9.625C1.3125 9.74219 1.38281 9.8125 1.5 9.8125C1.59375 9.8125 1.6875 9.74219 1.6875 9.625ZM1.5 7C2.10938 7 2.625 7.51562 2.625 8.125V9.625C2.625 10.2578 2.10938 10.75 1.5 10.75C0.867188 10.75 0.375 10.2578 0.375 9.625V8.125C0.375 7.51562 0.867188 7 1.5 7ZM7.6875 7.375C7.6875 7.28125 7.59375 7.1875 7.5 7.1875C7.38281 7.1875 7.3125 7.28125 7.3125 7.375V9.625C7.3125 9.74219 7.38281 9.8125 7.5 9.8125C7.59375 9.8125 7.6875 9.74219 7.6875 9.625V7.375ZM6.375 7.375C6.375 6.76562 6.86719 6.25 7.5 6.25C8.10938 6.25 8.625 6.76562 8.625 7.375V9.625C8.625 10.2578 8.10938 10.75 7.5 10.75C6.86719 10.75 6.375 10.2578 6.375 9.625V7.375ZM10.6875 9.625V5.875C10.6875 5.78125 10.5938 5.6875 10.5 5.6875C10.3828 5.6875 10.3125 5.78125 10.3125 5.875V9.625C10.3125 9.74219 10.3828 9.8125 10.5 9.8125C10.5938 9.8125 10.6875 9.74219 10.6875 9.625ZM10.5 4.75C11.1094 4.75 11.625 5.26562 11.625 5.875V9.625C11.625 10.2578 11.1094 10.75 10.5 10.75C9.86719 10.75 9.375 10.2578 9.375 9.625V5.875C9.375 5.26562 9.86719 4.75 10.5 4.75Z" fill="#3A3A3A" />
                    </svg>
                </div> Data
            </div>
            <div class="data-card__meta-regions">
            </div>
        </div>
        <div class="data-card__content">
            <span class="data-card__title">
                Far fewer low income students kindergarten ready
            </span>
            <div class="data-card__description">

            </div>
            <div class="data-card__image">

                <figure class="image image--with-caption">
                    <picture class="image__picture">
                        <img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/800x650" alt="">

                    </picture>
                    <figcaption class="image__caption">
                        Caption of image
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
    <div class="data-card">
        <div class="data-card__meta">
            <div class="data-card__meta-type">
                <div class="data-card__data-icon"><svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.7891 1.25781L7.85156 4.63281C7.64062 4.79688 7.33594 4.79688 7.125 4.63281L4.45312 2.28906L0.867188 4.65625C0.609375 4.84375 0.257812 4.77344 0.09375 4.51562C-0.09375 4.25781 -0.0234375 3.90625 0.234375 3.71875L4.17188 1.09375C4.38281 0.953125 4.66406 0.976562 4.85156 1.14062L7.5 3.46094L11.0625 0.390625C11.2969 0.203125 11.6484 0.226562 11.8594 0.460938C12.0469 0.695312 12.0234 1.04688 11.7891 1.25781ZM4.6875 9.625V5.875C4.6875 5.78125 4.59375 5.6875 4.5 5.6875C4.38281 5.6875 4.3125 5.78125 4.3125 5.875V9.625C4.3125 9.74219 4.38281 9.8125 4.5 9.8125C4.59375 9.8125 4.6875 9.74219 4.6875 9.625ZM4.5 4.75C5.10938 4.75 5.625 5.26562 5.625 5.875V9.625C5.625 10.2578 5.10938 10.75 4.5 10.75C3.86719 10.75 3.375 10.2578 3.375 9.625V5.875C3.375 5.26562 3.86719 4.75 4.5 4.75ZM1.6875 9.625V8.125C1.6875 8.03125 1.59375 7.9375 1.5 7.9375C1.38281 7.9375 1.3125 8.03125 1.3125 8.125V9.625C1.3125 9.74219 1.38281 9.8125 1.5 9.8125C1.59375 9.8125 1.6875 9.74219 1.6875 9.625ZM1.5 7C2.10938 7 2.625 7.51562 2.625 8.125V9.625C2.625 10.2578 2.10938 10.75 1.5 10.75C0.867188 10.75 0.375 10.2578 0.375 9.625V8.125C0.375 7.51562 0.867188 7 1.5 7ZM7.6875 7.375C7.6875 7.28125 7.59375 7.1875 7.5 7.1875C7.38281 7.1875 7.3125 7.28125 7.3125 7.375V9.625C7.3125 9.74219 7.38281 9.8125 7.5 9.8125C7.59375 9.8125 7.6875 9.74219 7.6875 9.625V7.375ZM6.375 7.375C6.375 6.76562 6.86719 6.25 7.5 6.25C8.10938 6.25 8.625 6.76562 8.625 7.375V9.625C8.625 10.2578 8.10938 10.75 7.5 10.75C6.86719 10.75 6.375 10.2578 6.375 9.625V7.375ZM10.6875 9.625V5.875C10.6875 5.78125 10.5938 5.6875 10.5 5.6875C10.3828 5.6875 10.3125 5.78125 10.3125 5.875V9.625C10.3125 9.74219 10.3828 9.8125 10.5 9.8125C10.5938 9.8125 10.6875 9.74219 10.6875 9.625ZM10.5 4.75C11.1094 4.75 11.625 5.26562 11.625 5.875V9.625C11.625 10.2578 11.1094 10.75 10.5 10.75C9.86719 10.75 9.375 10.2578 9.375 9.625V5.875C9.375 5.26562 9.86719 4.75 10.5 4.75Z" fill="#3A3A3A" />
                    </svg>
                </div> Data
            </div>
            <div class="data-card__meta-regions">
            </div>
        </div>
        <div class="data-card__content">
            <span class="data-card__title">
                Far fewer low income students kindergarten ready
            </span>
            <div class="data-card__description">

            </div>
            <div class="data-card__image">

                <figure class="image image--with-caption">
                    <picture class="image__picture">
                        <img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/800x650" alt="">

                    </picture>
                    <figcaption class="image__caption">
                        Caption of image
                    </figcaption>
                </figure>
            </div>
            <div class="data-card__source">
                <span class="data-card__source-label">Source:</span> Source: The Seattle Times
            </div>
        </div>
    </div>
    <a href="#" class="cta-button cta-button--dark  ">
        <span class="cta-button__title">
            Get a Closer Look at This Data
        </span>
        <div class="cta-button__icon">
            <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.1875 6.9707L9.1875 11.9707C8.8125 12.377 8.15625 12.377 7.78125 11.9707C7.375 11.5957 7.375 10.9395 7.78125 10.5645L11.0625 7.25195H1.5C0.9375 7.25195 0.5 6.81445 0.5 6.25195C0.5 5.7207 0.9375 5.25195 1.5 5.25195H11.0625L7.78125 1.9707C7.375 1.5957 7.375 0.939453 7.78125 0.564453C8.15625 0.158203 8.8125 0.158203 9.1875 0.564453L14.1875 5.56445C14.5938 5.93945 14.5938 6.5957 14.1875 6.9707Z" fill="#ACEB8A" />
            </svg>
        </div>
    </a>
</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>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "component": {
    "title": "Data Block Component",
    "dataContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.",
    "cards": [
      {
        "title": "Far fewer low income students kindergarten ready",
        "regions": [
          "Central Texas",
          "Dallas"
        ],
        "image": {
          "src": "holder.js/800x650",
          "altText": "placeholder",
          "caption": "Caption of image"
        },
        "source": false
      },
      {
        "title": "Far fewer low income students kindergarten ready",
        "regions": [
          "Central Texas",
          "Dallas"
        ],
        "image": {
          "src": "holder.js/800x650",
          "altText": "placeholder",
          "caption": "Caption of image"
        },
        "source": "Source: The Seattle Times"
      }
    ],
    "enableDataCTA": true,
    "dataCTALink": "#"
  }
}
  • Content: 
    .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
  • URL: /components/raw/data-block-component/data-block-component.styl
  • Filesystem Path: patterns/components/data-block-component/data-block-component.styl
  • Size: 677 Bytes

No notes defined.