No notes defined.
<!-- Default -->
<section class=" layer">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">Layer Heading</h2>
<h3 class="layer__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
</header>
<div class="layer__content">
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</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>
</section>
<!-- -primary -->
<section class="-primary layer">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">Layer Heading</h2>
<h3 class="layer__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
</header>
<div class="layer__content">
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</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>
</section>
<!-- -secondary -->
<section class="-secondary layer">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">Layer Heading</h2>
<h3 class="layer__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
</header>
<div class="layer__content">
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</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>
</section>
<!-- -lightGray -->
<section class="-lightGray layer">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">Layer Heading</h2>
<h3 class="layer__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
</header>
<div class="layer__content">
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</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>
</section>
<!-- Call To Action -->
<section class=" layer -callToAction">
<div class="layer__container container">
<header class="layer__header">
<div class="heading__eyebrow eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">What are you waiting for?</h2>
</header>
<div class="layer__content">
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus.</p>
</div>
<div class="layer__actions -centered">
<a class="layer__action button -outline" href="#">Sign Up Now</a>
<a class="layer__action button -secondary" href="#">Lorem Ipsum</a>
</div>
</div>
</section>
<!-- Two Column -->
<section class=" layer -twoColumn">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">Layer Heading</h2>
</header>
<div class="layer__content">
<div class="layer__item">
<h3 class="layer__subheading">Elit nulla quas possimus exercitationem</h3>
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</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 class="layer__item">
<h3 class="layer__subheading">Elit nulla quas possimus exercitationem</h3>
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</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>
<!-- Two Column (Image) -->
<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>
<!-- Two Column (Video) -->
<section class=" layer -twoColumn">
<div class="layer__container container">
<div class="layer__content">
<div class="layer__item">
<iframe src="https://player.vimeo.com/video/374461341" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
<div class="layer__item">
<div class="eyebrow -secondary">within column</div>
<h2 class="layer__heading accented -secondary">Video with Text</h2>
<p>
Layer headings can appear either above both columns or within a column like this. Dolor eaque rerum non quis tempore? Magnam voluptatibus ut doloremque laboriosam architecto. Quo eos nesciunt aliquam architecto vitae Adipisci debitis exercitationem nostrum voluptatibus officiis dicta?
</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>
<!-- Custom Columns -->
<section class=" layer">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
</header>
<div class="layer__content -columns">
<div class="layer__item -span-8">
<svg viewBox="0 0 100 50">
<rect height="50" width="100" style="fill-opacity:.05" />
</svg>
</div>
<div class="layer__item -span-4">
<h3 class="layer__subheading">Elit nulla quas possimus exercitationem</h3>
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</p>
</div>
</div>
</div>
</section>
<!-- Introduction -->
<section class=" layer">
<div class="layer__container container">
<header class="layer__header">
<div class="eyebrow -primary">interesting eyebrow</div>
<h2 class="layer__heading">Layer Heading</h2>
<h3 class="layer__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
</header>
<div class="layer__introduction -emphasized">
<p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</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>
</section>
<!-- Testimonial -->
<section class=" layer -testimonial">
<div class="layer__container container">
<figure class="testimonial">
<blockquote class="testimonial__quote">
It was an honor to work with Imarc. They demonstrated, very early on, a true ability to understand our business and solve for our needs—create a new intranet site, one that would increase engagement and foster community. Imarc delivered incredible results, taking our former site to new heights. We couldn’t be happier with their work and subject matter expertise.
</blockquote>
<figcaption class="testimonial__caption">
<div class="avatar -horizontal testimonial__attribution">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
</figcaption>
</figure>
</div>
</section>
.layer {
&.-callToAction {
background-color: $primary;
color: $white;
text-align: center;
}
}
.layer {
&.-twoColumn {
.layer__content {
display: flex;
flex-direction: column;
}
@include at(lg) {
.layer__content {
flex-direction: row;
}
.layer__item {
@include wrap(1, 2);
}
}
}
&.-threeColumn {
.layer__content {
display: flex;
flex-direction: column;
}
@include at(md) {
.layer__content {
flex-direction: row;
}
.layer__item {
@include wrap(1, 2);
}
}
@include at(lg) {
.layer__content {
flex-direction: row;
}
.layer__item {
@include wrap(1, 3);
}
}
}
}
.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;
}
}
}