<section class="half-and-half swap grey_lightest clearfix" role="region" aria-label="Faculty Directory section">
<div class="half-and-half-image">
<img src="" alt="" />
</div>
<h2 class="half-and-half-title">Faculty Directory</h2>
<div class="half-and-half-copy">
<p>Find a faculty member.</p>
</div>
<p class="half-and-half-btn">
<a href="#">Directory</a>
</p>
</section>
<section class="half-and-half {{ swap }} {{ background_color }} clearfix" role="region" aria-label="{{ heading|striptags('<drupal-render-placeholder>')|trim }} section">
<div class="half-and-half-image">
{% block cms_override_image %}
<img src="{{ img_src }}" alt="{{ img_alt }}" />
{% endblock cms_override_image %}
</div>
<h2 class="half-and-half-title">{{ heading }}</h2>
<div class="half-and-half-copy"><p>{{ text }}</p></div>
<p class="half-and-half-btn">
{# @todo Consider making a component for links and integrating it
with Drupal link fields. #}
{% block cms_override_link %}
<a href="{{ url }}">{{ link_text }}</a>
{% endblock cms_override_link %}
</p>
</section>
{
"picture": {
"img_src": "/images/facutly_graduation.png",
"img_alt": "faculty at graduation"
},
"heading": "Faculty Directory",
"text": "Find a faculty member.",
"url": "#",
"link_text": "Directory",
"swap": "swap",
"background_color": "grey_lightest"
}
.half-and-half {
display: flex;
flex-direction: column;
align-items: center;
padding: $space-double $space;
@media only screen and (min-width: $break-tablet) {
display: block;
position: relative;
padding: 0;
}
@media only screen and (min-width: $break-desktop) {
display: block;
position: relative;
padding: 0;
}
&.grey_lightest {
background-color: $grey_lightest;
}
&.white {
background-color: $white;
}
&-title {
order: -1;
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 $space 0;
@media (min-width: 768px) {
order: 0;
margin: 7% 0 $space 0;
}
}
&-image {
float: left;
margin: $space 0;
@media only screen and (min-width: $break-tablet) {
margin: 0 $space-triple 0 0;
max-width: 50%;
}
@media only screen and (min-width: $break-desktop) {
margin: 0 $space-triple 0 0;
max-width: 50%;
}
img {
max-width: 100%;
height: auto;
}
}
&-btn {
a {
color: $grey_darkest;
font-weight: bold;
&::before {
content: '+ ';
}
}
}
&.swap {
padding: $space 0 0 0;
@media only screen and (min-width: $break-tablet) {
padding: 0 0 0 $space-triple;
}
@media only screen and (min-width: $break-desktop) {
padding: 0 0 0 $space-triple;
}
.half-and-half-image {
float: right;
@media only screen and (min-width: $break-tablet) {
margin: 0 0 0 $space-triple;
}
@media only screen and (min-width: $break-desktop) {
margin: 0 0 0 $space-triple;
}
}
}
}
No notes defined.