Slab

<!-- Default -->
<div class="slab ">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- No Intro -->
<div class="slab ">
    <div class="slab__wrapper">
        <div class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Intro Headline Only -->
<div class="slab ">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline group without sub and super</span></h2>
        </div>
        <div class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Intro Headline And Subhead -->
<div class="slab ">
    <div class="slab__wrapper">
        <div class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Intro No Link -->
<div class="slab ">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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>
        </div>
        <div class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Intro No Text -->
<div class="slab ">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</span><span class="headline-group__sub">Optional Subhead</span></h2><a href="http://www.example.com/" class="link--fancy">Default Link Text</a></div>
        <div
            class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
    </div>
</div>
</div>

<!-- Narrow -->
<div class="slab slab--narrow">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Simple -->
<div class="slab slab--simple">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Popout Content -->
<div class="slab slab--popout-content">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Off White -->
<div class="slab scheme--off-white">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Accent -->
<div class="slab scheme--accent">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Primary Green -->
<div class="slab scheme--green-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Primary Teal -->
<div class="slab scheme--teal-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Darkest Gray -->
<div class="slab scheme--gray-darkest">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Spire -->
<div class="slab slab--spire">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Spire Off White -->
<div class="slab slab--spire scheme--off-white">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Spire Accent -->
<div class="slab slab--spire scheme--accent">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Spire Primary Green -->
<div class="slab slab--spire scheme--green-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Spire Primary Teal -->
<div class="slab slab--spire scheme--teal-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Spire Darkest Gray -->
<div class="slab slab--spire scheme--gray-darkest">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Logo -->
<div class="slab slab--logo">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Logo Off White -->
<div class="slab slab--logo scheme--off-white">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Logo Accent -->
<div class="slab slab--logo scheme--accent">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Logo Primary Green -->
<div class="slab slab--logo scheme--green-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Logo Primary Teal -->
<div class="slab slab--logo scheme--teal-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Logo Darkest Gray -->
<div class="slab slab--logo scheme--gray-darkest">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Tile Texture -->
<div class="slab slab--tile-texture">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Tile Texture Off White -->
<div class="slab slab--tile-texture scheme--off-white">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Tile Texture Accent -->
<div class="slab slab--tile-texture scheme--accent">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Tile Texture Primary Green -->
<div class="slab slab--tile-texture scheme--green-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Tile Texture Primary Teal -->
<div class="slab slab--tile-texture scheme--teal-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Tile Texture Darkest Gray -->
<div class="slab slab--tile-texture scheme--gray-darkest">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Photo -->
<div class="slab slab--photo">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Photo Off White -->
<div class="slab slab--photo scheme--off-white">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Photo Accent -->
<div class="slab slab--photo scheme--accent">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Photo Primary Green -->
<div class="slab slab--photo scheme--green-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Photo Primary Teal -->
<div class="slab slab--photo scheme--teal-primary">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

<!-- Photo Darkest Gray -->
<div class="slab slab--photo scheme--gray-darkest">
    <div class="slab__wrapper">
        <div class="section-intro ">
            <h2 class="headline-group "><span href="undefined" -keys="class,href" class="headline-group__head">Headline with Subhead</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 class="slab__content">
            <div class="nc-placeholder ">
                <p>Placeholder</p>
            </div>
        </div>
    </div>
</div>

{#
  Configure the default slab content behavior for when content
  is defined using a data structure rather than a block
#}
{% set _slab_default_content %}
  {% if slab.pattern is not empty %}
    {% include slab.pattern %}
  {% endif %}
{% endset %}

{# tag properties inside the slab #}
{% set classes = 'slab ' ~ slab.classes|join(' ') %}
{% set props = slab.props|join(' ') %}
{% set attrs = slab.attrs|attr_list %}

{# actual slab template begins #}
<div{{ attributes|without('class') }} class="{{ classes }}" {{ attrs }} {{ props }}>
  {% spaceless %}
  {% if slab.overlay is not empty %}
    {% include '@overlay' with { overlay: slab.overlay } %}
  {% endif %}
  <div class="slab__wrapper">
  {% if slab.section_intro is not empty %}
    {% include '@section-intro' with { section_intro: slab.section_intro } %}
  {% endif %}
  {{ block('slab_content')|default(_slab_default_content)|tagwrap('slab__content') }}
  </div>
  {% block slab_footer %}
  {% if slab.section_footer is not empty %}
    <div class="slab__footer">
      {% include '@slab-footer' with {
        slab_footer: slab.section_footer,
      } %}
    </div>
  {% endif %}
  {% endblock %}
  {% endspaceless %}
</div>
/* Default */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    }
  }
}

