Accordion

Discover Bramble UI's interactive accordion component. Effortlessly organize and present content while creating a seamless and engaging user experience

Usage

import {Accordion} from '@/ui'
import Users from '@/data/users.json'
                    
<Accordion
	data={Users} 	// json data
	opened='1'		// add id to open initially
	className=''	// add Tailwind classes here
/>

/* DATA Structure
{
	"id": "1",
	"title": "Jeanette Penddreth",
	"body": "<p><strong>Ugh umami</strong> butcher <a href='#'>pickled kogi</a> stumptown, <em>subway tile</em> gatekeep..."
},
...
*/

Layouts

Default Layout

Jeanette Penddreth

Ugh umami butcher pickled kogi stumptown, subway tile gatekeep flexitarian. Bespoke meggings health goth meh ascot listicle, cronut vaporware. Marfa church-key cred, kinfolk mlkshk tousled roof party XOXO readymade solarpunk tbh adaptogen. Raclette williamsburg chicharrones, +1 retro hashtag freegan sustainable tumblr polaroid deep v tote bag godard.

Giavani Frediani

Technologies

  • Blue bottle
  • Sriracha heirloom distillery
  • Offal roof party

Noell Bea

Meh vice gatekeep flexitarian banjo lo-fi. Chicharrones mixtape 8-bit, iceland intelligentsia mlkshk direct trade pug.

Pabst microdosing yes plz williamsburg, blog taxidermy put a bird on it ramps lyft. Next level meditation pok pok fashion axe JOMO scenester.

Willard Valek

Copper mug fam hexagon street art mixtape tumblr occupy ramps slow-carb air plant. Truffaut vegan cupping migas. Humblebrag bruh viral tumblr, whatever 90's butcher post-ironic meditation street art copper mug flannel.

More
<Accordion
	data={Users}
	opened='1'
/>

Flush Layout

Jeanette Penddreth

Ugh umami butcher pickled kogi stumptown, subway tile gatekeep flexitarian. Bespoke meggings health goth meh ascot listicle, cronut vaporware. Marfa church-key cred, kinfolk mlkshk tousled roof party XOXO readymade solarpunk tbh adaptogen. Raclette williamsburg chicharrones, +1 retro hashtag freegan sustainable tumblr polaroid deep v tote bag godard.

Giavani Frediani

Technologies

  • Blue bottle
  • Sriracha heirloom distillery
  • Offal roof party

Noell Bea

Meh vice gatekeep flexitarian banjo lo-fi. Chicharrones mixtape 8-bit, iceland intelligentsia mlkshk direct trade pug.

Pabst microdosing yes plz williamsburg, blog taxidermy put a bird on it ramps lyft. Next level meditation pok pok fashion axe JOMO scenester.

Willard Valek

Copper mug fam hexagon street art mixtape tumblr occupy ramps slow-carb air plant. Truffaut vegan cupping migas. Humblebrag bruh viral tumblr, whatever 90's butcher post-ironic meditation street art copper mug flannel.

More
<Accordion
	data={Users}
	layout='flush'
/>

Spaced Layout

Jeanette Penddreth

Ugh umami butcher pickled kogi stumptown, subway tile gatekeep flexitarian. Bespoke meggings health goth meh ascot listicle, cronut vaporware. Marfa church-key cred, kinfolk mlkshk tousled roof party XOXO readymade solarpunk tbh adaptogen. Raclette williamsburg chicharrones, +1 retro hashtag freegan sustainable tumblr polaroid deep v tote bag godard.

Giavani Frediani

Technologies

  • Blue bottle
  • Sriracha heirloom distillery
  • Offal roof party

Noell Bea

Meh vice gatekeep flexitarian banjo lo-fi. Chicharrones mixtape 8-bit, iceland intelligentsia mlkshk direct trade pug.

Pabst microdosing yes plz williamsburg, blog taxidermy put a bird on it ramps lyft. Next level meditation pok pok fashion axe JOMO scenester.

Willard Valek

