E3 Alliance Pattern Library

Resource Block Component 

<div class="resource-section__container">
    <h2 class="resource-section__header">Resource Block Component</h2>
    <div class="resource-section__body-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.</div>
    <div class="resource-card resource-card--PDF">
        <div class="resource-card__meta">
            <div class="resource-card__card-type">
                <div class="resource-card__resource-icon"><svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.03906 2.21094C8.42969 1.60156 7.42188 1.60156 6.8125 2.21094L2.3125 6.71094C1.30469 7.74219 1.30469 9.40625 2.3125 10.4141C3.34375 11.4453 5.00781 11.4453 6.03906 10.4141L9.60156 6.85156C9.8125 6.64062 10.1641 6.64062 10.375 6.85156C10.6094 7.08594 10.6094 7.4375 10.375 7.64844L6.8125 11.2109C5.35938 12.6875 2.99219 12.6875 1.53906 11.2109C0.0625 9.75781 0.0625 7.39062 1.53906 5.91406L6.03906 1.4375C7.07031 0.382812 8.78125 0.382812 9.8125 1.4375C10.8672 2.46875 10.8672 4.17969 9.8125 5.21094L5.52344 9.52344C4.77344 10.2734 3.55469 10.2031 2.89844 9.38281C2.33594 8.67969 2.40625 7.67188 3.03906 7.03906L6.60156 3.47656C6.8125 3.26562 7.16406 3.26562 7.375 3.47656C7.60938 3.71094 7.60938 4.0625 7.375 4.27344L3.83594 7.83594C3.60156 8.07031 3.57812 8.42188 3.78906 8.67969C4.02344 8.98438 4.44531 9.00781 4.72656 8.72656L9.03906 4.41406C9.64844 3.82812 9.64844 2.82031 9.03906 2.21094Z" fill="#3A3A3A" />
                    </svg>
                </div>Resource
            </div>
            <div class="resource-card__file-type">PDF</div>
        </div>
        <div class="resource-card__content">

            <div class="resource-card__content-left">
                <h4 class="resource-card__title">
                    My first resource
                </h4>
                <div class="resource-card__description">
                    This guide is an easy-to-use tool to help your child prepare to enter kindergarten.
                </div>
            </div>
            <div class="resource-card__content-right">
                <div class="resource-card__image">
                    <a href="#" class="resource-card__image-link">

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

                            </picture>
                            <figcaption class="image__caption">
                                Caption of image
                            </figcaption>
                        </figure>
                    </a>
                </div>
            </div>
        </div>
        <div class="resource-card__button">
            <a href="#" class="cta-button cta-button--dark  ">
                <span class="cta-button__title">
                    Download the Get Ready for School Guide for Families (English) PDF<span class="cta-button__file-size"> (5.96 MB)</span>
                </span>
                <div class="cta-button__icon">
                    <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="_mark" d="M12.5 4H8.5V0L12.5 4ZM8.5 5H12.5V14.5C12.5 15.3438 11.8125 16 11 16H2C1.15625 16 0.5 15.3438 0.5 14.5V1.5C0.5 0.6875 1.15625 0 2 0H7.5V4C7.5 4.5625 7.9375 5 8.5 5ZM8.46875 9.21875L7.25 10.4688V7.25C7.25 6.84375 6.90625 6.5 6.5 6.5C6.0625 6.5 5.75 6.84375 5.75 7.25V10.4688L4.5 9.21875C4.375 9.09375 4.1875 9 4 9C3.78125 9 3.59375 9.09375 3.46875 9.21875C3.15625 9.53125 3.15625 10 3.46875 10.2812L5.96875 12.7812C6.25 13.0938 6.71875 13.0938 7 12.7812L9.5 10.2812C9.8125 10 9.8125 9.53125 9.5 9.21875C9.21875 8.9375 8.75 8.9375 8.46875 9.21875Z" fill="#88C965" />
                    </svg>
                </div>
            </a>
        </div>
    </div>
    <div class="resource-card resource-card--video">
        <div class="resource-card__meta">
            <div class="resource-card__card-type">
                <div class="resource-card__resource-icon"><svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.03906 2.21094C8.42969 1.60156 7.42188 1.60156 6.8125 2.21094L2.3125 6.71094C1.30469 7.74219 1.30469 9.40625 2.3125 10.4141C3.34375 11.4453 5.00781 11.4453 6.03906 10.4141L9.60156 6.85156C9.8125 6.64062 10.1641 6.64062 10.375 6.85156C10.6094 7.08594 10.6094 7.4375 10.375 7.64844L6.8125 11.2109C5.35938 12.6875 2.99219 12.6875 1.53906 11.2109C0.0625 9.75781 0.0625 7.39062 1.53906 5.91406L6.03906 1.4375C7.07031 0.382812 8.78125 0.382812 9.8125 1.4375C10.8672 2.46875 10.8672 4.17969 9.8125 5.21094L5.52344 9.52344C4.77344 10.2734 3.55469 10.2031 2.89844 9.38281C2.33594 8.67969 2.40625 7.67188 3.03906 7.03906L6.60156 3.47656C6.8125 3.26562 7.16406 3.26562 7.375 3.47656C7.60938 3.71094 7.60938 4.0625 7.375 4.27344L3.83594 7.83594C3.60156 8.07031 3.57812 8.42188 3.78906 8.67969C4.02344 8.98438 4.44531 9.00781 4.72656 8.72656L9.03906 4.41406C9.64844 3.82812 9.64844 2.82031 9.03906 2.21094Z" fill="#3A3A3A" />
                    </svg>
                </div>Resource
            </div>
            <div class="resource-card__file-type">video</div>
        </div>
        <div class="resource-card__content">

            <h4 class="resource-card__title">
                My first resource
            </h4>
            <div class="resource-card__description">
                This guide is an easy-to-use tool to help your child prepare to enter kindergarten.
            </div>
            <div class="video-component">
                <div class="video-component__video">
                    <iframe title="UIUC FROM THE SKY" width="500" height="375" src="https://www.youtube.com/embed/lXbFu91a0t4/?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="resource-section__container">
    {% if component.title or title %}<h2 class="resource-section__header">{{ component.title }}</h2> {% endif %}
    {% if post.resourceContent %}<div class="resource-section__body-text">{{ post.resourceContent }}</div> {% endif %}
    {% for card in component.cards %}
        {% include 'partials/resource-card/resource-card.twig' with {
            card: card
        } %}
    {% endfor %}
