<div class="slab slab--popout-content slab--light-gray">
<div class="slab__wrapper">
<div class="slab__content">
<div class="nc-placeholder ">
<p>Placeholder</p>
</div>
</div>
</div>
</div>
{% if slab is not empty or block('slab_content') is not empty %}
<div class="slab {{ slab.classes|join(' ') }}" {{ slab.props|join(' ') }} {{ slab.attrs|attr_list }}>
<div class="slab__wrapper">
{% if not slab.hide_header and (slab.section_intro is not empty or block('slab_header') is not empty) %}
{% block slab_header %}
<div class="slab__header">
{% include '@section-intro' with { section_intro: slab.section_intro } %}
</div>
{% endblock %}
{% endif %}
{% block slab_content %}
<div class="slab__content">
{% include slab.pattern %}
</div>
{% endblock %}
</div>
</div>
{% endif %}
{
"slab": {
"pattern": "@placeholder",
"section_intro": null,
"classes": [
"slab--popout-content",
"slab--light-gray"
]
}
}
.slab {
@include rr-slab;
}
.slab__wrapper {
@include rr-slab-wrapper;
// Position and z-index here to make wrappers with background colors compatible
// with children with elements set to z-index: -1, otherwise those elements
// get tucked behind the wrapper background
position: relative;
// z-index: 0;
// going to try a different approach than z-index: -1 for those but leaving this for now in case it doesn't work. -jcs
z-index: 2;
}
.slab__header {
padding-bottom: rr-gridbase(4);
.section-intro {
.headline-group {
.headline-group__head {
@include slab-headline;
}
}
}
}
$skins: transparent;
@each $name, $color in $colors {
.slab--#{$name} {
@include autoscheme($color);
}
$skins: append($skins, slab--#{$name});
}
@include rr-slab-adjacency($style-list: $skins);
.slab.slab--narrow {
@include rr-break-directive(l) {
.slab__wrapper {
& > * {
margin-left: $news-story-bump-in;
}
}
}
}
.slab.slab--light-gray {
background-color: color(gray-lightest);
@include slab-popout-content-helper($color: color(gray-lightest));
}
.slab.slab--light-blue-vertical {
background-image: linear-gradient(color(davidson-white), color(light-teal));
@include slab-popout-content-helper($gradient-image: linear-gradient(color(davidson-white), color(light-teal)));
}
.slab.slab--bright-blue-horizontal {
@include gradient-bright-blue-horizontal;
}
.slab.slab--orange-diagonal {
@include gradient-orange-diagonal;
}
.slab.slab--bright-blue-horizontal-offset,
.slab.slab--orange-diagonal-offset {
position: relative;
padding-bottom: rem(100px);
.slab__wrapper {
position: relative;
z-index: 3;
}
&:after {
display: block;
content: '';
position: absolute;
// top: rem(150px);
top: 25%;
bottom: 0;
left: 0;
right: auto;
width: 100%;
margin: auto;
z-index: 2;
}
}
.slab.slab--orange-diagonal-offset {
&:after {
width: 75%;
}
}
.slab.slab--bright-blue-horizontal-offset {
&:after {
@include gradient-bright-blue-horizontal;
}
}
.slab.slab--orange-diagonal-offset {
&:after {
@include gradient-orange-diagonal;
}
}
.slab.slab--popout-headline {
@include rr-break-directive(m) {
padding-top: 0;
.slab__header {
.section-intro {
@include tab-top;
.headline-group {
@include faux-touch-edge;
padding: rr-gridbase(3) rem(100px) rr-gridbase(3) 0;
}
}
}
}
}
.slab.slab--popout-content {
overflow: hidden;
.slab__wrapper {
& > :last-child {
position: relative;
& > * {
z-index: 3;
position: relative;
}
&:after {
display: block;
content: '';
position: absolute;
z-index: 2;
top: rem(80px);
left: -100%;
bottom: rem(-300px);
right: -100%;
// background color must come from other slab classes
}
}
}
}
.slab.slab--popout-all {
@include rr-break-directive(m) {
padding-top: 0;
margin-top: rem(-40px);
}
}
// adjust for tab/popout overlaps
// applied by js when:
// - a slab is followed by a slab with a popout class
// - a slab is the last slab on the page (to allow for footer tab)
.slab-popout-adjust {
@include rr-break-directive(m) {
padding-bottom: rem(120px) !important;
}
}
.slab--orange-diagonal-offset .teaser--top-stroke .content-meta {
color: #fff;
}
.slab--davidson-white {
background-color: transparent !important;
}
.slab--davidson-white.local-tasks {
background-color: #D42121 !important;
}
Layout component, full width with main content area constrained to maximum text width. One block can be inserted in this slab. All block types available.
slab--thin
drastically reduces padding inside the slab.