/* No Intro */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": null,
    "section_footer": null
  }
}

/* Intro Headline Only */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline group without sub and super",
        "sub": null,
        "tag": "h2"
      },
      "p": null,
      "link": null
    },
    "section_footer": null
  }
}

/* Intro Headline And Subhead */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": null,
    "section_footer": null
  }
}

/* Intro No Link */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "sub": "Optional Subhead",
        "tag": "h2"
      },
      "p": {
        "content": "Intro text is larger than standard paragraph text and should be pretty short.",
        "variant": "intro"
      },
      "link": null
    },
    "section_footer": null
  }
}

/* Intro No Text */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "sub": "Optional Subhead",
        "tag": "h2"
      },
      "p": null,
      "link": {
        "url": "http://www.example.com/",
        "title": "Default Link Text",
        "variant": "link--fancy"
      }
    },
    "section_footer": null
  }
}

/* Narrow */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--narrow"
    ]
  }
}

/* Simple */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--simple"
    ]
  }
}

/* Popout Content */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--popout-content"
    ]
  }
}

/* Off White */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "scheme--off-white"
    ]
  }
}

/* Accent */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "scheme--accent"
    ]
  }
}

/* Primary Green */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "scheme--green-primary"
    ]
  }
}

/* Primary Teal */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "scheme--teal-primary"
    ]
  }
}

/* Darkest Gray */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "scheme--gray-darkest"
    ]
  }
}

/* Spire */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--spire"
    ]
  }
}

/* Spire Off White */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--spire",
      "scheme--off-white"
    ]
  }
}

/* Spire Accent */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--spire",
      "scheme--accent"
    ]
  }
}

/* Spire Primary Green */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--spire",
      "scheme--green-primary"
    ]
  }
}

/* Spire Primary Teal */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--spire",
      "scheme--teal-primary"
    ]
  }
}

/* Spire Darkest Gray */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--spire",
      "scheme--gray-darkest"
    ]
  }
}

/* Logo */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--logo"
    ]
  }
}

/* Logo Off White */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--logo",
      "scheme--off-white"
    ]
  }
}

/* Logo Accent */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--logo",
      "scheme--accent"
    ]
  }
}

/* Logo Primary Green */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--logo",
      "scheme--green-primary"
    ]
  }
}

/* Logo Primary Teal */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--logo",
      "scheme--teal-primary"
    ]
  }
}

/* Logo Darkest Gray */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--logo",
      "scheme--gray-darkest"
    ]
  }
}

/* Tile Texture */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--tile-texture"
    ]
  }
}

/* Tile Texture Off White */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--tile-texture",
      "scheme--off-white"
    ]
  }
}

/* Tile Texture Accent */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--tile-texture",
      "scheme--accent"
    ]
  }
}

/* Tile Texture Primary Green */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--tile-texture",
      "scheme--green-primary"
    ]
  }
}

/* Tile Texture Primary Teal */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--tile-texture",
      "scheme--teal-primary"
    ]
  }
}

/* Tile Texture Darkest Gray */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--tile-texture",
      "scheme--gray-darkest"
    ]
  }
}

/* Photo */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--photo"
    ]
  }
}

/* Photo Off White */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--photo",
      "scheme--off-white"
    ]
  }
}

/* Photo Accent */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--photo",
      "scheme--accent"
    ]
  }
}

/* Photo Primary Green */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--photo",
      "scheme--green-primary"
    ]
  }
}

