TACC UI Pattern Library

U Summary: Example Customization

Utility classes for styling HTML <summary> elements.

Class Description
.u-summary-with-a-link For summary element with a link inside
.u-summary-fake-marker For summary element with custom pseudo-element markers (▸/▾)

Used on Digital Porous Media “Browse Datasets” circa 2025-06.

<dl class="data-tree">
    <dt><code>.u-summary-with-a-link</code></dt>
    <dd class="data-tree__item">
        <p>Summary element containing a link:</p>

        <details>
            <summary class="u-summary-with-a-link">
                <a href="https://example.com" target="_blank">
                    a link with a functional <code>href</code>
                </a>
                <small>(to toggle details, click the triangle or this small text)</small>
            </summary>
            <p>This is content that shows when the summary is expanded. The summary contains a navigation link to leave this page.</p>
        </details>

        <details>
            <summary class="u-summary-with-a-link">
                <a>
                    a link with <strong>no</strong> <code>href</code>
                </a>
                <small>(to toggle details, click the triangle, the link, or this small text)</small>
            </summary>
            <p>This demonstrates that links without href attributes are properly restored to appear as links within a summary.</p>
        </details>
    </dd>

    <dt><code>.u-summary-fake-marker</code></dt>
    <dd class="data-tree__item">
        <p>Summary element with custom pseudo-element markers:</p>

        <details>
            <summary class="u-summary-fake-marker">
                closed by default
                <small>(to toggle details, click the triangle or text)</small>
            </summary>
            <p>This content uses custom marker styling with pseudo-elements instead of the default list markers. Notice the ▸ marker when closed and ▾ when open.</p>
        </details>

        <details open>
            <summary class="u-summary-fake-marker">
                open by default
                <small>(to toggle details, click the triangle or text)</small>
            </summary>
            <p>This content uses custom marker styling with pseudo-elements instead of the default list markers. Notice the ▸ marker when closed and ▾ when open.</p>
        </details>
    </dd>
</dl>
  • Content: 
    /* https://github.com/TACC/Core-Styles/issues/458 */
.data-tree {
    --indent: 1.5rem;
}
.data-tree__item details {
    margin-left: var(--indent);
}
.data-tree__item summary {
    margin-left: calc( -1 * var(--indent) );
}
.data-tree__item summary.u-summary-with-a-link::before,
.data-tree__item summary.u-summary-fake-marker::before {
    width: var(--indent);
    display: inline-block;
}
  • URL: /components/raw/u-summary/u-summary.demo.css
  • Filesystem Path: src/lib/_imports/trumps/u-summary/u-summary.demo.css
  • Size: 393 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": "trumps",
  "shouldLoadCMS": true
}