Slab

<div class="slab ">
    <div class="slab__wrapper">
        <div class="slab__header">
            <div class="section-intro">
                <h2 class="headline-group ">

                    <span class="headline-group__head">Headline</span>
                    <span class="headline-group__sub">Optional Subhead</span>
                </h2>

                <p class="intro">
                    Intro text is larger than standard paragraph text and should be pretty short.
                </p>
                <a href="http://www.example.com/" class="link--fancy">Default Link Text</a>
            </div>
        </div>
        <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": {
      "hg": {
        "super": null,
        "headline": "Headline",
        "sub": "Optional Subhead",
        "tag": "h2"
      },
      "p": {
        "content": "Intro text is larger than standard paragraph text and should be pretty short.",
        "variant": "intro"
      },
      "link": {
        "url": "http://www.example.com/",
        "title": "Default Link Text",
        "variant": "link--fancy"
      }
    }
  }
}
  • Content:
    .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;
    }
    
  • URL: /components/raw/slab/slab.scss
  • Filesystem Path: patterns/molecules/layouts/slab/slab.scss
  • Size: 3.6 KB

Title: Slab

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.