FAA Pattern Library - Landscape Architecture

Landarch homepage news and events: Default 

<div class="news-events-section">
    <div class="news-events-section__container">
        <div class="news-events-section__section news-events-section__section--news">
            <h2 class="news-events-section__section-label">
                Recent News
            </h2>
            <div class="news-events-section__section-content news-events-section__section-content--news">
                <div class="news-events-section__news-card">
                    <div class="news-events-section__news-card-detail">
                        <div class="news-events-section__post-title">
                            <h3 class="linked-title linked-title--landarch 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>
                            </h3>
                        </div>
                        <div class="news-events-section__date">
                            November 19, 2022
                        </div>
                    </div>
                    <div class="news-events-section__image-container">
                        <div class="news-events-section__image">
                            <figure class="captioned-image">
                                <img class="captioned-image__image" src="https://picsum.photos/432/304?random=1" alt="" width="688" height="464">
                            </figure>

                        </div>
                    </div>
                </div>
                <div class="news-events-section__news-card">
                    <div class="news-events-section__news-card-detail">
                        <div class="news-events-section__post-title">
                            <h3 class="linked-title linked-title--landarch 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>
                            </h3>
                        </div>
                        <div class="news-events-section__date">
                            November 19, 2022
                        </div>
                    </div>
                    <div class="news-events-section__image-container">
                        <div class="news-events-section__image">
                            <figure class="captioned-image">
                                <img class="captioned-image__image" src="https://picsum.photos/432/304?random=2" alt="" width="688" height="464">
                            </figure>

                        </div>
                    </div>
                </div>
                <div class="news-events-section__button-container">

                    <a href="https://google.com" class="standard-button standard-button--landarch 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 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>

        <div class="news-events-section__section news-events-section__section--events">
            <h2 class="news-events-section__section-label">
                Upcoming Events
            </h2>
            <div class="news-events-section__section-content news-events-section__section-content--events">
                <div class="news-events-section__event-card">
                    <article class="card-with-image card-with-image--dark ">
                        <div class="card-with-image__content">
                            <div class="event-card-content event-card-content--landarch">

                                <div class="event-data-with-icon">
                                    <div class="event-data-with-icon__icon">
                                        <div class="event-card-content__icon">
                                            <div class="calendar-page calendar-page--dark calendar-page--landarch">
                                                <div class="calendar-page__month">
                                                    Nov
                                                </div>
                                                <div class="calendar-page__day">
                                                    24
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="event-data-with-icon__detail">
                                        <div class="event-card-content__title">
                                            <h3 class="linked-title linked-title--landarch linked-title--dark">
                                                <a href="#" class="
            linked-title__link linked-title__link--dark
            
    ">
        Lorem ipsum dolor sit amet consectetuer adipiscing elit<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>
                                            </h3>
                                        </div>
                                        <div class="event-card-content__date event-card-content__date--dark">
                                            November 24, 2022
                                        </div>
                                        <div class="event-card-content__time event-card-content__time--dark">
                                            <span class="event-card-content__dayofweek">Tuesday, </span> 12:30 PM - 2:30 PM
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="news-events-section__event-card">
                    <article class="card-with-image card-with-image--dark ">
                        <div class="card-with-image__content">
                            <div class="event-card-content event-card-content--landarch">

                                <div class="event-data-with-icon">
                                    <div class="event-data-with-icon__icon">
                                        <div class="event-card-content__icon">
                                            <div class="calendar-page calendar-page--dark calendar-page--landarch">
                                                <div class="calendar-page__month">
                                                    Nov
                                                </div>
                                                <div class="calendar-page__day">
                                                    25
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="event-data-with-icon__detail">
                                        <div class="event-card-content__title">
                                            <h3 class="linked-title linked-title--landarch linked-title--dark">
                                                <a href="#" class="
            linked-title__link linked-title__link--dark
            
    ">
        Visitor Series: Walter J. Hood, “How urban spaces can preserve history and build community”<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>
                                            </h3>
                                        </div>
                                        <div class="event-card-content__date event-card-content__date--dark">
                                            November 25, 2022
                                        </div>
                                        <div class="event-card-content__time event-card-content__time--dark">
                                            <span class="event-card-content__dayofweek">Wednesday, </span> 12:30 PM - 2:30 PM
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="news-events-section__event-card">
                    <article class="card-with-image card-with-image--dark ">
                        <div class="card-with-image__content">
                            <div class="event-card-content event-card-content--landarch">

                                <div class="event-data-with-icon">
                                    <div class="event-data-with-icon__icon">
                                        <div class="event-card-content__icon">
                                            <div class="calendar-page calendar-page--dark calendar-page--landarch">
                                                <div class="calendar-page__month">
                                                    Nov
                                                </div>
                                                <div class="calendar-page__day">
                                                    25
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="event-data-with-icon__detail">
                                        <div class="event-card-content__title">
                                            <h3 class="linked-title linked-title--landarch linked-title--dark">
                                                <a href="#" class="
            linked-title__link linked-title__link--dark
            
    ">
        Suspendisse urna nibh viverra non<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>
                                            </h3>
                                        </div>
                                        <div class="event-card-content__date event-card-content__date--dark">
                                            November 25, 2022
                                        </div>
                                        <div class="event-card-content__time event-card-content__time--dark">
                                            <span class="event-card-content__dayofweek">Wednesday, </span> 12:30 PM - 2:30 PM
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="news-events-section__button-container news-events-section__button-container--events">

                    <a href="https://google.com" class="standard-button standard-button--landarch 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 events</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>
    </div>
