FAA Pattern Library - Music

Homepage news section 

<div class="music-news">
    <div class="music-news__container">
        <h2 class="music-news__title">Recent News</h2>
        <div class="music-news__news">
            <div class="music-news__featured-article">
                <img class="music-news__featured-article-img" src="https://picsum.photos/656/432?random=4" alt="">
                <h2 class="linked-title linked-title--music linked-title--light">
                    <a href="https://google.com" class="
            linked-title__link linked-title__link--light
            
    ">
        Department Welcomes Assistant Professor Kelley Lemon<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" 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>
    </a>
                </h2>
                <div class="music-news__featured-article-date">November 20, 2022</div>
            </div>
            <div class="music-news__articles">

                <article class="card-with-image card-with-image--light ">
                    <div class="card-with-image__content">
                        <div class="
            news-card-content
            news-card-content--light
            news-card-content--music
        ">
                            <div class="news-card-content__title">
                                <h2 class="linked-title linked-title--music linked-title--light">
                                    <a href="https://google.com" class="
            linked-title__link linked-title__link--light
            
    ">
        Department Welcomes Assistant Professor Kelley Lemon<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" 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>
    </a>
                                </h2>
                            </div>
                            <div class="news-card-content__date news-card-content__date--light">
                                November 19, 2022
                            </div>
                        </div>
                    </div>
                    <div class="card-with-image__image ">
                        <figure class="captioned-image">
                            <img class="captioned-image__image" src="https://picsum.photos/432/304?random=1" alt="" width="320" height="228">
                        </figure>

                    </div>
                </article>

                <article class="card-with-image card-with-image--light ">
                    <div class="card-with-image__content">
                        <div class="
            news-card-content
            news-card-content--light
            news-card-content--music
        ">
                            <div class="news-card-content__title">
                                <h2 class="linked-title linked-title--music linked-title--light">
                                    <a href="https://google.com" class="
            linked-title__link linked-title__link--light
            
    ">
        Patricia Johanson Delivers 2021 Sasaki Day Lecture<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" 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>
    </a>
                                </h2>
                            </div>
                            <div class="news-card-content__date news-card-content__date--light">
                                November 19, 2022
                            </div>
                        </div>
                    </div>
                    <div class="card-with-image__image ">
                        <figure class="captioned-image">
                            <img class="captioned-image__image" src="https://picsum.photos/432/304?random=2" alt="" width="320" height="228">
                        </figure>

                    </div>
                </article>

                <article class="card-with-image card-with-image--light ">
                    <div class="card-with-image__content">
                        <div class="
            news-card-content
            news-card-content--light
            news-card-content--music
        ">
                            <div class="news-card-content__title">
                                <h2 class="linked-title linked-title--music linked-title--light">
                                    <a href="https://google.com" class="
            linked-title__link linked-title__link--light
            
    ">
        Department Welcomes Assistant Professor Kelley Lemon<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" 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>
    </a>
                                </h2>
                            </div>
                            <div class="news-card-content__date news-card-content__date--light">
                                November 19, 2022
                            </div>
                        </div>
                    </div>
                    <div class="card-with-image__image ">
                        <figure class="captioned-image">
                            <img class="captioned-image__image" src="https://picsum.photos/432/304?random=3" alt="" width="320" height="228">
                        </figure>

                    </div>
                </article>
            </div>
        </div>
        <div class="music-news__cta">

            <a href="https://google.com" class="standard-button standard-button--music 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">See all news</span><span class="standard-button__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16"><path class="_mark right-chevron__shape" fill="#FF552E" 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>
 
{% if news.articles is not empty %}
<div class="music-news">
    <div class="music-news__container">
        <h2 class="music-news__title">{{ news.title }}</h2>
        <div class="music-news__news">
            {% if news.featuredArticle %}
                <div class="music-news__featured-article">
                    <img class="music-news__featured-article-img" src="{{ news.featuredArticle.featuredImage.src | towebp | resize(656,432)}}" alt="{{ news.featuredArticle.featuredImage.altText | escape }}">
                    {% include 'bits/linked-title/linked-title.twig' with {
                        url: news.featuredArticle.permalink,
                        text: news.featuredArticle.title
                    } %}
                    <div class="music-news__featured-article-date">{{ news.featuredArticle.publishDate }}</div>
                </div>
            {% endif %}
            <div class="music-news__articles">
                {% for article in news.articles %}
                    {% include 'partials/news-card/news-card.twig' with {'story': article} %}
                {% endfor %}
            </div>
        </div>
        <div class="music-news__cta">
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    type: 'primary',
                    icon: 'right-chevron',
                    text: news.cta.text,
                    url: news.cta.url,
                }
            } %}
        </div>
    </div>
</div>
{% endif %}
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "news": {
    "title": "Recent News",
    "featuredArticle": {
      "title": "Department Welcomes Assistant Professor Kelley Lemon",
      "permalink": "https://google.com",
      "publishDate": "November 20, 2022",
      "featuredImage": {
        "src": "https://picsum.photos/656/432?random=4",
        "alText": "some alt text"
      }
    },
    "articles": [
      {
        "title": "Department Welcomes Assistant Professor Kelley Lemon",
        "permalink": "https://google.com",
        "publishDate": "November 19, 2022",
        "featuredImage": {
          "src": "https://picsum.photos/432/304?random=1",
          "alText": "some alt text"
        }
      },
      {
        "title": "Patricia Johanson Delivers 2021 Sasaki Day Lecture",
        "permalink": "https://google.com",
        "publishDate": "November 19, 2022",
        "featuredImage": {
          "src": "https://picsum.photos/432/304?random=2",
          "alText": "some alt text"
        }
      },
      {
        "title": "Department Welcomes Assistant Professor Kelley Lemon",
        "permalink": "https://google.com",
        "publishDate": "November 19, 2022",
        "featuredImage": {
          "src": "https://picsum.photos/432/304?random=3",
          "alText": "some alt text"
        }
      }
    ],
    "cta": {
      "url": "https://google.com",
      "text": "See all news"
    }
  }
}

There are no notes for this item.