<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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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": "#"
}
}
}
.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%
There are no notes for this item.