Accordion

Style

Semantic colors, visual variants, density steps, and max-width utilities via modifier classes on the accordion.

Hex doc

Phoenix

Preview

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.accordion class="accordion" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

Semantic

Use class="ui-{role}" to set the semantic palette of an accordion.

Available options: accent, alert, brand, info, success

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.accordion class="accordion" items={Corex.Content.new([
  %{label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
</.accordion>
<.accordion class="accordion ui-accent" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-brand" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-info" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-alert" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-success" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

Variant

Variant modifiers control accordion surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.accordion class="accordion" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-solid" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-ghost" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example accordion ui-accent ui-solid.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.accordion class="accordion" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Base", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-solid" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Base", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-ghost" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Base", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-accent" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Accent", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-accent ui-solid" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Accent", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-accent ui-ghost" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Accent", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-alert" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Alert", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-alert ui-solid" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Alert", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-alert ui-ghost" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Alert", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-brand" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Brand", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-brand ui-solid" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Brand", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-brand ui-ghost" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Brand", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-info" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Info", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-info ui-solid" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Info", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-info ui-ghost" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Info", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-success" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Success", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-success ui-solid" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Success", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-success ui-ghost" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Success", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

Size

Use class="ui-size-{size}" to set the size of an accordion.

Available options: xs, sm, md (default), lg, xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.accordion class="accordion ui-size-sm" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-size-md" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-size-lg" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-size-xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of an accordion.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.accordion class="accordion ui-rounded-none" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-rounded-sm" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-rounded-md" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-rounded-lg" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-rounded-xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>
<.accordion class="accordion ui-rounded-full" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

Max width

Without max-w-*, width comes from component CSS. Default for accordion: md (width: 100%).

Use class="max-w-{step}" to set the maximum width of an accordion root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (md)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

none

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

full

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

9xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

8xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

7xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

6xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

5xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

4xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

3xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

2xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

2xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

3xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

4xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

5xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

6xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

7xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

8xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

9xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

Nullam eget vestibulum ligula, at interdum tellus.

Congue molestie ipsum gravida a. Sed ac eros luctus.

    <.accordion class="accordion" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-none" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-full" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-9xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-8xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-7xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-6xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-5xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-4xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-3xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-2xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-sm" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-md" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-lg" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-2xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-3xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-4xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-5xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-6xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-7xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-8xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion max-w-9xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

Max height

Use class="max-h-{step}" to set the maximum height of an accordion root.

Available options: none, full, screen, dvh, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (accordion)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus.

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.accordion class="accordion" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-9xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-8xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-7xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-6xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-5xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-4xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-3xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-2xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-xs" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-sm" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-md" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-lg" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-2xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-3xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-4xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-5xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-6xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-7xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-8xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>

<.accordion class="accordion ui-max-height-9xl" value="item-1" items={Corex.Content.new([
  %{value: "item-1", label: "Lorem ipsum dolor sit amet", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-2", label: "Duis dictum gravida odio ac pharetra?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-3", label: "Donec condimentum ex mi", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-4", label: "Praesent fermentum sapien", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."},
  %{value: "item-5", label: "Mauris vitae urna eu nibh", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales ullamcorper tristique. Praesent vel sapien at lacus efficitur volutpat. Mauris vitae urna eu nibh fermentum faucibus. Donec condimentum ex mi, congue molestie ipsum gravida a. Sed ac eros luctus, finibus libero non, laoreet lectus."}
])}
>
  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>
</.accordion>