TACC UI Pattern Library

Html Elements: HTML Elements

Styling for raw HTML elements that are commonly used.

<dl>

    <dt>Forms</dt>
    <dd>
        <form>
            <label>&lt;input&gt;</label>
            <input />
            <label>&lt;select&gt;</label>
            <select>
                <option value="" selected="">
                    Please select a dinosaur
                </option>
                <optgroup label="Theropods">
                    <option>Tyrannosaurus</option>
                    <option>Velociraptor</option>
                    <option>Deinonychus</option>
                </optgroup>
                <optgroup label="Sauropods">
                    <option>Diplodocus</option>
                    <option>Saltasaurus</option>
                    <option>Apatosaurus</option>
                </optgroup>
            </select>
            <label>&lt;textarea&gt;</label>
            <textarea></textarea>
            <button type="submit">Submit</button>
            <button type="reset">Reset</button>
            <button type="clear">Clear</button>
            <button type="button">Button</button>
        </form>
    </dd>

    <dt>Text Content</dt>
    <dd>
        <dl>
            <dt>Paragraphs &amp; Inline Text Semantics</dt>
            <dd>
                <p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
                </p>
                <p>Proin ac <strong>rhoncus diam (&lt;strong&gt;)</strong>, sit amet <b>congue nibh (&lt;b&gt;)</b>. Nullam consectetur pretium erat vitae ornare. <em>Quisque porta (&lt;em&gt;)</em> a dolor vel maximus. <i>Nullam dictum (&lt;i&gt;)</i> risus pellentesque <u>orci hendrerit (&lt;u&gt;)</u> commodo. Nunc et dolor sed turpis <s>accumsan feugiat (&lt;s&gt;)</s> quis sed mi. Aliquam venenatis <mark>scelerisque neque (&lt;mark&gt;)</mark> id lobortis.
                </p>
            </dd>

            <dt>Lists</dt>
            <dd>
                <dl>
                    <dt>Unordered</dt>
                    <dd>
                        <ul>
                            <li>LX 1234</li>
                            <li>LOVE 45</li>
                            <li>OLD 555</li>
                        </ul>
                    </dd>
                    <dt>Ordered</dt>
                    <dd>
                        <ul>
                            <li>One Fish</li>
                            <li>Two Fish</li>
                            <li>Red Fish</li>
                            <li>Blue Fish</li>
                        </ul>
                    </dd>
                    <dt>Definition List</dt>
                    <dd>
                        <dl class="no-demo-styles">
                            <dt>CSS</dt>
                            <dd>Cascading Stylesheet</dd>
                            <dt>HTML</dt>
                            <dd>Hypertext Markup Language</dd>
                            <dt>JSON</dt>
                            <dd>JavaScript Object Notation</dd>
                        </dl>
                    </dd>
                </dl>
            </dd>

            <dt>Figure <small>(Narrow Image)</small></dt>
            <dd>
                <figure>
                    <img src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
                    <figcaption>
                        I am a &lt;figcaption&gt; within a &lt;figure&gt;.
                        <span class="
        c-message
        c-message--type-warning
        c-message--scope-inline
        
        
      ">

                            I may be wider than image. If so, should I wrap?

                        </span>
                    </figcaption>
                </figure>
            </dd>

            <dt>Figure <small>(Dynamic-Width Image)</small></dt>
            <dd>
                <figure class="with-dynamic-width-image">
                    <img class="with-dynamic-width-image" src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png" alt="(sample image)" />
                    <figcaption>
                        I am a &lt;figcaption&gt; within a &lt;figure&gt;.
                        <span class="
        c-message
        c-message--type-warning
        c-message--scope-inline
        
        
      ">

                            I may be wider than image. If so, should I wrap?

                        </span>
                    </figcaption>
                </figure>
            </dd>

            <dt>Blockquote</dt>
            <dd>
                <blockquote>
                    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
                </blockquote>
            </dd>
        </dl>
    </dd>
</dl>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

figure.with-dynamic-width-image img {
  width: 100%;
}
  • URL: /components/raw/html-elements/demo.css
  • Filesystem Path: src/lib/_imports/elements/html-elements/demo.css
  • Size: 135 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": "elements"
}