<div class="topic-block-component topic-block-component--light topic-block-component--large">
<div class="topic-block-component__content-container topic-block-component__content-container--with-image">
<div class="topic-block-component__image topic-block-component__image--light">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/600/500?random=1" alt="tall building" width="432" height="352">
<figcaption class="captioned-image__caption captioned-image__caption--light">
The caption of your image goes here
</figcaption>
</figure>
</div>
<div class="topic-block-component__text-and-cta-container topic-block-component__text-and-cta-container--light">
<h2 class="topic-block-component__header topic-block-component__header--light
" id="Component header">
Component header
</h2>
<div class="topic-block-component__text topic-block-component__text--light">
<p>Our graduate <em>students have access</em> to a wide variety of world-class <a href="#">facilities</a>, including:</p>
<ul>
<li>Studio Spaces</li>
<li>The <strong>Ricker Library</strong> of Architecture and Art</li>
<li>Fabrication and Print (3D) labs</li>
<li>Computing Resources</li>
<li>Hosted Exhibitions, Reviews, and Events</li>
</ul>
</div>
<div class="topic-block-component__cta">
<a href="#" class="standard-button standard-button--music 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">Show me more</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>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="topic-block-component topic-block-component--{{ background }} topic-block-component--{{ componentSpacing }}">
<div class="topic-block-component__content-container {{ component.image|default(false) ? 'topic-block-component__content-container--with-image' }}">
{% if component.image %}
<div class="topic-block-component__image topic-block-component__image--{{ background }}">
{{ imageMacros.create(component.image, 432, 352, background) }}
</div>
{% endif %}
<div class="topic-block-component__text-and-cta-container topic-block-component__text-and-cta-container--{{ background }}">
{% if component.header|default and (component.header|trim) %}
<h2 class="topic-block-component__header topic-block-component__header--{{ background }}
{{ component.hideHeader ? 'topic-block-component__header--is-hidden' : '' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
<div class="topic-block-component__text topic-block-component__text--{{ background }}">
{{ component.text | raw }}
</div>
{% if component.callToAction.text %}
<div class="topic-block-component__cta">
{% set buttonColor = background == 'light' ? 'charcoalLighter' : 'cloud' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: component.callToAction.type|default('internal') ~ '-link',
text: component.callToAction.text,
url: component.callToAction.url,
}
} %}
</div>
{% endif %}
</div>
</div>
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "topic-block",
"header": "Component header",
"image": {
"src": "https://picsum.photos/600/500?random=1",
"altText": "tall building",
"caption": "The caption of your image goes here"
},
"text": "<p>Our graduate <em>students have access</em> to a wide variety of world-class <a href=\"#\">facilities</a>, including:</p><ul><li>Studio Spaces</li><li>The <strong>Ricker Library</strong> of Architecture and Art</li><li>Fabrication and Print (3D) labs</li><li>Computing Resources</li><li>Hosted Exhibitions, Reviews, and Events</li></ul>",
"callToAction": {
"text": "Show me more",
"url": "#"
}
}
}
.topic-block-component
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
position relative
&--light
background-color backgroundColor = cloud
&--dark
background-color backgroundColor = charcoalLighter
&__header
@extends $secondaryLead
margin-bottom 8px
&--is-hidden
@extends $visually-hidden
&__content-container
align-items center
display grid
grid-gap 24px
grid-template-areas "text-and-cta"
grid-template-columns 1fr
&--with-image
grid-gap 0
grid-template-areas \
"image" \
"text-and-cta"
+above(largeDeviceBreakpoint)
grid-template-areas "text-and-cta image"
grid-template-columns 1fr 1fr
&__image
grid-area image
height 100%
&__text-and-cta-container
grid-area text-and-cta
padding 24px
+above(largeDeviceBreakpoint)
padding 32px
&__text
@extends $richText
&__cta
margin-top 24px
& .captioned-image
+below(largeDeviceBreakpoint)
height auto
& .captioned-image__caption
+below(largeDeviceBreakpoint)
padding 0 24px
There are no notes for this item.