FAA Pattern Library - Landscape Architecture

Theatre homepage cta section 

<div class="courses-section">
    <div class="courses-section__background">
        <div class="courses-section__content-container">
            <div class="courses-section__heading-container">
                <div class="courses-section__heading">
                    Spring 2022 courses
                </div>

                <div class="courses-section__description courses-section__description--large">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
                </div>
                <div class="courses-section__courses-container">
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Quisque volutpat mattis eros<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="work-card-content__creators work-card-content__creators--light">
                                        Creator Name, Creator Name, and Creator Name
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Lorem ipsum dolor sit 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>
                                        </h2>
                                    </div>
                                    <div class="work-card-content__creators work-card-content__creators--light">
                                        Creator Name
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Strategies for Architectual Design<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="work-card-content__creators work-card-content__creators--light">
                                        Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Architecture and the City<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="work-card-content__creators work-card-content__creators--light">
                                        Associate Professor Therese Tierney
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Architectural Design & Development<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="work-card-content__creators work-card-content__creators--light">
                                        Lecturer Bhujon Kang
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Quisque volutpat mattis eros<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="work-card-content__creators work-card-content__creators--light">
                                        Creator Name, Creator Name, and Creator Name
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Lorem ipsum dolor sit 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>
                                        </h2>
                                    </div>
                                    <div class="work-card-content__creators work-card-content__creators--light">
                                        Creator Name
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                    <div class="courses-section__course-card">
                        <article class="card-with-image card-with-image--light card-with-image--vertical">
                            <div class="card-with-image__content">
                                <div class="work-card-content work-card-content--landarch">
                                    <div class="work-card-content__title">
                                        <h2 class="linked-title linked-title--landarch linked-title--light">
                                            <a href="http://localhost:3000/components/detail/work" class="
            linked-title__link linked-title__link--light
            
    ">
        Strategies for Architectual Design<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="work-card-content__creators work-card-content__creators--light">
                                        Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry
                                    </div>
                                </div>
                            </div>
                            <div class="card-with-image__image card-with-image__image--vertical">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/320/228?random=1" alt="building" width="320" height="228">
                                </figure>

                            </div>
                        </article>

                    </div>
                </div>
                <div class="courses-section__button-container">

                    <a href="" class="standard-button standard-button--landarch 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">View all courses</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>
 
<div class="courses-section">
    <div class="courses-section__background">
        <div class="courses-section__content-container">
            <div class="courses-section__heading-container">
                <div class="courses-section__heading">
                    {{ coursesSection.heading }}
                </div>

                <div class="courses-section__description courses-section__description--large">
                    {{ coursesSection.description }}
                </div>
                <div class="courses-section__courses-container">
                    {% for course in coursesSection.courses[0:8] %}
                        <div class="courses-section__course-card">
                            {% include 'partials/work-card/work-card.twig' with { work: course, verticalOrientation: true } %}
                        </div>
                    {% endfor %}
                </div>
                <div class="courses-section__button-container">
                    {% include 'bits/standard-button/standard-button.twig' with {
                        background: 'light',
                        button: {
                            text: coursesSection.cta.text,
                            url: coursesSection.cta.url,
                            type: 'primary',
                            icon: 'right-chevron',
                        }
                    } %}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "siteUnit": "landarch",
  "departmentName": "Landscape Architecture",
  "background": "light",
  "coursesSection": {
    "heading": "Spring 2022 courses",
    "description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.",
    "courses": [
      {
        "title": "Quisque volutpat mattis eros",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name, Creator Name, and Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Lorem ipsum dolor sit consectetuer
adipiscing elit",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Strategies for Architectual Design",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architecture and the City",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Associate Professor Therese Tierney",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architectural Design & Development",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Lecturer Bhujon Kang",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Quisque volutpat mattis eros",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name, Creator Name, and Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Lorem ipsum dolor sit consectetuer
adipiscing elit",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Strategies for Architectual Design",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architecture and the City",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Associate Professor Therese Tierney",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architectural Design & Development",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Lecturer Bhujon Kang",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      }
    ],
    "cta": {
      "text": "View all courses",
      "link": "#"
    }
  }
}
  • Content: 
    .courses-section
    position relative
    z-index 1

    &__background
        background cloudDark
        transform skewY(3deg)

    &__content-container
        @extends $contentContainer
        fluid(bottom, mediumDeviceBreakpoint, maxContentWidth, -160px, -208px)
        fluid(margin-bottom, mediumDeviceBreakpoint, maxContentWidth, 160px, 208px)
        position relative
        transform skewY(-3deg)

    &__heading
        @extends $secondaryTitle

    &__description
        @extends $primaryParagraph
        fluid(margin-bottom, 500px, maxContentWidth, 32px, 48px)
        max-width 990px

    &__courses-container
        display grid
        grid-column-gap 16px
        grid-row-gap 24px
        grid-template-columns 1fr
        margin-bottom 48px

        +above(mediumDeviceBreakpoint)
            grid-template-columns repeat(2, 1fr)

        +above(largeDeviceBreakpoint)
            grid-template-columns repeat(4, 1fr)

        & .card-with-image
        & .card-with-image__image
            max-width 100%
            height 100%

        & .card-with-image__content
            background white
            width 100%
  • URL: /components/raw/courses-section/courses-section.styl
  • Filesystem Path: components/partials/homepages/landarch/courses-section/courses-section.styl
  • Size: 1.1 KB
  • Handle: @courses-section
  • Preview:
  • Filesystem Path: components/partials/homepages/landarch/courses-section/courses-section.twig

There are no notes for this item.