Copper mug fam hexagon street art mixtape tumblr occupy ramps slow-carb air plant. Truffaut vegan cupping migas. Humblebrag bruh viral tumblr, whatever 90's butcher post-ironic meditation street art copper mug flannel.

More
<Accordion
	data={Users}
	layout='spaced'
/>

Sizes

Small

Jeanette Penddreth

Ugh umami butcher pickled kogi stumptown, subway tile gatekeep flexitarian. Bespoke meggings health goth meh ascot listicle, cronut vaporware. Marfa church-key cred, kinfolk mlkshk tousled roof party XOXO readymade solarpunk tbh adaptogen. Raclette williamsburg chicharrones, +1 retro hashtag freegan sustainable tumblr polaroid deep v tote bag godard.

Giavani Frediani

Technologies

  • Blue bottle
  • Sriracha heirloom distillery
  • Offal roof party

Noell Bea

Meh vice gatekeep flexitarian banjo lo-fi. Chicharrones mixtape 8-bit, iceland intelligentsia mlkshk direct trade pug.

Pabst microdosing yes plz williamsburg, blog taxidermy put a bird on it ramps lyft. Next level meditation pok pok fashion axe JOMO scenester.

Willard Valek

Copper mug fam hexagon street art mixtape tumblr occupy ramps slow-carb air plant. Truffaut vegan cupping migas. Humblebrag bruh viral tumblr, whatever 90's butcher post-ironic meditation street art copper mug flannel.

More
<Accordion
	data={Users}
	size='sm'
/>

Large

Jeanette Penddreth

Ugh umami butcher pickled kogi stumptown, subway tile gatekeep flexitarian. Bespoke meggings health goth meh ascot listicle, cronut vaporware. Marfa church-key cred, kinfolk mlkshk tousled roof party XOXO readymade solarpunk tbh adaptogen. Raclette williamsburg chicharrones, +1 retro hashtag freegan sustainable tumblr polaroid deep v tote bag godard.

Giavani Frediani

Technologies

  • Blue bottle
  • Sriracha heirloom distillery
  • Offal roof party

Noell Bea

Meh vice gatekeep flexitarian banjo lo-fi. Chicharrones mixtape 8-bit, iceland intelligentsia mlkshk direct trade pug.

Pabst microdosing yes plz williamsburg, blog taxidermy put a bird on it ramps lyft. Next level meditation pok pok fashion axe JOMO scenester.

Willard Valek

Copper mug fam hexagon street art mixtape tumblr occupy ramps slow-carb air plant. Truffaut vegan cupping migas. Humblebrag bruh viral tumblr, whatever 90's butcher post-ironic meditation street art copper mug flannel.

More
<Accordion
	data={Users}
	size='lg'
/>

RTL

Jeanette Penddreth

Ugh umami butcher pickled kogi stumptown, subway tile gatekeep flexitarian. Bespoke meggings health goth meh ascot listicle, cronut vaporware. Marfa church-key cred, kinfolk mlkshk tousled roof party XOXO readymade solarpunk tbh adaptogen. Raclette williamsburg chicharrones, +1 retro hashtag freegan sustainable tumblr polaroid deep v tote bag godard.

Giavani Frediani

Technologies

  • Blue bottle
  • Sriracha heirloom distillery
  • Offal roof party

Noell Bea

Meh vice gatekeep flexitarian banjo lo-fi. Chicharrones mixtape 8-bit, iceland intelligentsia mlkshk direct trade pug.

Pabst microdosing yes plz williamsburg, blog taxidermy put a bird on it ramps lyft. Next level meditation pok pok fashion axe JOMO scenester.

Willard Valek

Copper mug fam hexagon street art mixtape tumblr occupy ramps slow-carb air plant. Truffaut vegan cupping migas. Humblebrag bruh viral tumblr, whatever 90's butcher post-ironic meditation street art copper mug flannel.

More
<div dir='rtl'>
	<Accordion
		data={Users}
		size='sm'
	/>
</div>