</div>
 
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="news-events-section">
    <div class="news-events-section__container">
        {% if homepageNewsEvents.news %}
            <div class="news-events-section__section news-events-section__section--news">
                <h2 class="news-events-section__section-label">
                    {{  homepageNewsEvents.newsHeading }}
                </h2>
                <div class="news-events-section__section-content news-events-section__section-content--news">
                    {% for post in homepageNewsEvents.news[0:2] %}
                        <div class="news-events-section__news-card">
                            <div class="news-events-section__news-card-detail">
                                <div class="news-events-section__post-title">
                                    {% include 'bits/linked-title/linked-title.twig' with {
                                        element: 'h3',
                                        text: post.title,
                                        url: post.permalink,
                                    } %}
                                </div>
                                <div class="news-events-section__date">
                                    {{ post.publishDate }}
                                </div>
                            </div>
                            <div class="news-events-section__image-container">
                                <div class="news-events-section__image">
                                    {{ imageMacros.create(post.featuredImage, 688, 464, background) }}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    {% if homepageNewsEvents.news %}
                        <div class="news-events-section__button-container">
                            {% include 'bits/standard-button/standard-button.twig' with {
                                background: 'dark',
                                button: {
                                    text: homepageNewsEvents.newsCallToAction.text,
                                    url: homepageNewsEvents.newsCallToAction.url,
                                    type: 'primary',
                                    icon: 'right-chevron'
                                }
                            } %}
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if homepageNewsEvents.events %}
            <div class="news-events-section__section news-events-section__section--events">
                <h2 class="news-events-section__section-label">
                    {{  homepageNewsEvents.eventsHeading }}
                </h2>
                <div class="news-events-section__section-content news-events-section__section-content--events">
                    {% for post in homepageNewsEvents.events[0:3] %}
                        <div class="news-events-section__event-card">
                            {% include 'partials/event-card/event-card.twig' with {
                                event: post,
                                background: 'dark',
                                siteUnit: siteUnit,
                                headingEl: 'h3'
                            } only %}
                        </div>
                    {% endfor %}
                    {% if homepageNewsEvents.events %}
                        <div class="news-events-section__button-container news-events-section__button-container--events">
                            {% include 'bits/standard-button/standard-button.twig' with {
                                background: 'dark',
                                button: {
                                    text: homepageNewsEvents.eventsCallToAction.text,
                                    url: homepageNewsEvents.eventsCallToAction.url,
                                    type: 'primary',
                                    icon: 'right-chevron'
                                }
                            } %}
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
 
