TACC UI Pattern Library

S Form Page

To style a page that has only a single form.

☞ Remember

The <body> (or some other page-size wrapper) should have a background color.
See “Assets” tab example.css file.

<div class="s-form-page">
    <form>
        [ form goes here ]
    </form>
    <footer>
        <a href="https://tacc.utexas.edu/about/security-and-compliance/">
            Security
        </a>
        <a href="https://tacc.utexas.edu/use-tacc/user-policies/">
            Policies
        </a>
        <a href="https://www.nsf.gov/" target="_blank">
            Funded by:
            <img src="https://cep.tacc.utexas.edu/static/site_cms/img/org_logos/nsf-logo.svg" alt="NSF" title="National Science Foundation" height="50px">
        </a>
    </footer>
</div>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

body > main {
  width: unset; /* override core-styles.demo.css */
}
  • URL: /components/raw/s-form-page/demo.css
  • Filesystem Path: src/lib/_imports/trumps/s-form-page/demo.css
  • Size: 148 Bytes
  • Content: 
    /* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */

body {
  background-color: var(--global-color-primary--light);
}
  • URL: /components/raw/s-form-page/example.css
  • Filesystem Path: src/lib/_imports/trumps/s-form-page/example.css
  • Size: 142 Bytes 
{
  "shouldSkipPattern": false,
  "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": "trumps",
  "shouldLoadPortal": true
}