No notes defined.
<div class="panel panel--magenta">
<div class="wrap">
<h5>This is a panel</h5>
<p class="subheading">This is a panel</p>
</div>
</div>
{% set classString = '' %}
{% for modifier in modifiers %}
{% set classString = classString ~ ' panel--' ~ modifier %}
{% endfor %}
<div class="panel{{ classString }}">
<div class="wrap">
<h5>This is a panel</h5>
<p class="subheading">This is a panel</p>
</div>
</div>
.panel {
padding: $spacing-4xl 0;
background: $offwhite;
position: relative;
&--white {
background: #fff;
}
&--blue {
background: $primary;
color: #fff;
#{headings()} {
color: #fff;
}
}
&--magenta {
background: $secondary;
color: #fff;
#{headings()} {
color: #fff;
}
}
> .panel-image {
position: absolute;
top: 0;
left: 0;
width: 30vmin;
height: 50vmin;
//clip-path: polygon(0 0, 100% 50%, 0 100%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
object-fit: cover;
//z-index: -1;
}
}