</div>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "post": {
    "resourceContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien."
  },
  "component": {
    "title": "Resource Block Component",
    "cards": [
      {
        "title": "My first resource",
        "type": "PDF",
        "file": {
          "url": "#",
          "filename": "Get-Ready-for-School-English.pdf",
          "type": "PDF",
          "size": "5.96 MB"
        },
        "url": "#",
        "image": {
          "src": "holder.js/270x180",
          "altText": "placeholder",
          "caption": "Caption of image"
        },
        "description": "This guide is an easy-to-use tool to help your child prepare to enter kindergarten.",
        "linkText": "Download the Get Ready for School Guide for Families (English) PDF<span class=\"cta-button__file-size\"> (5.96 MB)</span>"
      },
      {
        "title": "My first resource",
        "type": "video",
        "file": {
          "url": "#",
          "filename": "Get-Ready-for-School-English.pdf",
          "type": "PDF",
          "size": "5.96 MB"
        },
        "url": "#",
        "image": false,
        "description": "This guide is an easy-to-use tool to help your child prepare to enter kindergarten.",
        "linkText": "Download the Get Ready for School Guide for Families (English) PDF<span class=\"cta-button__file-size\"> (5.96 MB)</span>",
        "video": "<iframe title=\"UIUC FROM THE SKY\" width=\"500\" height=\"375\" src=\"https://www.youtube.com/embed/lXbFu91a0t4/?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
      }
    ]
  }
}
  • Handle: @resource-block-component
  • Preview:
  • Filesystem Path: patterns/components/resource-block-component/resource-block-component.twig

No notes defined.