Custom theme (replace with client name)

Featured Story: Default 

<article class="featured-news featured-news--light">
    <div class="featured-news__image">
        <figure class="image ">
            <picture class="image__picture">
                <source srcset="https://placekitten.com/880/496" type="image/webp">
                <source srcset="https://placekitten.com/880/496" type="image/jpeg">
                <img class="image__image" loading="lazy" type="image/jpeg" src="https://placekitten.com/880/496" alt="" height="" width="">
            </picture>
        </figure>
    </div>
    <div class="featured-news__date">
        January 17, 2020
    </div>
    <div class="featured-news__title">
        <h2 class="linked-title linked-title--dark">
            <a href="" class="linked-title__link">
                The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists
                <span class="linked-title__link-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-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="featured-news__summary">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</article>
 
<article class="featured-news featured-news--{{ background }}">
    {% if post.featuredImage %}
        <div class="featured-news__image">
            {% include 'partials/image/image.twig' with {
                image: post.featuredImage,
                cropWidth: 880,
                cropHeight: 560,
                background: 'dark',
            } %}
        </div>
    {% endif %}
    <div class="featured-news__date">
        {{ post.date }}
    </div>
    <div class="featured-news__title">
        {% include 'bits/linked-title/linked-title.twig' with {
            url: post.permalink,
            text: post.title,
            background: 'dark'
        } %}
    </div>
    <div class="featured-news__summary">
        {{ post.summary }}
    </div>
</article>
 
{
  "post": {
    "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
    "date": "January 17, 2020",
    "featuredImage": {
      "src": "https://placekitten.com/880/496",
      "altText": "friendly kitten"
    },
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  },
  "background": "light"
}
  • Content: 
    .featured-news
    --dateColor grayDarkest
    --summaryColor grayDarkest
    --textColor charcoal

    &--dark
        --dateColor gray
        --summaryColor gray
        --textColor white

    &__image
        margin-bottom 24px

    &__title
        margin-bottom 8px
        margin-top 32px

        a
            @extends $headline2
            color var(--textColor)

    &__date
        @extends $labelSmall
        color var(--dateColor)
        margin-bottom 16px

    &__summary
        @extends $richText
        @extends $bodyLarge
        color var(--summaryColor)
  • URL: /components/raw/featured-news/featured-news.styl
  • Filesystem Path: patterns/partials/news/featured-news/featured-news.styl
  • Size: 579 Bytes

No notes defined.