FAA Pattern Library - Network

Large feature 

<div class="music-feature">
    <div class="music-feature__bg-image">
        <picture class="simple-image">
            <source srcset="
                    https://i.picsum.photos/id/327/412/212.jpg?hmac=-a9Iym33CoxDGPbn3_j-sRD0L1lSiQ6d9TF4exKjg38 412w,
                    https://i.picsum.photos/id/255/824/424.jpg?hmac=RtPPT1rLk3D4SXD-RetSgeCsQuPDiNQRSnfwA0ok-1M 824w,
                    https://i.picsum.photos/id/42/1236/636.jpg?hmac=hEMU2zvmtineGtblQiD56C4dBRTd3i4E_3vx2iaPJwI 1236w,
                    https://i.picsum.photos/id/229/1648/848.jpg?hmac=xIoimkK2aKkx-cWAu0t3WubDFMPvraqfOGCRBOU9_74 1648w
        " type="image/webp">
            <img class="simple-image__image" src="https://i.picsum.photos/id/327/412/212.jpg?hmac=-a9Iym33CoxDGPbn3_j-sRD0L1lSiQ6d9TF4exKjg38" alt="alt text">
        </picture>
    </div>
    <div class="music-feature__wrapper">
        <div class="music-feature__container">
            <div class="music-feature__info" data-sal="slide-up" data-sal-delay="100" data-sal-easing="ease-in-out" data-sal-duration="700">
                <h2 class="music-feature__title">Take the stage</h2>
                <div class="music-feature__description">The Krannert Center for the Performing Arts nec <em>justo</em> eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</div>
                <div class="music-feature__ctas">
                    <div class="music-feature__cta">

                        <a href="#" class="standard-button standard-button--network standard-button--light
            standard-button---width standard-button--primary">
                            <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Button one</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/></svg></span></span>
                            </div>
                        </a>
                    </div>
                    <div class="music-feature__cta">

                        <a href="#" class="standard-button standard-button--network standard-button--light
            standard-button---width standard-button--primary">
                            <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Button Two</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="music-feature">
    <div class="music-feature__bg-image">
        {% include 'bits/simple-image/simple-image.twig' with {image: feature.image} %}
    </div>
    <div class="music-feature__wrapper">
        <div class="music-feature__container">
            <div class="music-feature__info" data-sal="slide-up" data-sal-delay="100" data-sal-easing="ease-in-out" data-sal-duration="700">
                <h2 class="music-feature__title">{{ feature.title }}</h2>
                <div class="music-feature__description">{{ feature.description | raw }}</div>
                <div class="music-feature__ctas">
                    {% for cta in feature.ctas %}
                        <div class="music-feature__cta">
                            {% include 'bits/standard-button/standard-button.twig' with {
                                button: {
                                    text: cta.text,
                                    url: cta.url,
                                    type: 'primary',
                                    icon: cta.type|default('internal') ~ '-link',
                                }
                            } %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light",
  "feature": {
    "title": "Take the stage",
    "description": "The Krannert Center for the Performing Arts nec <em>justo</em> eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.",
    "ctas": [
      {
        "text": "Button one",
        "url": "#",
        "type": "external"
      },
      {
        "text": "Button Two",
        "url": "#",
        "type": "internal"
      }
    ],
    "image": {
      "srcset": [
        {
          "src": "https://i.picsum.photos/id/327/412/212.jpg?hmac=-a9Iym33CoxDGPbn3_j-sRD0L1lSiQ6d9TF4exKjg38",
          "width": "412"
        },
        {
          "src": "https://i.picsum.photos/id/255/824/424.jpg?hmac=RtPPT1rLk3D4SXD-RetSgeCsQuPDiNQRSnfwA0ok-1M",
          "width": "824"
        },
        {
          "src": "https://i.picsum.photos/id/42/1236/636.jpg?hmac=hEMU2zvmtineGtblQiD56C4dBRTd3i4E_3vx2iaPJwI",
          "width": "1236"
        },
        {
          "src": "https://i.picsum.photos/id/229/1648/848.jpg?hmac=xIoimkK2aKkx-cWAu0t3WubDFMPvraqfOGCRBOU9_74",
          "width": "1648"
        }
      ],
      "altText": "alt text"
    }
  }
}
  • Handle: @music-feature
  • Preview:
  • Filesystem Path: components/partials/homepages/music/feature/music-feature.twig

There are no notes for this item.