Adds one fix and one feature to default sections:
Ensures section background is wide enough on “god-wide” viewports.
Adds border modifier:
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.o-section--has-border |
.section--border |
add top and bottom border |
<section class="o-section o-section--style-muted">
<h2>Section</h2>
To highlight a row of content with extra spacing.
</section>
<hr />
<section class="o-section o-section--style-muted">
<h2>Section (First of a Pair)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</section>
<section class="o-section o-section--style-muted">
<h2>Section (Second of a Pair)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</section>
<hr />
<section class="o-section o-section--style-muted">
<h2>Section (before Muted Section)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</section>
<section class="o-section o-section--style-muted">
<h2>Muted Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</section>
<section class="o-section o-section--style-muted">
<h2>Section (after Muted Section)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</section>
<hr />
<section class="o-section o-section--style-muted">
<h2>Section (with Nested Sections)</h2>
<p>⚠️ These are not used in any design. They are minimally supported only to prevent layouts from breaking if accidentally used.</p>
<div class="o-section o-section--style-dark">
<h3>(Nested) Dark Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</div>
<div class="o-section o-section--style-muted">
<h3>(Nested) Muted Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</div>
<div class="o-section o-section--style-light">
<h3>(Nested) Light Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus <a href="#">blandit tellus</a> mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam <button class="c-button c-button--as-link">et magna (c-button--as-link)</button> in metus vulputate fermentum a a augue.</p>
<button class="c-button c-button--primary">Primary</button>
<button class="c-button c-button--secondary">Secondary</button>
<button class="c-button c-button--tertiary">Tertiary</button>
</div>
</section>
<hr />
<section class="o-section o-section--style-muted">
<h2>Section (at Bottom of Page)</h2>
<p>At the bottom of a CMS page: a <strong>light</strong> Section will stand out above the Footer, a <strong>muted</strong> Section will stand out above the Footer, a <strong>dark</strong> Section will visually merge with the Footer.</p>
</section>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To add bottom space that will actually show up demo */
/* https://github.com/TACC/Core-Styles/blob/823b7b9/src/lib/_imports/elements/html-elements.css#L61-L63 */
body > main {
margin-bottom: unset;
padding-bottom: var(--global-space--section-gap);
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "objects",
"shouldLoadCMS": true,
"📝 shouldLoadCMS": "this pattern is not intended nor expected for use beyond CMS",
"shouldLoadBootstrap": true,
"📝 shouldLoadBootstrap": "so we can test .container.o-section combo",
"modifier": "style-muted"
}