{
  "siteUnit": "landarch",
  "departmentName": "Landscape Architecture",
  "background": "light",
  "homepageNewsEvents": {
    "newsHeading": "Recent News",
    "news": [
      {
        "title": "Department Welcomes Assistant Professor Kelley Lemon",
        "permalink": "https://google.com",
        "publishDate": "November 19, 2022",
        "addImage": true,
        "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",
        "addImage": true,
        "featuredImage": {
          "src": "https://picsum.photos/432/304?random=2",
          "alText": "some alt text"
        }
      }
    ],
    "newsCallToAction": {
      "url": "https://google.com",
      "text": "See all news"
    },
    "eventsHeading": "Upcoming Events",
    "events": [
      {
        "title": "Lorem ipsum dolor sit amet consectetuer adipiscing elit",
        "permalink": "#",
        "fullDate": "November 24, 2022",
        "startTime": "12:30 PM",
        "endTime": "2:30 PM",
        "startDayOfWeek": "Tuesday",
        "shortStartMonth": "Nov",
        "startDay": "24",
        "locations": []
      },
      {
        "title": "Visitor Series: Walter J. Hood, “How urban spaces can preserve history and build community”",
        "permalink": "#",
        "fullDate": "November 25, 2022",
        "startTime": "12:30 PM",
        "endTime": "2:30 PM",
        "startDayOfWeek": "Wednesday",
        "shortStartMonth": "Nov",
        "startDay": "25",
        "locations": []
      },
      {
        "title": "Suspendisse urna nibh viverra non",
        "permalink": "#",
        "fullDate": "November 25, 2022",
        "startTime": "12:30 PM",
        "endTime": "2:30 PM",
        "startDayOfWeek": "Wednesday",
        "shortStartMonth": "Nov",
        "startDay": "25",
        "locations": []
      }
    ],
    "eventsCallToAction": {
      "url": "https://google.com",
      "text": "See all events"
    }
  }
}
  • Content: 
    .news-events-section
    background charcoal
    fluid(padding-bottom, 500px, maxContentWidth, 96px, 128px)
    fluid(padding-top, 500px, maxContentWidth, 96px, 208px)
    position relative
    transform skewY(-3deg)

    &__container
        @extends $contentContainer
        transform skewY(3deg)

    &__section
        display grid
        grid-gap 24px
        grid-template-columns 100%
        grid-template-rows 1fr

        +above(largeDeviceBreakpoint)
            grid-template-columns 33% 66%

        &--news
            margin-bottom 80px

    &__section-label
        @extends $tertiaryTitle
        color white

    &__section-content
        display grid
        grid-template-columns 1fr

        &--news
            grid-gap 24px
            +above(largeDeviceBreakpoint)
                grid-gap 16px
                grid-template-columns 1fr 1fr

        &--events
            flex-direction column

    &__news-card
        background-color charcoalDarker
        overflow hidden

    &__news-card-detail
        padding 24px

    &__post-title
        margin-bottom 4px

        & .linked-title__link
            @extends $secondaryLead
            color white !important

            &:hover
            &:active
            &:focus
                color white !important

    &__date
        @extends $detail
        color grey

    &__image-container
    &__image
        height auto
        object-fit cover
        width 100%

    &__event-card
        & .card-with-image
            background-color charcoalDarker

        & .event-card-content__date
            color illiniOrange

    &__button-container
        margin-top 8px
        &--events
            margin-top 16px
        +above(largeDeviceBreakpoint)
            margin-top 16px
            &--events
                margin-top 16px


    &__background
        background-color charcoal
        fluid(height, 500px, maxContentWidth, 80px, 128px)
        position relative
        width 100vw
        z-index -1
  • URL: /components/raw/news-events-section/news-events-section.styl
  • Filesystem Path: components/partials/homepages/landarch/news-events-section/news-events-section.styl
  • Size: 2 KB

There are no notes for this item.