Skip to content

Components

Accordions

Toggle sections of content in pure HTML, without JavaScript, using minimal and semantic markup.

Accordion 1

Flamingos are known for their bright pink feathers and distinctive long necks. These birds are social creatures that live in large groups, and a group of flamingos is called a flamboyance. They can often be seen standing on one leg, which helps them conserve body heat.


Accordion 2
  • Kangaroos are marsupials that are native to Australia.
  • They are known for their powerful hind legs, which they use to hop around.
  • Kangaroos can’t walk backwards due to the shape of their legs and tail.
  • Baby kangaroos, called joeys, are born very small and undeveloped and must crawl into their mother’s pouch to continue developing.
  • Some species of kangaroos can leap up to 30 feet in a single bound.
<details open>
  <summary>Accordion 1</summary>
  <p>...</p>
</details>

<hr />

<details>
  <summary>Accordion 2</summary>
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</details>

Button variants#

role="button" can be used to turn <summary> into a button.

Button

Owls are nocturnal birds of prey that are known for their distinctive hooting calls. A group of owls is called a parliament, and these birds are often associated with wisdom and intelligence. Owls have excellent hearing and vision, which helps them hunt prey in the dark.

<details>
  <summary role="button">Owls</summary>
  <p>...</p>
</details>

Like regular buttons, they come with .secondary, .contrast, and .outline (Not available in the class-less version).

Secondary

Ostriches are the largest birds in the world and are native to Africa. They have long, powerful legs that they use to run at high speeds, and they can reach up to 45 miles per hour. An ostrich’s eye is bigger than its brain, which is unusual for birds.

Contrast

Koalas are arboreal marsupials that are native to Australia. They are known for their cute and cuddly appearance, but they can be quite aggressive if provoked. The fingerprints of koalas are so similar to those of humans that they have been mistaken for crime scene prints.

Primary outline

Elephants are the largest land animals and highly intelligent with intricate communication systems. They use infrasonic sounds to talk and have long memories. They create and maintain habitats for other species, and can eat up to 300 pounds of vegetation per day. Their elongated incisor teeth, called tusks, serve various purposes, including digging and defense.

Secondary outline

Crows are intelligent birds that are known for their problem-solving abilities. A group of crows is called a murder, and these birds have a reputation for being mischievous and sometimes even aggressive. Despite their negative image in some cultures, crows are important for their role in controlling pest populations and maintaining ecological balance.

Contrast outline

Penguins are flightless birds with a tuxedo-like appearance. They swim well and can hold their breath for up to 20 minutes. Penguins are social, forming tight-knit communities, and some mate for life. They have adaptations to survive in cold climates, including thick feathers and a layer of fat for insulation.

<!-- Secondary -->
<details>
  <summary role="button" class="secondary">Secondary</summary>
  <p>...</p>
</details>

<!-- Contrast -->
<details>
  <summary role="button" class="contrast">Contrast</summary>
  <p>...</p>
</details>

<!-- Primary outline -->
<details>
  <summary role="button" class="outline">Primary outline</summary>
  <p>...</p>
</details>

<!-- Secondary outline -->
<details>
  <summary role="button" class="outline secondary">Secondary outline</summary>
  <p>...</p>
</details>

<!-- Contrast outline -->
<details>
  <summary role="button" class="outline contrast">Contrast outline</summary>
  <p>...</p>
</details>

Edit this page on GitHub