No notes defined.
<section class=" layer -twoColumn">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">Image with Text</h2>
</header>
<div class="layer__content">
<div class="layer__item">
<svg viewBox="0 0 100 50">
<rect height="50" width="100" style="fill-opacity:.05" />
</svg>
</div>
<div class="layer__item">
<h3 class="layer__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
<p>
Simple two column layout that can be used with video, images, or just side by side text. Adipisicing ab a aspernatur officia voluptatibus. Sint est corrupti dolore suscipit delectus Enim sequi adipisci fuga similique cum doloribus animi.
</p>
<p>Dolor iste quo nostrum in perspiciatis adipisci cum? Dolorem fuga itaque non ipsum facere assumenda? Eum est quasi praesentium quo libero? Soluta accusantium accusamus animi quidem corrupti Nemo laboriosam perspiciatis</p>
</div>
</div>
</div>
</section>
.layer {
align-items: center;
display: grid;
grid-template: "stack";
grid-template-columns: minmax(0, 1fr);
&__container {
padding-top: 4rem;
padding-bottom: 4rem;
width: 100%;
}
.layer__content {
display: flex;
flex-direction: column;
> :first-child:last-child {
margin-left: auto;
margin-right: auto;
}
}
&__background,
&__container {
grid-area: stack;
}
&__background {
align-self: stretch;
position: relative;
}
&__backgroundImg {
height: 100%;
object-fit: cover;
width: 100%;
}
&__header {
margin-bottom: 2rem;
}
&__heading,
&__subheading {
margin-bottom: 0;
}
&__introduction {
&.-emphasized {
font-size: 1.125rem;
}
}
&__item {
&.-sidebar {
background-color: $blue-200;
padding: $padding;
.field {
@extend .field, .-outlined;
}
}
}
&__actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: $h-space;
&.-centered {
justify-content: center;
}
}
&__action {
@include button($white, $primary);
font-weight: bold;
}
&.-dark {
background-color: $blue-900;
color: $white;
.layer__background::before {
background: linear-gradient(to right, $blue-900 calc(50% - min(#{divide($container, 2)}, 50vw)), transparent);
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
}
@include color-modifiers((
primary,
secondary,
lightGray $gray-100,
)) using ($color) {
background-color: $color;
color: blackwhite($color);
}
@include at(lg) {
.layer__content.-columns {
flex-direction: row;
}
.layer__item {
flex: 1;
margin-right: gutter();
&:last-child {
margin-right: 0;
}
/**
* This is Candlepin's grid-utilities mixin. It adds the following
* modifier classes to .layer__item:
*
* .-gutter
* .-gutter-1 through .gutter-12 (the configured # of columns)
* .-span-1 through .-span-12
* .-left-1 through .-left-12
* .-right-1 through .-right-12
*
* These can be used to quickly space out, offset, or define other custom column widths for .layer__item elements with .layer__content.-columns.
*
*/
@include grid-utilities;
}
}
}