Details — modest-ui

Details .mdst-details

Variants

Class	Example
.mdst-details	Click to expand This is the content inside the details element.
.mdst-details--borderless	Borderless details This variant has no border for a cleaner look.
.mdst-details--compact	Compact details This variant uses less padding.
.mdst-details--section	Section header style Ideal for collapsible page sections. Chevron on the right, underline style.

States

Attribute	Example
open	Open by default The details element has the "open" attribute.

Exclusive Open (Accordion)

Give multiple details elements the same name attribute and the browser ensures only one is open at a time. No JavaScript needed.

What is modest-ui?

A minimal, themeable CSS component library with no JavaScript.

How do I install it?

Add the stylesheet via CDN or npm and put .mdst-ui on the body.

Can I theme it?

Override CSS custom properties to create your own theme.

Examples

Colors

Configure your color palette including foreground, background, and accent colors.

Typography

Set up your font families, sizes, and line heights for consistent text styling.

Spacing

Define your spacing scale for margins, padding, and gaps throughout your design.

Usage

<!-- Basic details -->
<details class="mdst-details">
  <summary>Click to expand</summary>
  <p>Content goes here.</p>
</details>

<!-- Open by default -->
<details class="mdst-details" open>
  <summary>Already open</summary>
  <p>Content goes here.</p>
</details>

<!-- Section variant -->
<details class="mdst-details mdst-details--section">
  <summary>Section Title</summary>
  <p>Content goes here.</p>
</details>

<!-- Exclusive open — only one open at a time -->
<details class="mdst-details" name="faq" open>
  <summary>Question 1</summary>
  <p>Answer 1</p>
</details>
<details class="mdst-details" name="faq">
  <summary>Question 2</summary>
  <p>Answer 2</p>
</details>
<details class="mdst-details" name="faq">
  <summary>Question 3</summary>
  <p>Answer 3</p>
</details>