E3 Alliance Pattern Library

Data Card: No Source 

<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">{% include 'bits/icons/data-icon.twig'%}</div> Data
        </div>
        <div class="data-card__meta-regions">
            {% for regionItem in card.region %}
                <div class="data-card__meta-region">{{ regionItem }}</div>

            {% endfor %}
        </div>
    </div>
    <div class="data-card__content">
        <span class="data-card__title">
            {{ card.title }}
        </span>
        <div class="data-card__description">
            {{ card.description }}
        </div>
        <div class="data-card__image">
            {% include 'partials/image/image.twig' with {
                'image': card.image,
            } %}
        </div>
        {% if card.source %}
        <div class="data-card__source">
            <span class="data-card__source-label">Source:</span> {{ card.source }}
        </div>
        {% endif %}
    </div>
</div>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "card": {
    "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
  }
}
  • Content: 
    .data-card
    @extends $contentContainer
    padding-top contentPaddingSmall
    padding-bottom contentPaddingSmall
    border-bottom 2px rgba(20, 81, 110, 0.10) solid


    &__meta
    &__meta-type
        display flex
        align-items baseline

    &__meta
        flex-direction row
        font-size 16px

    &__meta-type
        font-weight 700
        padding-right 16px

    &__meta-regions
        color #B0B0B0
        display flex

    &__meta-region:not(:first-child)
        padding-left 8px

    &__data-icon
        padding-right 6px

    &__title
        @extends $headline4
        padding-top 8px
        padding-bottom 8px

    &__description
        font-size 20px
        font-weight 300
        line-height 36px
        padding-bottom contentPaddingSmall

    &__image
        padding-bottom 8px

    &__source
        font-size 16px
        line-height 20px

    &__source-label
        color #B0B0B0
  • URL: /components/raw/data-card/data-card.styl
  • Filesystem Path: patterns/partials/data-card/data-card.styl
  • Size: 929 Bytes

No notes defined.