/* Photo Primary Teal */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--photo",
      "scheme--teal-primary"
    ]
  }
}

/* Photo Darkest Gray */
{
  "button": {
    "label": "Button"
  },
  "slab": {
    "pattern": "@placeholder",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline with Subhead",
        "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"
      }
    },
    "classes": [
      "slab--photo",
      "scheme--gray-darkest"
    ]
  }
}

  • Content:
    .slab {
      @include rr-slab;
      position: relative;
      @include rr-break-directive(l) {
        padding-top: component-spacing(wide);
        padding-bottom: component-spacing(wide);
      }
    
      .slab__wrapper {
        @include rr-slab-wrapper;
        position: relative;
      }
    
      .slab__header {
        padding-bottom: component-spacing(medium);
    
        .section-intro {
          text-align: center;
        }
      }
    
      .slab__footer {
        @include rr-slab-wrapper;
        margin-top: component-spacing(medium);
      }
    
      &.slab--narrow {
        .slab__wrapper,
        .slab__footer {
          max-width: $narrow-width;
        }
        // need contain the section-intro in slab--narrow,
        // but not sure where yet
        .section-intro {
          max-width: rem(675px);
        }
      }
    
      &.slab--short {
        @include rr-break-directive(m) {
          padding-top: component-spacing(tight);
          padding-bottom: component-spacing(tight);
        }
      }
    
      &.slab--simple {
        max-width: calc(100% - #{2 * component-spacing(tight)});
        @include rr-break-directive(m) {
          padding-top: component-spacing(tight);
          padding-bottom: component-spacing(tight);
        }
        @include rr-break-directive(l) {
          .slab__wrapper,
          .slab__footer {
            .slab__content {
              max-width: $narrow-width;
            }
          }
        }
      }
    
      &.slab--popout-content {
        .slab__content {
          margin-top: -(component-spacing(tight) + rem(30px));
          @include rr-break-directive(l) {
            margin-top: -(component-spacing(wide) + rem(120px));
          }
        }
      }
    
      &.slab--spire,
      &.slab--logo,
      &.slab--tile-texture,
      &.slab--photo {
        // for slab textures,
        // opacity and color inversion come from scheme
        &:after {
          content: '';
          display: block;
          position: absolute;
          z-index: 1;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
        }
      }
    
      &.slab--spire {
        &:after {
          background-image: image-url('johnson-center-spire.svg');
          background-repeat: no-repeat;
          background-size: 90%;
          background-position: 500% 100%;
          @include rr-break-directive(l) {
            background-size: 75%;
            background-position: 200% 50%;
          }
        }
      }
    
      &.slab--logo {
        &:after {
          background-image: image-url('logo-for-slab-texture.svg');
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 50%;
          left: auto;
          width: 100%;
          @include rr-break-directive(l) {
            width: 50%;
          }
        }
      }
    
      &.slab--tile-texture {
        &::after {
          @supports (filter: invert(1)) {
            background-image: image-url('tile-texture.svg');
            background-repeat: repeat;
            background-position: center center;
          }
        }
      }
    
      &.slab--photo {
        &::after {
          background-image: image-url('slab-photo-texture.jpg');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
      }
    
    
    }
    
    
    // PRETTY ADJACENT SLABS
    // two cases:
    // implicit - slabs with no explicit scheme defined fallback to the parent scheme (usually from body/scheme--white)
    // explicit - adjacent slabs with explicit slab classes added (ie several rows of scheme--off-white, etc)
    
    // implicit
    .slab:not([class*='scheme--']):not(.page-header) + .slab:not([class*='scheme--']) {
      padding-top: 0;
    }
    
    // explicit
    @each $name, $scheme in $color-schemes {
      .slab.scheme--#{$name} + .slab.scheme--#{$name} {
        padding-top: 0;
      }
    }
    
    // layering priority
    // when one slab follows another, reverse default layering
    // so the first slab layers above the next
    .slab .slab__wrapper {
      z-index: 3;
    }
    .slab:not(.page-header) + .slab .slab__wrapper {
      z-index: 2;
    }
  • 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.