There are no notes for this item.
<div class="dossier">
<div>
<div class="photo">
<img src="/media/dossier-1.jpg" alt="Jane Doe" />
</div>
<div class="bio">
<h2>
Jane Doe
</h2>
<p class="title">
Executive Vice President of Operations
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quidem, soluta quisquam est velit praesentium ex, vero perspiciatis ad autem sapiente. Sed amet et voluptates, inventore corrupti quas assumenda nemo quibusdam magni officia ut, aperiam quo, quae! Eos, unde ea placeat ab earum molestias a veritatis architecto quas.
</p>
<p>
Magnam quidem, soluta quisquam est velit praesentium ex, vero perspiciatis ad autem sapiente. Sed amet et voluptates, inventore corrupti quas assumenda nemo quibusdam magni officia ut, aperiam quo quae! Eos unde ea placeat.
</p>
</div>
</div>
<div>
<div class="photo">
<img src="/media/dossier-2.jpg" alt="Jonathan Doe" />
</div>
<div class="bio">
<h2>
Jonathan Doe
</h2>
<p class="title">
Executive Vice President of Finances
</p>
<p>
Magnam quidem, soluta quisquam est velit praesentium ex, vero perspiciatis ad autem sapiente. Sed amet et voluptates, inventore corrupti quas assumenda nemo quibusdam magni officia ut, aperiam quo quae! Eos unde ea placeat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quidem, soluta quisquam est velit praesentium ex, vero perspiciatis ad autem sapiente. Sed amet et voluptates, inventore corrupti quas assumenda nemo quibusdam magni officia ut, aperiam quo, quae! Eos, unde ea placeat ab earum molestias a veritatis architecto quas.
</p>
</div>
</div>
</div>
///
/// The DOSSIER mixin displays an individual’s biography and photograph.
/// If the photo portion is omitted, the biography element flexes to
/// fill the space.
///
/// @param {measure} $gutter [2rem] - gutter between content and image
/// @param {measure} $photoWidth [25%] - width of image
/// @param {direction} $direction [row] - whether to put the images on the left or right
///
@mixin dossier($gutter: 2rem, $photoWidth: 25%, $direction: row) {
> * {
text-align: center;
.photo {
margin-bottom: 2rem;
}
}
@include breakpoint(md) {
> * {
display: flex;
flex-direction: $direction;
flex-wrap: nowrap;
margin-bottom: 4rem;
text-align: left;
.photo {
flex: 0 0 $photoWidth;
margin-bottom: 0;
margin-right: $gutter;
@if $direction == row-reverse {
margin-left: $gutter;
margin-right: 0;
}
}
.bio {
.title {
color: $meta-text;
text-transform: uppercase;
}
}
}
}
}