<div class="homepage-news">
    <div class="homepage-news__container">
        <div class="homepage-news__wrapper">
            <div class="homepage-news__description">
                <h2 class="homepage-news__header">
                    Choose your path
                </h2>
                <div class="homepage-news__button">

                    <a href="#" class="standard-button standard-button--durp standard-button--dark
            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 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 class="homepage-news__news">

                <article class="card-with-image card-with-image--dark ">
                    <div class="card-with-image__content">
                        <div class="
            news-card-content
            news-card-content--dark
            news-card-content--durp
        ">
                            <div class="news-card-content__title">
                                <h2 class="linked-title linked-title--durp linked-title--dark">
                                    <a href="http://localhost:3000/components/detail/news" class="
            linked-title__link linked-title__link--dark
            
    ">
        The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<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--dark">
                                November 19, 2019
                            </div>
                        </div>
                    </div>
                    <div class="card-with-image__image ">
                        <figure class="captioned-image">
                            <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
                        </figure>

                    </div>
                </article>

                <article class="card-with-image card-with-image--dark ">
                    <div class="card-with-image__content">
                        <div class="
            news-card-content
            news-card-content--dark
            news-card-content--durp
        ">
                            <div class="news-card-content__title">
                                <h2 class="linked-title linked-title--durp linked-title--dark">
                                    <a href="http://localhost:3000/components/detail/news" class="
            linked-title__link linked-title__link--dark
            
    ">
        The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<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--dark">
                                November 19, 2019
                            </div>
                        </div>
                    </div>
                    <div class="card-with-image__image ">
                        <figure class="captioned-image">
                            <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
                        </figure>

                    </div>
                </article>

                <article class="card-with-image card-with-image--dark ">
                    <div class="card-with-image__content">
                        <div class="
            news-card-content
            news-card-content--dark
            news-card-content--durp
        ">
                            <div class="news-card-content__title">
                                <h2 class="linked-title linked-title--durp linked-title--dark">
                                    <a href="http://localhost:3000/components/detail/news" class="
            linked-title__link linked-title__link--dark
            
    ">
        The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<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--dark">
                                November 19, 2019
                            </div>
                        </div>
                    </div>
                    <div class="card-with-image__image ">
                        <figure class="captioned-image">
                            <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
                        </figure>

                    </div>
                </article>

                <article class="card-with-image card-with-image--dark ">
                    <div class="card-with-image__content">
                        <div class="
            news-card-content
            news-card-content--dark
            news-card-content--durp
        ">
                            <div class="news-card-content__title">
                                <h2 class="linked-title linked-title--durp linked-title--dark">
                                    <a href="http://localhost:3000/components/detail/news" class="
            linked-title__link linked-title__link--dark
            
    ">
        The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<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--dark">
                                November 19, 2019
                            </div>
                        </div>
                    </div>
                    <div class="card-with-image__image ">
                        <figure class="captioned-image">
                            <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="friendly kitten" width="320" height="228">
                        </figure>

                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
<div class="homepage-news">
    <div class="homepage-news__container">
        <div class="homepage-news__wrapper">
            <div class="homepage-news__description">
                <h2 class="homepage-news__header">
                    {{  news.header }}
                </h2>
                <div class="homepage-news__button">
                    {% include 'bits/standard-button/standard-button.twig' with {
                        button: {
                            type: 'primary',
                            icon: 'internal-link',
                            text: news.cta.text,
                            url: news.cta.url,
                            width: regular,
                        }
                    } %}
                </div>
            </div>
            <div class="homepage-news__news">
                {% for story in news.posts %}
                    {% include 'partials/news-card/news-card.twig' with {'story': story, 'background': 'dark'} %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "news": {
    "header": "Choose your path",
    "cta": {
      "text": "See all news",
      "url": "#"
    },
    "posts": [
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      }
    ]
  }
}
  • Content:
    breakpointSmall = 784px
    breakpointLarge = 1300px
    .homepage-news
        background-color charcoalLight
        padding-bottom 80px
        fluid(padding-bottom padding-top, 320px, maxContentWidth, 80px, 160px)
        padding-top 80px
        &__container
            @extends $contentContainer
        &__wrapper
            +above(breakpointLarge)
                @supports (display: grid)
                    display grid
                grid-template-columns 4fr 8fr
        &__description
            +above(breakpointLarge)
                padding-right 48px
        &__header
            @extends $primaryTitle
            color white
            margin-bottom 24px
        &__introduction
            @extends $primaryParagraph
            color grey
        &__button
            margin-top 48px
        &__news
            @supports (display: grid)
                display grid
            grid-auto-rows minmax(100px, auto)
            grid-template-columns 1fr
            +below(breakpointLarge)
                margin-top 48px
    
  • URL: /components/raw/homepage-news/homepage-news.styl
  • Filesystem Path: components/partials/homepages/durp/homepage-news/homepage-news.styl
  • Size: 921 Bytes
  • Handle: @homepage-news
  • Preview:
  • Filesystem Path: components/partials/homepages/durp/homepage-news/homepage-news.twig

There are no notes for this item.