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 |
<p class="
c-message
c-message--scope-global
">
The <code>o-section--has-border</code> feature will be made available for all clients in the future.
</p>
<section class="o-section o-section--style-light o-section--has-border">
<h2>Section (Style Light, Has Border)</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>
</section>
<section class="o-section o-section--style-muted o-section--has-border">
<h2>Section (Style Muted, Has Border)</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>
</section>
<section class="o-section o-section--style-light o-section--has-border">
<h2>Section (Style Light, Has Border)</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>
</section>
<section class="o-section o-section--style-muted o-section--has-border">
<h2>Section (Style Muted, Has Border)</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>
</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",
"shouldLoadDocs": true
}