Lily's - Kit

Enhanced human interfaces
& user experiences

anchor article button details flex grid input label list slider table textarea

Details / Summary native

The <summary> element provides a summary or caption for the content of a <details> element. It is used to toggle the visibility of the details content when clicked, making it ideal for presenting collapsible sections of information or controls in a user interface.

<details>
  <summary>
    <span>summary</span>
  </summary>
  . . . content here . . .
</details>

summary

… content here …

— summaryElement PROPS

prop	description	requires
- - button	changes style to look like a button	-
- - outline	sets outline style	- - button
- - fab	changes style to look like a FAB	- - button

<details>
  <summary data-props="--button --outline">
    <span>
      summary
    </span>
  </summary>
  . . . content here . . .
</details>

summary

… content here …

<details>
  <summary data-props="--button --outline --fab">
    <icon>
      add_circle
    </icon>
  </summary>
  . . . content here . . .
</details>

add_circle

… content here …

— summaryChildrenElements PROPS

prop	description	purpose
- - lead	set’s as leading item	left side optical corrections
- - trail	set’s as trailing item	right side optical corrections

<details>
  <summary data-props="--button --outline">
    <icon data-props="--lead">
      add_circle
    </icon>
    <span>summary</span>
  </summary>
  . . . content here . . .
</details>

add_circle

summary

… content here …

<details>
  <summary data-props="--button --outline">
    <span>summary</span>
    <icon data-props="--trail">
      add_circle
    </icon>
  </summary>
  . . . content here . . .
</details>

summary

add_circle

… content here …