الأكورديون · النمط البصري

    <.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 accordion--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 accordion--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 accordion--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 accordion--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 accordion--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>

  

    <.accordion class="accordion accordion--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 accordion--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 accordion--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 accordion--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 accordion--text-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 accordion--text-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 accordion--text-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 accordion--text-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 accordion--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 accordion--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 accordion--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 accordion--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 accordion--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 accordion--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>

  

    <.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-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-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>