TACC UI Pattern Library

O Section: Usage

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 
To highlight a row of content with extra spacing.
  • Content: 
    /* 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);
}
  • URL: /components/raw/o-section/demo.css
  • Filesystem Path: src/lib/_imports/objects/o-section/demo.css
  • Size: 337 Bytes 
{
  "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"
}