Permalink
Fetching contributors…
Cannot retrieve contributors at this time
34 lines (30 sloc) 964 Bytes
// @page Pattern Library/Components
// @name Content group
//
// @description
// The `.us-content-group` is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.
//
// @state .mobile-bordered - Adds a smaller border and padding to mobile devices.
//
// @markup
// <div class='us-content-group {$modifiers}'>
// <p>
// Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.
// </p>
// </div>
$content-group-border-color: $c-keylinegrey !default;
.us-content-group,
%us-content-group {
@include respond-to($default-grid-breakpoint, true) {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid $content-group-border-color;
}
&.mobile-bordered {
@include respond-to(to-#{$default-grid-breakpoint}) {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid $content-group-border-color;
}
}
}