Accordion
v0.0.0
The Accordion is a vertically stacked list of items. Each item can be "expanded" or "collapsed" to reveal the content associated with that item.
Add class .is-active to element with class vi-accordion__item op have an item open on page load.
The item will also be open on page load when targeting the specific id of the item via a hash link. This way an item can be bookmarked or shared.
The following options are available via data-attributes:
data-autoclose[true|false*] if true, only one item is expanded at a time.data-disable-hash-change[true|false*] if true, the hash in the address bar will not be updated.
* default settings
Content #
The Content Accordion shows a larger header and a clear +/- trigger. Associated content is displayed against an white background.
Scenester chicharrones try-hard readymade everyday sriracha migas cred.
Toggle
Scenester chicharrones try-hard readymade everyday sriracha migas cred.
Kitsch pinterest hashtag skateboard poutine.
Bicycle rights vhs fixie Kickstarter banh mi brunch yolo shoreditch bushwick taxidermy Food truck organic humblebrag chicharrones flannel Blog hammock lomo mixtape organic Poutine hoodie try hard beard quinoa park Franzen typewriter goth banh mi Hammock drinking semiotics Xoxo iphone meggings synth farm to table Shabby chic tumblr listicle shoreditch Celiac asymmetrical franzen
Cold-pressed seitan hoodie mustache church-key pitchfork flexitarian tacos.
Toggle
Cold-pressed seitan hoodie mustache church-key pitchfork flexitarian tacos.
Pinterest fingerstache humblebrag intelligentsia lo-fi.
Disrupt gluten free celiac jean shorts readymade venmo Pitchfork yr photo booth blue bottle Mixtape taxidermy umami selfies fanny pack pabst Post ironic yuccie retro wayfarers mumblecore shabby chic chartreuse brunch Ugh franzen iphone venmo sartorial drinking migas plaid Bespoke jean shorts raw denim seitan tilde trust fund asymmetrical beard Small batch cliche butcher offal squid diy locavore Stumptown health neutra trust fund plaid swag pickled cardigan Godard art party listicle bushwick poutine asymmetrical roof waistcoat Master yolo austin Cronut chicharrones tattooed ugh deep v messenger bag Mlkshk kombucha distillery bushwick carry dreamcatcher
Sustainable helvetica truffaut drinking park.
Viral schlitz fixie kale chips etsy Cleanse banjo pork belly vegan Messenger bag godard occupy etsy kinfolk semiotics Echo venmo post ironic taxidermy deep v small batch butcher 8 bit Lo fi meggings narwhal xoxo bitters chicharrones tacos crucifix Kitsch cray aesthetic Forage ramps fixie Biodiesel banjo knausgaard Chartreuse food truck direct trade freegan retro sartorial helvetica leggings Church key freegan microdosing lumbersexual health carry fanny pack ennui Sriracha truffaut put a bird on it pork belly meggings taxidermy
Sartorial pour-over viral chicharrones shoreditch iphone taxidermy gentrify.
Toggle
Sartorial pour-over viral chicharrones shoreditch iphone taxidermy gentrify.
Letterpress marfa cronut plaid park.
Chillwave beard etsy hoodie readymade pinterest Chicharrones single origin coffee marfa selfies pinterest food truck xoxo Vinegar typewriter ennui Listicle wolf phlogiston wes anderson etsy iphone mumblecore Meditation chambray bespoke loko deep v Park twee biodiesel pbr b normcore 3 wolf moon viral photo booth Cred kogi tote bag plaid shabby chic Bicycle rights schlitz forage tilde marfa everyday Banjo distillery drinking bespoke freegan tumblr raw denim
Plaid authentic portland shoreditch.
Viral poutine fashion axe swag Bushwick banjo pitchfork listicle vinegar church key Paleo church key pop up thundercats Scenester godard next level blue bottle Keytar loko truffaut lumbersexual Narwhal letterpress flexitarian pickled shabby chic phlogiston Echo vinyl cred five dollar toast gentrify twee seitan Brooklyn microdosing irony distillery occupy umami Waistcoat paleo xoxo Paleo pop up humblebrag yuccie pinterest Offal muggle magic craft beer yr pitchfork kitsch shabby chic Mustache chicharrones sustainable 8 bit
Squid loko humblebrag roof flexitarian.
Brunch tofu kombucha semiotics asymmetrical hashtag slow carb carry Selfies slow carb you probably haven t heard of them sartorial venmo small batch Next level roof polaroid lumbersexual messenger bag cray organic Trust fund readymade cornhole 1 gastropub cred post ironic yuccie Everyday occupy franzen Semiotics master pop up tacos intelligentsia Mlkshk pop up kombucha pbr b craft beer cornhole master yr Messenger bag goth neutra celiac asymmetrical pabst meditation aesthetic Messenger bag actually aesthetic bushwick intelligentsia chartreuse ethical Neutra pour over occupy pinterest drinking raw denim flannel Lomo put a bird on it kogi hammock Tousled typewriter tote bag slow carb cardigan
Fingerstache microdosing<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="true">
<div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-053bdc">
<div class="vi-accordion-content__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-0a2bd0">Scenester chicharrones try-hard readymade everyday sriracha migas cred.</h4>
<a aria-controls="region-87e2bb" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-053bdc" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Scenester chicharrones try-hard readymade everyday sriracha migas cred.</span></div>
</a>
</div>
<div aria-labelledby="heading-0a2bd0" class="vi-accordion-content__main vi-accordion__main" id="region-87e2bb" role="region">
<div class="vi-accordion-content__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Kitsch pinterest hashtag skateboard poutine.</h3>
<p id="sg-560279">Bicycle rights vhs <a href="#sample">fixie Kickstarter banh</a> mi brunch yolo <a href="#sample">shoreditch bushwick taxidermy</a> Food truck organic humblebrag chicharrones flannel Blog hammock lomo mixtape organic Poutine hoodie try hard beard quinoa park Franzen typewriter goth <a href="#sample">banh mi Hammock</a> drinking semiotics Xoxo iphone meggings synth farm to table Shabby chic tumblr listicle shoreditch Celiac asymmetrical franzen</p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-765d2a">
<div class="vi-accordion-content__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-1d983a">Cold-pressed seitan hoodie mustache church-key pitchfork flexitarian tacos.</h4>
<a aria-controls="region-e3134e" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-765d2a" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Cold-pressed seitan hoodie mustache church-key pitchfork flexitarian tacos.</span></div>
</a>
</div>
<div aria-labelledby="heading-1d983a" class="vi-accordion-content__main vi-accordion__main" id="region-e3134e" role="region">
<div class="vi-accordion-content__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Pinterest fingerstache humblebrag intelligentsia lo-fi.</h3>
<p id="sg-debd91"><a href="#sample">Disrupt gluten free</a> <a href="#sample">celiac jean shorts</a> <a href="#sample">readymade venmo Pitchfork</a> <a href="#sample">yr photo booth</a> blue bottle Mixtape <a href="#sample">taxidermy umami selfies</a> <a href="#sample">fanny pack pabst</a> <a href="#sample">Post ironic yuccie</a> <a href="#sample">retro wayfarers mumblecore</a> <a href="#sample">shabby chic chartreuse</a> brunch Ugh franzen iphone venmo sartorial drinking migas plaid Bespoke jean shorts raw denim seitan tilde trust fund <a href="#sample">asymmetrical beard Small</a> <a href="#sample">batch cliche butcher</a> offal squid diy <a href="#sample">locavore Stumptown health</a> neutra trust fund <a href="#sample">plaid swag pickled</a> cardigan Godard art party listicle bushwick <a href="#sample">poutine asymmetrical roof</a> <a href="#sample">waistcoat Master yolo</a> austin Cronut chicharrones <a href="#sample">tattooed ugh deep</a> <a href="#sample">v messenger bag</a> <a href="#sample">Mlkshk kombucha distillery</a> <a href="#sample">bushwick carry dreamcatcher</a></p>
<h3>Sustainable helvetica truffaut drinking park.</h3>
<p>Viral schlitz fixie kale chips etsy <a href="#sample">Cleanse banjo pork</a> belly vegan Messenger bag godard occupy etsy kinfolk semiotics Echo venmo post ironic taxidermy deep <a href="#sample">v small batch</a> butcher 8 bit Lo fi meggings narwhal xoxo bitters chicharrones tacos crucifix Kitsch cray aesthetic Forage ramps fixie Biodiesel banjo knausgaard Chartreuse food truck direct trade freegan retro sartorial helvetica leggings Church key freegan microdosing lumbersexual health carry fanny pack ennui Sriracha truffaut put a bird on it pork belly meggings taxidermy</p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-64aa53">
<div class="vi-accordion-content__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-25ec99">Sartorial pour-over viral chicharrones shoreditch iphone taxidermy gentrify.</h4>
<a aria-controls="region-02956b" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-64aa53" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Sartorial pour-over viral chicharrones shoreditch iphone taxidermy gentrify.</span></div>
</a>
</div>
<div aria-labelledby="heading-25ec99" class="vi-accordion-content__main vi-accordion__main" id="region-02956b" role="region">
<div class="vi-accordion-content__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Letterpress marfa cronut plaid park.</h3>
<p>Chillwave beard etsy hoodie readymade pinterest Chicharrones single origin coffee marfa selfies pinterest food truck xoxo Vinegar typewriter ennui Listicle wolf phlogiston wes anderson etsy iphone <a href="#sample">mumblecore Meditation</a> chambray bespoke loko deep v Park twee biodiesel pbr b normcore 3 wolf moon viral photo booth Cred kogi tote bag plaid shabby chic Bicycle rights schlitz forage tilde marfa <a href="#sample">everyday Banjo</a> distillery drinking bespoke freegan tumblr raw denim</p>
<h3>Plaid authentic portland shoreditch.</h3>
<p>Viral poutine fashion axe swag Bushwick banjo pitchfork listicle vinegar church key Paleo church key pop up thundercats <a href="#sample">Scenester godard</a> next level blue bottle Keytar loko truffaut lumbersexual <a href="#sample">Narwhal letterpress</a> flexitarian pickled shabby chic phlogiston Echo vinyl cred five dollar <a href="#sample">toast gentrify</a> twee seitan Brooklyn microdosing irony distillery occupy umami Waistcoat paleo xoxo Paleo pop up humblebrag yuccie pinterest Offal muggle magic craft beer yr pitchfork kitsch shabby <a href="#sample">chic Mustache</a> chicharrones sustainable 8 bit</p>
<h3>Squid loko humblebrag roof flexitarian.</h3>
<p>Brunch tofu kombucha semiotics asymmetrical hashtag slow carb carry Selfies slow carb you probably haven t heard of them sartorial venmo small batch Next level roof polaroid lumbersexual messenger bag cray organic Trust fund readymade cornhole 1 gastropub cred post ironic yuccie Everyday occupy franzen Semiotics master pop up tacos intelligentsia Mlkshk pop up kombucha pbr b craft beer cornhole master yr Messenger bag goth neutra celiac asymmetrical pabst meditation aesthetic Messenger bag actually aesthetic <a href="#sample">bushwick intelligentsia chartreuse</a> <a href="#sample">ethical Neutra pour</a> over occupy pinterest <a href="#sample">drinking raw denim</a> flannel Lomo put a bird on it kogi hammock Tousled typewriter tote bag slow carb cardigan</p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Fingerstache microdosing</a>
</div>
</div>
</div>
</div>The Content Accordion can also be used with an icon on the left
<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="true">
<div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-5ebac3">
<div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-content__icon vi-accordion__icon">
<!-- Icon coins -->
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="coins"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M23,17 C23,20.3137085 20.3137085,23 17,23 C14.3253322,23 12.0594235,21.2498945 11.2849448,18.8323545 C11.6174493,18.7693073 11.9422462,18.6891845 12.2600002,18.5928618 C12.9241479,20.5732681 14.7954584,22 17,22 C19.7614237,22 22,19.7614237 22,17 C22,14.7954584 20.5732681,12.9241479 18.5927844,12.2590486 C18.6891437,11.9424298 18.7693222,11.61742 18.8323167,11.2863207 C21.2496612,12.0591214 23,14.3251539 23,17 Z"></path><path fill-rule="nonzero" d="M9.5,1 C14.1944204,1 18,4.80557963 18,9.5 C18,14.1944204 14.1944204,18 9.5,18 C4.80557963,18 1,14.1944204 1,9.5 C1,4.80557963 4.80557963,1 9.5,1 Z M9.5,2 C5.35786438,2 2,5.35786438 2,9.5 C2,13.6421356 5.35786438,17 9.5,17 C13.6421356,17 17,13.6421356 17,9.5 C17,5.35786438 13.6421356,2 9.5,2 Z"></path><path fill-rule="nonzero" d="M11.9645,12.512 C11.5485,12.707 10.9765,12.837 10.1705,12.837 C8.4935,12.837 7.5185,11.94 7.1805,10.51 L10.5085,10.51 C10.5865,10.51 10.6125,10.484 10.6125,10.419 L10.6125,9.951 C10.6125,9.886 10.5865,9.86 10.5215,9.86 L7.0765,9.86 C7.0635,9.665 7.0505,9.457 7.0505,9.249 C7.0505,9.08 7.0505,8.911 7.0635,8.755 L10.7425,8.755 C10.8205,8.755 10.8465,8.729 10.8465,8.664 L10.8465,8.196 C10.8465,8.131 10.8205,8.105 10.7555,8.105 L7.1545,8.105 C7.4665,6.61 8.4415,5.635 10.1835,5.635 C10.8075,5.635 11.3665,5.713 11.6915,5.83 C11.7695,5.856 11.8345,5.804 11.8345,5.726 L11.8345,5.219 C11.8345,5.115 11.8215,5.076 11.7045,5.037 C11.3535,4.933 10.8075,4.855 10.1705,4.855 C8.2075,4.855 6.6865,5.973 6.2965,8.105 L5.1525,8.105 C5.0875,8.105 5.0615,8.131 5.0615,8.196 L5.0615,8.664 C5.0615,8.729 5.0875,8.755 5.1655,8.755 L6.2185,8.755 C6.2055,8.911 6.2055,9.067 6.2055,9.236 C6.2055,9.457 6.2185,9.665 6.2315,9.86 L5.1525,9.86 C5.0875,9.86 5.0615,9.886 5.0615,9.951 L5.0615,10.419 C5.0615,10.484 5.0875,10.51 5.1655,10.51 L6.3225,10.51 C6.6995,12.486 8.0125,13.617 10.1055,13.617 C10.8725,13.617 11.5485,13.5 12.0035,13.318 C12.0945,13.279 12.1205,13.253 12.1205,13.136 L12.1205,12.629 C12.1205,12.525 12.0685,12.46 11.9645,12.512 Z"></path></g></svg>
</div>
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-57511e">Franzen whatever cleanse try-hard disrupt xoxo aesthetic yolo.</h4>
<a aria-controls="region-bd3686" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-5ebac3" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Franzen whatever cleanse try-hard disrupt xoxo aesthetic yolo.</span></div>
</a>
</div>
<div aria-labelledby="heading-57511e" class="vi-accordion-content__main vi-accordion__main" id="region-bd3686" role="region">
<div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
<h3>Kickstarter irony cronut artisan.</h3>
<p id="sg-656bab">Echo umami fixie quinoa literally fashion axe keytar direct trade Chicharrones semiotics iphone art party beard tote bag 90 s kinfolk Locavore ugh you <a href="#sample">probably haven t</a> heard of them cray pop up Wayfarers microdosing kogi deep v plaid mumblecore church key <a href="#sample">fashion axe Marfa</a> flexitarian portland cred ramps Sustainable kogi pinterest drinking yolo photo booth forage Post ironic meditation squid dreamcatcher yuccie Twee 3 wolf <a href="#sample">moon drinking Blue</a> bottle put a bird on it marfa blog pickled Disrupt pitchfork mixtape venmo Iphone literally pour over tousled shabby chic</p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-2bedb1">
<div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-content__icon vi-accordion__icon">
<!-- Icon coins -->
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="coins"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M23,17 C23,20.3137085 20.3137085,23 17,23 C14.3253322,23 12.0594235,21.2498945 11.2849448,18.8323545 C11.6174493,18.7693073 11.9422462,18.6891845 12.2600002,18.5928618 C12.9241479,20.5732681 14.7954584,22 17,22 C19.7614237,22 22,19.7614237 22,17 C22,14.7954584 20.5732681,12.9241479 18.5927844,12.2590486 C18.6891437,11.9424298 18.7693222,11.61742 18.8323167,11.2863207 C21.2496612,12.0591214 23,14.3251539 23,17 Z"></path><path fill-rule="nonzero" d="M9.5,1 C14.1944204,1 18,4.80557963 18,9.5 C18,14.1944204 14.1944204,18 9.5,18 C4.80557963,18 1,14.1944204 1,9.5 C1,4.80557963 4.80557963,1 9.5,1 Z M9.5,2 C5.35786438,2 2,5.35786438 2,9.5 C2,13.6421356 5.35786438,17 9.5,17 C13.6421356,17 17,13.6421356 17,9.5 C17,5.35786438 13.6421356,2 9.5,2 Z"></path><path fill-rule="nonzero" d="M11.9645,12.512 C11.5485,12.707 10.9765,12.837 10.1705,12.837 C8.4935,12.837 7.5185,11.94 7.1805,10.51 L10.5085,10.51 C10.5865,10.51 10.6125,10.484 10.6125,10.419 L10.6125,9.951 C10.6125,9.886 10.5865,9.86 10.5215,9.86 L7.0765,9.86 C7.0635,9.665 7.0505,9.457 7.0505,9.249 C7.0505,9.08 7.0505,8.911 7.0635,8.755 L10.7425,8.755 C10.8205,8.755 10.8465,8.729 10.8465,8.664 L10.8465,8.196 C10.8465,8.131 10.8205,8.105 10.7555,8.105 L7.1545,8.105 C7.4665,6.61 8.4415,5.635 10.1835,5.635 C10.8075,5.635 11.3665,5.713 11.6915,5.83 C11.7695,5.856 11.8345,5.804 11.8345,5.726 L11.8345,5.219 C11.8345,5.115 11.8215,5.076 11.7045,5.037 C11.3535,4.933 10.8075,4.855 10.1705,4.855 C8.2075,4.855 6.6865,5.973 6.2965,8.105 L5.1525,8.105 C5.0875,8.105 5.0615,8.131 5.0615,8.196 L5.0615,8.664 C5.0615,8.729 5.0875,8.755 5.1655,8.755 L6.2185,8.755 C6.2055,8.911 6.2055,9.067 6.2055,9.236 C6.2055,9.457 6.2185,9.665 6.2315,9.86 L5.1525,9.86 C5.0875,9.86 5.0615,9.886 5.0615,9.951 L5.0615,10.419 C5.0615,10.484 5.0875,10.51 5.1655,10.51 L6.3225,10.51 C6.6995,12.486 8.0125,13.617 10.1055,13.617 C10.8725,13.617 11.5485,13.5 12.0035,13.318 C12.0945,13.279 12.1205,13.253 12.1205,13.136 L12.1205,12.629 C12.1205,12.525 12.0685,12.46 11.9645,12.512 Z"></path></g></svg>
</div>
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-b76886">Authentic narwhal semiotics intelligentsia health cleanse etsy pug.</h4>
<a aria-controls="region-a0167a" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-2bedb1" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Authentic narwhal semiotics intelligentsia health cleanse etsy pug.</span></div>
</a>
</div>
<div aria-labelledby="heading-b76886" class="vi-accordion-content__main vi-accordion__main" id="region-a0167a" role="region">
<div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
<h3>Kinfolk cliche literally everyday knausgaard.</h3>
<p id="sg-7cd4b3">Paleo letterpress neutra aesthetic you probably haven t heard of them celiac selfies Farm to table before they sold out actually pug letterpress Wolf street health Butcher before they sold out ugh bicycle rights thundercats pop up Cray chicharrones austin You probably haven t heard of them celiac iphone craft beer wayfarers poutine ramps Xoxo cred lumbersexual fixie vice gastropub Twee wayfarers humblebrag kogi etsy beard fixie wolf Vhs bitters williamsburg 1 pour over flexitarian cronut Try hard pabst offal cliche freegan phlogiston Disrupt truffaut portland xoxo pickled poutine Fixie tote bag tacos</p>
<h3>Literally cred gluten-free migas.</h3>
<p>Synth salvia selvage You probably haven <a href="#sample">t heard</a> of them irony pop up scenester slow carb authentic Offal tote bag wayfarers letterpress Tote bag distillery banh mi flannel fashion axe umami wayfarers Organic single origin coffee pabst crucifix Disrupt keytar thundercats photo booth authentic Austin cronut <a href="#sample">lomo forage</a> literally iphone <a href="#sample">listicle Hammock</a> godard goth irony Lo fi thundercats iphone distillery crucifix art party food <a href="#sample">truck Chia</a> seitan umami Lumbersexual health franzen intelligentsia</p>
<h3>Hashtag wayfarers asymmetrical selfies kombucha.</h3>
<p><a href="#sample">Viral poutine</a> street Polaroid <a href="#sample">drinking blog</a> skateboard yr vinyl readymade wayfarers Venmo vice ethical biodiesel raw denim squid swag 8 <a href="#sample">bit yr</a> cornhole Gastropub <a href="#sample">venmo umami</a> marfa intelligentsia Celiac cronut iphone vice shabby chic <a href="#sample">carry pour</a> over Tilde listicle swag Selfies diy photo booth Scenester authentic pbr b Pug heirloom mixtape artisan <a href="#sample">Keytar migas</a> <a href="#sample">typewriter celiac</a> <a href="#sample">Pour over</a> pop up tofu sriracha farm to table</p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-2b50b1">
<div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-content__icon vi-accordion__icon">
<!-- Icon coins -->
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="coins"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M23,17 C23,20.3137085 20.3137085,23 17,23 C14.3253322,23 12.0594235,21.2498945 11.2849448,18.8323545 C11.6174493,18.7693073 11.9422462,18.6891845 12.2600002,18.5928618 C12.9241479,20.5732681 14.7954584,22 17,22 C19.7614237,22 22,19.7614237 22,17 C22,14.7954584 20.5732681,12.9241479 18.5927844,12.2590486 C18.6891437,11.9424298 18.7693222,11.61742 18.8323167,11.2863207 C21.2496612,12.0591214 23,14.3251539 23,17 Z"></path><path fill-rule="nonzero" d="M9.5,1 C14.1944204,1 18,4.80557963 18,9.5 C18,14.1944204 14.1944204,18 9.5,18 C4.80557963,18 1,14.1944204 1,9.5 C1,4.80557963 4.80557963,1 9.5,1 Z M9.5,2 C5.35786438,2 2,5.35786438 2,9.5 C2,13.6421356 5.35786438,17 9.5,17 C13.6421356,17 17,13.6421356 17,9.5 C17,5.35786438 13.6421356,2 9.5,2 Z"></path><path fill-rule="nonzero" d="M11.9645,12.512 C11.5485,12.707 10.9765,12.837 10.1705,12.837 C8.4935,12.837 7.5185,11.94 7.1805,10.51 L10.5085,10.51 C10.5865,10.51 10.6125,10.484 10.6125,10.419 L10.6125,9.951 C10.6125,9.886 10.5865,9.86 10.5215,9.86 L7.0765,9.86 C7.0635,9.665 7.0505,9.457 7.0505,9.249 C7.0505,9.08 7.0505,8.911 7.0635,8.755 L10.7425,8.755 C10.8205,8.755 10.8465,8.729 10.8465,8.664 L10.8465,8.196 C10.8465,8.131 10.8205,8.105 10.7555,8.105 L7.1545,8.105 C7.4665,6.61 8.4415,5.635 10.1835,5.635 C10.8075,5.635 11.3665,5.713 11.6915,5.83 C11.7695,5.856 11.8345,5.804 11.8345,5.726 L11.8345,5.219 C11.8345,5.115 11.8215,5.076 11.7045,5.037 C11.3535,4.933 10.8075,4.855 10.1705,4.855 C8.2075,4.855 6.6865,5.973 6.2965,8.105 L5.1525,8.105 C5.0875,8.105 5.0615,8.131 5.0615,8.196 L5.0615,8.664 C5.0615,8.729 5.0875,8.755 5.1655,8.755 L6.2185,8.755 C6.2055,8.911 6.2055,9.067 6.2055,9.236 C6.2055,9.457 6.2185,9.665 6.2315,9.86 L5.1525,9.86 C5.0875,9.86 5.0615,9.886 5.0615,9.951 L5.0615,10.419 C5.0615,10.484 5.0875,10.51 5.1655,10.51 L6.3225,10.51 C6.6995,12.486 8.0125,13.617 10.1055,13.617 C10.8725,13.617 11.5485,13.5 12.0035,13.318 C12.0945,13.279 12.1205,13.253 12.1205,13.136 L12.1205,12.629 C12.1205,12.525 12.0685,12.46 11.9645,12.512 Z"></path></g></svg>
</div>
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-1b8a05">Sustainable yr locavore squid pbr&b squid master meh.</h4>
<a aria-controls="region-e2026b" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-2b50b1" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Sustainable yr locavore squid pbr&b squid master meh.</span></div>
</a>
</div>
<div aria-labelledby="heading-1b8a05" class="vi-accordion-content__main vi-accordion__main" id="region-e2026b" role="region">
<div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
<h3>Stumptown mustache cray mixtape 8-bit.</h3>
<p>90 s <a href="#sample">fingerstache sriracha</a> ennui portland mlkshk Kombucha selfies keffiyeh normcore Retro master bicycle rights yr meh Echo tofu ugh Umami forage pbr b gastropub flannel meggings gentrify intelligentsia Salvia authentic kinfolk bespoke deep v synth squid Sriracha iphone venmo leggings synth Taxidermy skateboard hammock venmo chartreuse Carry kombucha letterpress narwhal Stumptown ennui distillery shoreditch banjo freegan polaroid marfa</p>
<h3>Forage gluten-free irony master kitsch.</h3>
<p>Cray drinking <a href="#sample">phlogiston crucifix</a> <a href="#sample">Sriracha intelligentsia</a> cardigan ugh Church key organic tattooed normcore cronut <a href="#sample">loko Gentrify</a> plaid drinking aesthetic Pour over bitters readymade vice chillwave five dollar toast mlkshk Mixtape meditation godard Cliche ramps flannel yr mlkshk intelligentsia stumptown cleanse Mustache letterpress post ironic pug truffaut Bespoke kitsch meh Pug leggings 8 <a href="#sample">bit sartorial</a> taxidermy williamsburg wolf Tumblr fashion axe lomo blue bottle distillery vinyl salvia tattooed Taxidermy green juice meditation yuccie</p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Loko bushwick</a>
</div>
</div>
</div>
</div>The Content Accordion can also be used with an image on the left
Humblebrag meh cold-pressed gastropub pbr&b disrupt offal vinyl.
Toggle
Humblebrag meh cold-pressed gastropub pbr&b disrupt offal vinyl.
Cardigan humblebrag church-key xoxo cliche neutra park microdosing.
Toggle
Cardigan humblebrag church-key xoxo cliche neutra park microdosing.
Etsy thundercats normcore literally carry ramps post-ironic neutra.
Toggle
Etsy thundercats normcore literally carry ramps post-ironic neutra.
<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="true">
<div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-2bb043">
<div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-content__icon vi-accordion__icon">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
</div>
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-2a4340">Humblebrag meh cold-pressed gastropub pbr&b disrupt offal vinyl.</h4>
<a aria-controls="region-bb8bc3" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-2bb043" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Humblebrag meh cold-pressed gastropub pbr&b disrupt offal vinyl.</span></div>
</a>
</div>
<div aria-labelledby="heading-2a4340" class="vi-accordion-content__main vi-accordion__main" id="region-bb8bc3" role="region">
<div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
<h3>Readymade brooklyn retro irony.</h3>
<p id="sg-4cbd3a">Sartorial gastropub fingerstache shabby chic leggings taxidermy 90 s twee raw denim pbr b Vinegar everyday flexitarian lo <a href="#sample">fi pinterest</a> etsy Bitters flexitarian heirloom bushwick Polaroid schlitz 3 wolf moon dreamcatcher butcher Bespoke butcher beard wolf tumblr mixtape umami 8 <a href="#sample">bit squid</a> typewriter roof literally tumblr Kogi hashtag aesthetic photo booth tattooed beard gastropub freegan Vinegar tacos cronut kale chips taxidermy pour over bushwick keffiyeh Locavore 8 bit church key post ironic organic diy craft beer literally Drinking cornhole crucifix vhs</p>
<h3>Listicle venmo keffiyeh cray waistcoat.</h3>
<p>Tofu tilde skateboard austin deep v pabst knausgaard food truck Drinking leggings normcore master butcher brunch five dollar <a href="#sample">toast vegan</a> Muggle magic gluten free ugh sustainable Ugh offal retro Asymmetrical austin bushwick poutine humblebrag Kale chips godard carry Portland kogi put a <a href="#sample">bird on</a> it seitan wayfarers bushwick <a href="#sample">Lumbersexual trust</a> fund readymade mixtape everyday stumptown shabby chic Try hard neutra stumptown kitsch everyday Chillwave hashtag knausgaard cliche kombucha franzen humblebrag Typewriter mumblecore chia sriracha <a href="#sample">cliche Gastropub</a> cliche shabby chic hoodie cray</p>
<h3>Flexitarian organic thundercats chia knausgaard.</h3>
<p>Freegan gastropub brunch Helvetica put a bird on it hoodie biodiesel ethical taxidermy yolo kale chips Organic echo freegan Pug occupy twee bitters you probably haven t heard of them before they sold out listicle venmo Intelligentsia forage dreamcatcher kogi green juice Wayfarers pabst migas street leggings thundercats vinegar Leggings bitters migas church key godard celiac Etsy scenester dreamcatcher kinfolk <a href="#sample">portland Thundercats 90</a> s kale chips brooklyn ennui beard scenester wolf Loko humblebrag celiac twee hella chicharrones brunch Jean shorts pickled vhs skateboard tilde gluten free bitters fixie Taxidermy cliche gluten free forage twee chartreuse waistcoat</p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-09c316">
<div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-content__icon vi-accordion__icon">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
</div>
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-03c199">Cardigan humblebrag church-key xoxo cliche neutra park microdosing.</h4>
<a aria-controls="region-c2e1c9" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-09c316" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Cardigan humblebrag church-key xoxo cliche neutra park microdosing.</span></div>
</a>
</div>
<div aria-labelledby="heading-03c199" class="vi-accordion-content__main vi-accordion__main" id="region-c2e1c9" role="region">
<div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
<h3>+1 tattooed gentrify vinegar mustache.</h3>
<p id="sg-878d7d">Schlitz cornhole tattooed Godard neutra migas iphone gentrify bespoke Poutine sriracha actually jean shorts yr venmo Letterpress actually church key aesthetic carry kickstarter fanny pack neutra Shoreditch roof narwhal Gluten free vegan phlogiston heirloom <a href="#sample">Xoxo loko</a> cronut ramps street food <a href="#sample">truck pour</a> over slow <a href="#sample">carb Austin</a> before they sold out goth waistcoat banjo pickled 8 bit <a href="#sample">raw denim</a> Poutine single origin coffee <a href="#sample">echo semiotics</a> Seitan tumblr wayfarers 90 <a href="#sample">s flexitarian</a> taxidermy meh Kombucha celiac 90 s kale chips readymade</p>
<h3>Godard brooklyn pug leggings vhs.</h3>
<p><a href="#sample">Humblebrag iphone chartreuse</a> Mustache narwhal humblebrag crucifix Paleo umami <a href="#sample">master celiac ramps</a> Pop up messenger bag blue bottle intelligentsia Vegan farm to table intelligentsia artisan Diy salvia <a href="#sample">cray deep v</a> <a href="#sample">humblebrag Small batch</a> tofu slow carb <a href="#sample">typewriter kinfolk Locavore</a> <a href="#sample">lomo leggings hashtag</a> salvia kinfolk trust fund 3 wolf moon Fanny pack flexitarian pbr b scenester gentrify occupy <a href="#sample">Portland austin etsy</a> semiotics godard skateboard <a href="#sample">Lumbersexual tote bag</a> kale chips master <a href="#sample">goth scenester</a></p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-57a06b">
<div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-content__icon vi-accordion__icon">
<div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
</div>
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-a36ced">Etsy thundercats normcore literally carry ramps post-ironic neutra.</h4>
<a aria-controls="region-b6cc02" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-57a06b" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Etsy thundercats normcore literally carry ramps post-ironic neutra.</span></div>
</a>
</div>
<div aria-labelledby="heading-a36ced" class="vi-accordion-content__main vi-accordion__main" id="region-b6cc02" role="region">
<div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
<h3>Ramps vhs +1 skateboard.</h3>
<p>Mumblecore cray kinfolk brunch kitsch church key muggle magic Cred asymmetrical ugh lumbersexual disrupt whatever wes <a href="#sample">anderson viral</a> Bushwick goth narwhal everyday tousled keffiyeh Cred retro <a href="#sample">waistcoat plaid</a> freegan portland locavore drinking Pbr b tacos jean shorts blue bottle 8 <a href="#sample">bit Quinoa</a> everyday banh mi selfies fixie Neutra five dollar toast quinoa <a href="#sample">Knausgaard semiotics</a> <a href="#sample">lumbersexual five</a> dollar toast roof street <a href="#sample">echo hoodie</a> Salvia kombucha kinfolk vice phlogiston forage Quinoa tofu kitsch sriracha kombucha diy paleo You probably haven t heard of them gastropub messenger bag cray <a href="#sample">freegan crucifix</a> distillery celiac Cray hella yolo bitters</p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Hashtag echo</a>
</div>
</div>
</div>
</div>Refine #
The Refine Accordion shows a small header and a downward/upwards chevron trigger. Associated content is displayed against an offwhite background.
Heirloom skateboard +1 iphone ugh swag cray narwhal.
Toggle
Heirloom skateboard +1 iphone ugh swag cray narwhal.
Literally aesthetic synth brooklyn occupy lomo keffiyeh kombucha skateboard roof biodiesel letterpress cronut 8-bit thundercats.
Authentic ramps chambray stumptown loko master actually phlogiston.
Toggle
Authentic ramps chambray stumptown loko master actually phlogiston.
Artisan flannel listicle chicharrones ugh try-hard beard squid cleanse keffiyeh godard dreamcatcher authentic forage venmo.
Organic chartreuse vegan tumblr pour-over occupy hammock mustache.
Toggle
Organic chartreuse vegan tumblr pour-over occupy hammock mustache.
Asymmetrical ramps meh gentrify Plaid cred brooklyn selvage 1 hella austin Ugh iphone lomo diy migas direct trade farm to table Helvetica literally hammock normcore godard fashion axe williamsburg Wayfarers slow carb leggings franzen scenester messenger bag etsy Green juice tousled cred venmo phlogiston before they sold out occupy Waistcoat lo fi raw denim hashtag everyday fingerstache flannel art party Selfies pug semiotics taxidermy Migas polaroid bicycle rights viral lumbersexual narwhal twee Pork belly post ironic cred Ugh meditation five dollar toast
Helvetica cred<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion" data-autoclose="false">
<div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-32d58d">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-42974e">Heirloom skateboard +1 iphone ugh swag cray narwhal.</h4>
<a aria-controls="region-946a5a" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-32d58d" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Heirloom skateboard +1 iphone ugh swag cray narwhal.</span></div>
</a>
</div>
<div aria-labelledby="heading-42974e" class="vi-accordion-refine__main vi-accordion__main" id="region-946a5a" role="region">
<div class="vi-accordion-refine__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<p>Literally aesthetic synth brooklyn occupy lomo keffiyeh kombucha skateboard roof biodiesel letterpress cronut 8-bit thundercats.</p>
</div>
</div>
</div>
<div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-4c2632">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-bc1317">Authentic ramps chambray stumptown loko master actually phlogiston.</h4>
<a aria-controls="region-2a6999" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-4c2632" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Authentic ramps chambray stumptown loko master actually phlogiston.</span></div>
</a>
</div>
<div aria-labelledby="heading-bc1317" class="vi-accordion-refine__main vi-accordion__main" id="region-2a6999" role="region">
<div class="vi-accordion-refine__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<p>Artisan flannel listicle chicharrones ugh try-hard beard squid cleanse keffiyeh godard dreamcatcher authentic forage venmo.</p>
</div>
</div>
</div>
<div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-a7ec2b">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-e10e94">Organic chartreuse vegan tumblr pour-over occupy hammock mustache.</h4>
<a aria-controls="region-ea0918" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-a7ec2b" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Organic chartreuse vegan tumblr pour-over occupy hammock mustache.</span></div>
</a>
</div>
<div aria-labelledby="heading-e10e94" class="vi-accordion-refine__main vi-accordion__main" id="region-ea0918" role="region">
<div class="vi-accordion-refine__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<p>Asymmetrical ramps meh gentrify Plaid cred brooklyn selvage 1 hella austin Ugh iphone lomo diy migas direct trade farm to table Helvetica literally hammock normcore godard fashion axe williamsburg Wayfarers slow carb leggings franzen scenester messenger bag etsy Green juice tousled cred venmo phlogiston before they sold out occupy Waistcoat lo fi raw denim hashtag everyday fingerstache flannel art party Selfies pug semiotics taxidermy Migas polaroid bicycle rights viral lumbersexual narwhal twee Pork belly post ironic cred Ugh meditation five dollar toast</p>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Helvetica cred</a>
</div>
</div>
</div>
</div>Pipeline #
Similar to the Content Accordion, the pipeline accordion shows a larger header and a clear +/- trigger. Furthermore, the accordion items each have spacing in between. Added with the pipeline (but not exclusively usable with the pipeline) are tags and a subtitle Associated content is displayed against an white background.
Diy offal 90's chartreuse.
Cleanse put a bird on it vice kale chips Gastropub shoreditch carry Blog etsy freegan goth church key paleo Letterpress chartreuse kogi goth loko asymmetrical stumptown Vinyl skateboard bicycle rights pitchfork 90 s Actually pabst 90 s tumblr dreamcatcher selfies tofu Disrupt direct trade humblebrag echo kogi Pork belly meh kickstarter Tofu 8 bit wolf Salvia muggle magic mumblecore master Typewriter 3 wolf moon waistcoat godard venmo authentic thundercats
Keffiyeh letterpress pitchfork stumptown echo letterpress lo-fi occupy.
(Williamsburg biodiesel mlkshk.)Park lomo 90's church-key biodiesel.
Pork belly direct trade put a bird on it ennui sustainable bicycle rights Mlkshk tacos distillery Helvetica marfa cred letterpress craft beer wes anderson kickstarter Drinking kinfolk messenger bag Brooklyn pabst green juice Scenester bespoke whatever pug Direct trade vinyl vinegar brooklyn 3 wolf moon 8 bit chillwave Lumbersexual you probably haven t heard of them marfa vhs try hard loko bitters Austin kitsch narwhal small batch next level crucifix hoodie Polaroid actually paleo shoreditch microdosing migas five dollar toast Cred tofu kale chips quinoa tote bag Pabst cornhole meggings portland single origin coffee cray
Keytar aesthetic cred mustache cardigan.
Ennui park bicycle rights sartorial fashion axe umami Swag bespoke vegan goth pork belly cred austin 90 s five dollar toast migas pop up waistcoat bushwick mumblecore Vinyl stumptown yolo ethical loko next level street 3 wolf moon kickstarter chicharrones Master kale chips cardigan brooklyn Brunch listicle lomo seitan heirloom Brooklyn tousled 8 bit ramps Brunch yr readymade migas tofu Tacos austin typewriter microdosing kombucha tousled
Street cronutbrooklyn chicharrones
(Kinfolk pinterest heirloom.)Currently, there is no detailed content available for this drug.
Aesthetic squid kogi meditation.
Semiotics tofu yolo dreamcatcher meggings Butcher bitters trust fund ennui vinegar actually sustainable Twee brooklyn keytar cleanse tattooed Sartorial helvetica blue bottle Neutra gastropub iphone Letterpress 3 wolf moon synth Ramps selfies gastropub loko before they sold out ugh Meggings meditation celiac goth beard humblebrag Forage 8 bit cronut kinfolk viral fanny pack farm to table biodiesel Schlitz lo fi loko distillery
Cred dreamcatcher stumptown lomo biodiesel.
Cardigan drinking scenester gentrify marfa artisan shoreditch Dreamcatcher austin microdosing gluten free wolf vice kitsch yolo Five dollar toast cray 3 wolf moon Authentic actually squid bitters wolf Taxidermy aesthetic chartreuse Fashion axe xoxo twee pabst irony tote bag Cliche direct trade try hard knausgaard yuccie cleanse food truck Tousled shabby chic cleanse hammock banjo scenester Goth small batch health vhs locavore Try hard fingerstache hella
Hella iphone occupy ramps.
Cleanse tousled distillery tumblr quinoa slow carb Wayfarers jean shorts tattooed authentic carry banh mi Dreamcatcher mumblecore pork belly Wolf yuccie lo fi freegan lumbersexual ugh shabby chic leggings Pug godard helvetica hella trust fund 8 bit Chartreuse organic aesthetic meh retro Neutra photo booth biodiesel selvage Brooklyn gastropub pitchfork raw denim Humblebrag food truck vhs vice meggings irony 1 shoreditch truffaut asymmetrical irony Photo booth selfies biodiesel kickstarter Selfies pickled williamsburg drinking
Mixtape skateboard<!-- Accordion type: pipeline -->
<div class="vi-accordion-pipeline vi-accordion" data-autoclose="true">
<div class="is-active vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-34d1a5">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-7e2e11">Poutine kinfolk lumbersexual kogi tofu ennui lo-fi church-key.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Umami humblebrag flexitarian.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
narwhal
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
slow-carb
</li>
</ul>
<a aria-controls="region-bec268" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-34d1a5" role="button">
</a>
</div>
<div aria-labelledby="heading-7e2e11" class="vi-accordion-pipeline__main vi-accordion__main" id="region-bec268" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Diy offal 90's chartreuse.</h3>
<p id="sg-e060ee">Cleanse put a bird on it vice kale chips Gastropub shoreditch carry Blog etsy freegan goth <a href="#sample">church key</a> paleo Letterpress chartreuse kogi goth loko asymmetrical stumptown <a href="#sample">Vinyl skateboard</a> <a href="#sample">bicycle rights</a> pitchfork 90 s Actually pabst 90 s tumblr dreamcatcher selfies tofu Disrupt direct trade humblebrag echo kogi Pork belly meh kickstarter Tofu 8 bit wolf Salvia muggle magic mumblecore master Typewriter 3 wolf moon waistcoat godard venmo authentic <a href="#sample">thundercats</a></p>
</div>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-3540a4">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-9ec7a2">Keffiyeh letterpress pitchfork stumptown echo letterpress lo-fi occupy.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Williamsburg biodiesel mlkshk.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
polaroid
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
heirloom
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
leggings
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
artisan
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
authentic
</li>
</ul>
<a aria-controls="region-c846e5" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-3540a4" role="button">
</a>
</div>
<div aria-labelledby="heading-9ec7a2" class="vi-accordion-pipeline__main vi-accordion__main" id="region-c846e5" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Park lomo 90's church-key biodiesel.</h3>
<p id="sg-b7325e">Pork belly direct trade put a bird on it ennui sustainable bicycle rights Mlkshk tacos distillery Helvetica marfa cred letterpress craft beer wes anderson kickstarter Drinking kinfolk messenger bag Brooklyn pabst green juice Scenester bespoke whatever pug Direct trade vinyl vinegar brooklyn 3 wolf moon 8 bit chillwave Lumbersexual you probably haven <a href="#sample">t heard</a> of them marfa vhs try hard loko bitters <a href="#sample">Austin kitsch</a> narwhal small batch next level crucifix hoodie Polaroid actually paleo shoreditch microdosing migas five dollar toast Cred tofu kale chips quinoa tote bag Pabst <a href="#sample">cornhole meggings</a> portland single origin coffee cray</p>
</div>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-6648d1">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-7c0d2b">Chambray brunch semiotics vhs 8-bit waistcoat slow-carb roof.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Pickled scenester knausgaard.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
crucifix
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
synth
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
XOXO
</li>
</ul>
<a aria-controls="region-516836" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-6648d1" role="button">
</a>
</div>
<div aria-labelledby="heading-7c0d2b" class="vi-accordion-pipeline__main vi-accordion__main" id="region-516836" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Keytar aesthetic cred mustache cardigan.</h3>
<p>Ennui park bicycle rights sartorial fashion <a href="#sample">axe umami</a> <a href="#sample">Swag bespoke</a> <a href="#sample">vegan goth</a> pork belly cred austin 90 s <a href="#sample">five dollar</a> <a href="#sample">toast migas</a> <a href="#sample">pop up</a> <a href="#sample">waistcoat bushwick</a> <a href="#sample">mumblecore Vinyl</a> stumptown yolo ethical loko next level <a href="#sample">street 3</a> wolf moon <a href="#sample">kickstarter chicharrones</a> Master kale chips cardigan brooklyn Brunch <a href="#sample">listicle lomo</a> seitan heirloom Brooklyn tousled 8 bit ramps Brunch <a href="#sample">yr readymade</a> migas tofu <a href="#sample">Tacos austin</a> typewriter microdosing kombucha tousled</p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Street cronut</a>
</div>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-5c56b4">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-c1c5db">brooklyn
chicharrones
</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Kinfolk pinterest heirloom.)
</span>
<p>Currently, there is no detailed content available for this drug.</p>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
irony
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
squid
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
chillwave
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
chartreuse
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
pitchfork
</li>
</ul>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-2d8a19">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-a9b656">Semiotics celiac freegan viral loko pug keytar heirloom.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Sriracha marfa chillwave.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
mlkshk
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
occupy
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
seitan
</li>
</ul>
<a aria-controls="region-c77361" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-2d8a19" role="button">
</a>
</div>
<div aria-labelledby="heading-a9b656" class="vi-accordion-pipeline__main vi-accordion__main" id="region-c77361" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Aesthetic squid kogi meditation.</h3>
<p>Semiotics tofu yolo dreamcatcher meggings Butcher bitters trust fund ennui vinegar actually sustainable Twee brooklyn keytar cleanse tattooed Sartorial helvetica blue bottle Neutra gastropub iphone Letterpress 3 wolf <a href="#sample">moon synth</a> Ramps selfies gastropub loko before they sold out ugh Meggings meditation celiac goth beard humblebrag Forage 8 bit cronut kinfolk viral fanny pack farm to table biodiesel Schlitz lo fi loko distillery</p>
<h3>Cred dreamcatcher stumptown lomo biodiesel.</h3>
<p>Cardigan drinking <a href="#sample">scenester gentrify</a> marfa artisan shoreditch Dreamcatcher austin microdosing gluten free wolf vice kitsch yolo Five dollar toast cray 3 wolf moon Authentic <a href="#sample">actually squid</a> bitters wolf Taxidermy aesthetic <a href="#sample">chartreuse Fashion</a> axe xoxo twee pabst irony tote bag Cliche direct trade try hard knausgaard yuccie cleanse food truck Tousled shabby chic cleanse hammock banjo scenester Goth small batch health <a href="#sample">vhs locavore</a> Try hard fingerstache hella</p>
<h3>Hella iphone occupy ramps.</h3>
<p>Cleanse tousled distillery tumblr quinoa slow carb Wayfarers jean shorts tattooed authentic carry banh mi Dreamcatcher mumblecore pork belly Wolf yuccie lo fi freegan lumbersexual ugh shabby chic leggings Pug <a href="#sample">godard helvetica hella</a> trust fund 8 bit Chartreuse organic aesthetic meh retro Neutra photo booth biodiesel selvage Brooklyn gastropub pitchfork raw denim Humblebrag food truck vhs vice meggings irony 1 shoreditch truffaut asymmetrical <a href="#sample">irony Photo booth</a> selfies biodiesel kickstarter Selfies pickled williamsburg drinking</p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Mixtape skateboard</a>
</div>
</div>
</div>
</div>The color of the whole component can be easily changed by changing a css variable
Swag drinking etsy sriracha.
Literally austin post ironic flexitarian dreamcatcher twee tacos Cold pressed goth church key offal neutra typewriter 8 bit Gluten free brooklyn tacos shabby chic pitchfork fanny pack Lomo listicle dreamcatcher 90 s forage Food truck bitters pbr b Venmo bitters cornhole next level disrupt ethical Tilde ethical selvage crucifix beard leggings sriracha 8 bit paleo chia iphone artisan literally chartreuse Carry pbr b muggle magic street disrupt five dollar toast master Single origin coffee skateboard chambray Authentic ramps brooklyn kitsch celiac health Hoodie twee heirloom organic small batch fashion axe leggings
Forage kogi truffaut ethical vice.
Knausgaard pabst brooklyn disrupt Aesthetic stumptown letterpress goth Blog organic master Blog kogi tousled organic Shabby chic drinking vinegar thundercats cliche deep v Messenger bag post ironic umami cardigan You probably haven t heard of them park narwhal goth cray yr direct trade occupy Meditation etsy semiotics venmo chillwave 1 retro muggle magic Selvage occupy distillery bushwick bicycle rights Echo gluten free selvage gentrify bicycle rights photo booth
Kitsch cronut portland tattooed.
Cold pressed organic vinyl Wayfarers tattooed kombucha Locavore plaid biodiesel squid street pinterest Cliche wayfarers vhs you probably haven t heard of them franzen cardigan lo fi Scenester raw denim etsy church key before they sold out Meggings 3 wolf moon locavore Godard authentic flannel street art party health Authentic cardigan brunch kale chips sartorial aesthetic lumbersexual ugh Aesthetic wolf brunch Everyday pop up cold pressed cardigan venmo shabby chic seitan leggings Irony 8 bit mlkshk poutine
Synth mumblecore church-key thundercats butcher.
Synth cleanse tumblr tilde chillwave lo fi Cliche kogi letterpress mixtape chartreuse organic Banh mi echo crucifix helvetica aesthetic Intelligentsia meggings cred salvia Chartreuse pbr b narwhal irony gentrify locavore put a bird on it Diy banjo goth cold pressed hoodie slow carb Craft beer post ironic listicle paleo Cold pressed cronut goth brooklyn pinterest locavore single origin coffee Scenester echo cardigan meh bitters yuccie Scenester disrupt gentrify lumbersexual seitan blog pug
Kickstarter whatever occupy normcore portland.
Park 8 bit ugh everyday etsy Next level migas artisan celiac everyday gastropub marfa lo fi Locavore squid cardigan mustache keytar Kale chips beard cleanse master hammock Next level direct trade neutra portland kitsch Photo booth wayfarers blue bottle kinfolk semiotics Offal chia small batch cardigan you probably haven t heard of them Street crucifix health diy Retro pork belly direct trade Vegan lomo yr xoxo disrupt cornhole direct trade dreamcatcher
Plaid etsyoccupy franzen
(Hoodie bushwick gastropub.)Currently, there is no detailed content available for this drug.
Farm-to-table authentic narwhal normcore.
Carry everyday drinking jean shorts keffiyeh loko brooklyn Pork belly messenger bag pickled Kale chips helvetica whatever Cardigan wes anderson fixie bitters 8 bit freegan vice viral wolf Authentic literally waistcoat cornhole cliche irony Flannel flexitarian migas Etsy yr blog bespoke Pinterest gluten free fingerstache vinegar street cornhole ennui actually Asymmetrical hashtag keytar pbr b goth fixie thundercats sartorial
Whatever umami forage humblebrag.
Cornhole marfa etsy flexitarian health austin poutine Godard trust fund everyday Vice chia literally echo five dollar toast bushwick yr vinegar Ugh park before they sold out pickled drinking 1 portland lomo Wolf selvage gentrify etsy Chicharrones normcore selvage 3 wolf moon photo booth Truffaut cleanse banh mi Xoxo roof 3 wolf moon pork belly post ironic cardigan Put a bird on it synth bushwick authentic literally Vhs muggle magic kinfolk wolf Paleo yuccie mixtape photo booth stumptown fixie
Stumptown marfa synth asymmetrical.
Polaroid pbr b disrupt yolo wolf asymmetrical messenger bag Godard single origin coffee occupy pork belly street iphone organic Iphone mumblecore kale chips cardigan forage Poutine 1 viral cold pressed vinyl five dollar toast readymade Direct trade green juice bespoke raw denim shabby chic tattooed tofu Readymade gentrify austin tousled jean shorts chia Semiotics skateboard ennui health pbr b tumblr You probably haven t heard of them raw denim shabby chic tumblr lomo art party portland diy Tousled occupy hella you probably haven t heard of them humblebrag ennui schlitz keffiyeh Bushwick asymmetrical iphone Selfies echo paleo Before they sold out pop up cardigan williamsburg microdosing pug
Iphone squid<!-- Accordion type: pipeline -->
<div class="vi-accordion-pipeline vi-accordion" data-autoclose="true" style="--vi-accordion-pipeline-base-color: red">
<div class="is-active vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-38ceea">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-ea1b40">Hammock twee echo tattooed meggings flannel lo-fi kogi.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Polaroid brooklyn pop-up.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
chambray
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
skateboard
</li>
</ul>
<a aria-controls="region-3d5edc" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-38ceea" role="button">
</a>
</div>
<div aria-labelledby="heading-ea1b40" class="vi-accordion-pipeline__main vi-accordion__main" id="region-3d5edc" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Swag drinking etsy sriracha.</h3>
<p id="sg-03cd7d">Literally austin post ironic flexitarian dreamcatcher twee tacos Cold pressed goth church key offal neutra typewriter 8 bit Gluten free brooklyn tacos shabby chic pitchfork fanny pack Lomo listicle dreamcatcher 90 s forage Food truck bitters pbr b Venmo bitters cornhole next level disrupt ethical Tilde ethical selvage crucifix beard leggings sriracha 8 bit paleo chia <a href="#sample">iphone artisan</a> literally chartreuse Carry pbr b muggle magic street disrupt five dollar toast master Single origin coffee skateboard chambray Authentic ramps brooklyn kitsch celiac health Hoodie twee heirloom organic small batch fashion axe leggings</p>
</div>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-425a65">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-bed63d">Cornhole keffiyeh gastropub beard semiotics actually chambray pop-up.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Leggings tattooed ugh.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
slow-carb
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
gastropub
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
vice
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
intelligentsia
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
chambray
</li>
</ul>
<a aria-controls="region-d0324c" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-425a65" role="button">
</a>
</div>
<div aria-labelledby="heading-bed63d" class="vi-accordion-pipeline__main vi-accordion__main" id="region-d0324c" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Forage kogi truffaut ethical vice.</h3>
<p id="sg-2b078b">Knausgaard pabst brooklyn disrupt Aesthetic stumptown letterpress goth Blog organic master Blog kogi tousled organic Shabby chic drinking vinegar thundercats cliche deep v Messenger bag post ironic umami cardigan You <a href="#sample">probably haven</a> t heard of them park narwhal goth cray yr direct trade occupy Meditation etsy semiotics venmo chillwave 1 retro muggle magic Selvage occupy distillery bushwick bicycle rights Echo gluten free selvage gentrify bicycle rights photo booth</p>
</div>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-c0b174" style="--vi-accordion-pipeline-base-color: blue">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-de2bd6">Biodiesel narwhal fingerstache ugh aesthetic carry beard poutine.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Pickled mixtape gentrify.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
health
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
offal
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
lo-fi
</li>
</ul>
<a aria-controls="region-10d851" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-c0b174" role="button">
</a>
</div>
<div aria-labelledby="heading-de2bd6" class="vi-accordion-pipeline__main vi-accordion__main" id="region-10d851" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Kitsch cronut portland tattooed.</h3>
<p>Cold pressed organic vinyl Wayfarers tattooed kombucha Locavore plaid biodiesel squid street pinterest Cliche wayfarers vhs you probably haven t heard of them franzen cardigan lo fi Scenester raw denim etsy church key before they sold out Meggings 3 wolf moon locavore Godard authentic flannel street art party health Authentic cardigan brunch kale chips <a href="#sample">sartorial aesthetic</a> lumbersexual ugh Aesthetic wolf brunch Everyday pop up cold pressed cardigan venmo shabby chic seitan leggings Irony 8 bit mlkshk poutine</p>
<h3>Synth mumblecore church-key thundercats butcher.</h3>
<p>Synth cleanse tumblr tilde chillwave lo fi Cliche kogi letterpress mixtape chartreuse organic Banh mi echo crucifix helvetica aesthetic Intelligentsia meggings cred salvia Chartreuse pbr b narwhal irony gentrify locavore put a bird on it Diy banjo goth cold pressed hoodie slow <a href="#sample">carb Craft beer</a> post ironic listicle paleo Cold pressed cronut goth brooklyn pinterest locavore single origin coffee Scenester echo cardigan meh bitters yuccie Scenester disrupt gentrify lumbersexual seitan blog pug</p>
<h3>Kickstarter whatever occupy normcore portland.</h3>
<p>Park 8 bit ugh everyday etsy Next level migas artisan celiac everyday gastropub marfa lo fi Locavore squid <a href="#sample">cardigan mustache keytar</a> Kale chips beard cleanse master hammock Next level direct trade neutra portland kitsch Photo booth wayfarers blue bottle kinfolk semiotics Offal chia small batch cardigan you probably haven t heard of them Street <a href="#sample">crucifix health diy</a> Retro pork belly direct trade Vegan lomo yr xoxo disrupt cornhole direct trade dreamcatcher</p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Plaid etsy</a>
</div>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-a48ca1">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-8382d7">occupy
franzen
</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Hoodie bushwick gastropub.)
</span>
<p>Currently, there is no detailed content available for this drug.</p>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
phlogiston
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
cred
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
artisan
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
cold-pressed
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
keytar
</li>
</ul>
</div>
</div>
<div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-52274d">
<div class="vi-accordion-pipeline__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
<h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-3420a7">Vhs williamsburg plaid cronut bitters master heirloom intelligentsia.</h4>
<span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
(Chambray flexitarian tofu.)
</span>
</div>
<ul class="vi-accordion-pipeline__tags vi-accordion__tags">
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
slow-carb
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
heirloom
</li>
<li class="vi-accordion-pipeline__tag vi-accordion__tag">
humblebrag
</li>
</ul>
<a aria-controls="region-c6e916" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-52274d" role="button">
</a>
</div>
<div aria-labelledby="heading-3420a7" class="vi-accordion-pipeline__main vi-accordion__main" id="region-c6e916" role="region">
<div class="vi-accordion-pipeline__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Farm-to-table authentic narwhal normcore.</h3>
<p>Carry everyday drinking jean shorts keffiyeh loko brooklyn Pork belly <a href="#sample">messenger bag</a> pickled Kale chips helvetica whatever Cardigan <a href="#sample">wes anderson</a> fixie bitters <a href="#sample">8 bit</a> freegan vice viral wolf Authentic literally waistcoat cornhole <a href="#sample">cliche irony</a> Flannel flexitarian migas Etsy yr blog bespoke Pinterest gluten free <a href="#sample">fingerstache vinegar</a> street cornhole <a href="#sample">ennui actually</a> Asymmetrical hashtag keytar pbr b goth <a href="#sample">fixie thundercats</a> <a href="#sample">sartorial</a></p>
<h3>Whatever umami forage humblebrag.</h3>
<p>Cornhole marfa <a href="#sample">etsy flexitarian</a> health austin <a href="#sample">poutine Godard</a> trust fund <a href="#sample">everyday Vice</a> <a href="#sample">chia literally</a> echo five dollar toast <a href="#sample">bushwick yr</a> vinegar Ugh <a href="#sample">park before</a> <a href="#sample">they sold</a> <a href="#sample">out pickled</a> drinking 1 portland lomo Wolf selvage <a href="#sample">gentrify etsy</a> Chicharrones normcore <a href="#sample">selvage 3</a> <a href="#sample">wolf moon</a> photo booth Truffaut cleanse banh mi Xoxo roof <a href="#sample">3 wolf</a> moon pork belly post ironic cardigan <a href="#sample">Put a</a> bird on it synth bushwick authentic <a href="#sample">literally Vhs</a> muggle magic <a href="#sample">kinfolk wolf</a> Paleo yuccie mixtape photo booth stumptown fixie</p>
<h3>Stumptown marfa synth asymmetrical.</h3>
<p>Polaroid pbr b disrupt yolo wolf asymmetrical messenger bag Godard single origin coffee occupy pork belly street iphone organic Iphone mumblecore kale chips cardigan forage Poutine 1 viral cold pressed vinyl five dollar toast readymade Direct trade green juice <a href="#sample">bespoke raw denim</a> shabby chic tattooed tofu Readymade gentrify austin tousled jean <a href="#sample">shorts chia Semiotics</a> skateboard ennui health pbr b tumblr You probably haven t heard of them raw denim shabby chic tumblr lomo art party portland diy Tousled occupy hella you probably haven t heard of them humblebrag ennui schlitz keffiyeh Bushwick asymmetrical iphone Selfies echo paleo Before they sold out pop up cardigan williamsburg microdosing pug</p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Iphone squid</a>
</div>
</div>
</div>
</div>External Controls #
For all accordion types external "Expand all" / "Collapse all" controls can be applied.
The controls are basically just links with following attributes:
hrefpoints to ID of the accordion.aria-accordion-expand-all="true"for 'Expand all' links.aria-accordion-collapse-all="true"for 'Collapse all' links.aria-labelis advisable.
Please note that data-autoclose should be false. So autoclose is disabled when using controls.
Normcore dreamcatcher pop-up 8-bit thundercats semiotics diy migas.
Toggle
Normcore dreamcatcher pop-up 8-bit thundercats semiotics diy migas.
Tousled post-ironic schlitz slow-carb authentic.
Etsy single origin coffee jean shorts scenester godard hella cornhole Park venmo jean shorts drinking fingerstache ennui swag deep v Cronut tote bag small batch typewriter skateboard Kale chips letterpress diy viral Venmo locavore migas kogi vhs keffiyeh thundercats roof Semiotics sustainable squid cliche meditation scenester tofu Flexitarian cold pressed williamsburg tousled swag Polaroid freegan jean shorts synth Swag five dollar toast goth fanny pack Diy humblebrag marfa brooklyn church key tote bag mixtape viral Ugh offal distillery actually Thundercats muggle magic roof direct trade
Carry thundercats vegan lumbersexual artisan.
Salvia organic master put a bird on it iphone migas Twee austin photo booth gluten free iphone fixie tofu chicharrones Roof kinfolk carry crucifix shoreditch freegan Direct trade knausgaard cronut paleo blue bottle chicharrones sriracha Distillery pickled skateboard salvia slow carb chambray Listicle blog squid celiac authentic Normcore pug kale chips pinterest cornhole twee brooklyn Meggings tote bag meditation lumbersexual ethical swag banjo Single origin coffee disrupt occupy polaroid everyday deep v shabby chic retro Tilde cornhole ennui Humblebrag shoreditch kinfolk yuccie normcore fixie
Cardigan cray humblebrag retro celiac brooklyn farm-to-table xoxo.
Toggle
Cardigan cray humblebrag retro celiac brooklyn farm-to-table xoxo.
Pinterest twee cray narwhal.
Tofu vinegar beard 1 park roof Kombucha pour over before they sold out ennui roof pop up Vice mixtape bespoke kombucha street flannel roof tilde Waistcoat chartreuse everyday tattooed Pinterest neutra tacos ethical yr viral Blog sartorial chambray knausgaard pickled tattooed Trust fund brunch seitan health Cray chambray 90 s aesthetic tumblr wes anderson Lumbersexual vinyl portland leggings put a bird on it shabby chic chillwave blog
Pitchfork kombucha yr 90's.
Asymmetrical food truck phlogiston pbr b scenester artisan aesthetic bicycle rights Tacos wayfarers offal polaroid etsy next level cold pressed Twee williamsburg hella chartreuse goth 90 s gastropub pickled Authentic vhs muggle magic shoreditch Mlkshk franzen tofu Diy muggle magic single origin coffee tousled try hard narwhal Selvage mlkshk lomo ethical poutine Food truck kombucha small batch blue bottle yr Microdosing put a bird on it listicle fanny pack hoodie try hard pork belly tilde Beard scenester art party narwhal mumblecore
Viral asymmetrical hoodie master.
Mixtape master selvage brunch slow carb Butcher hoodie echo messenger bag 90 s celiac pabst hella Health cliche shabby chic bespoke kinfolk Cliche yuccie occupy chicharrones Whatever pour over photo booth church key williamsburg keffiyeh pickled cray Banjo crucifix hoodie skateboard shoreditch polaroid Brunch photo booth twee selvage literally cold pressed Craft beer seitan ethical disrupt mixtape carry lo fi Mixtape paleo wayfarers Shoreditch cred pitchfork before they sold out leggings mlkshk craft beer Meggings aesthetic cray stumptown echo Wes anderson etsy bicycle rights meh butcher vhs poutine
Diy 90's godard fingerstache tattooed iphone cleanse etsy.
Toggle
Diy 90's godard fingerstache tattooed iphone cleanse etsy.
Literally seitan cred meh.
Whatever taxidermy semiotics Pork belly trust fund lumbersexual lo fi truffaut you probably haven t heard of them Park street cardigan chia pabst pug artisan Art party muggle magic gluten free tattooed Street neutra selvage venmo Tacos flannel normcore vinegar kogi blog distillery selvage Fashion axe meh carry chia crucifix intelligentsia pop up semiotics Hammock artisan you probably haven t heard of them farm to table ramps austin cliche Authentic pabst meh chillwave schlitz whatever selfies Street crucifix shabby chic
Phlogiston mumblecore readymade chambray cronut.
Paleo yuccie sustainable slow carb messenger bag brunch sriracha fingerstache Pinterest yr direct trade gastropub deep v church key bushwick dreamcatcher Church key gentrify blog five dollar toast Actually organic trust fund kickstarter pitchfork neutra Fanny pack street meditation neutra twee flannel bushwick wayfarers Dreamcatcher letterpress forage migas Chambray bespoke tote bag listicle selvage portland photo booth next level Sustainable locavore phlogiston knausgaard actually cred small batch swag Thundercats chicharrones deep v williamsburg Lomo scenester single origin coffee squid Wolf phlogiston sriracha cray normcore typewriter fixie chillwave Selfies bitters wes anderson squid mixtape tousled
Hoodie carryGodard vinyl post-ironic mlkshk offal tilde aesthetic kinfolk.
Toggle
Godard vinyl post-ironic mlkshk offal tilde aesthetic kinfolk.
Butcher disrupt brooklyn williamsburg schlitz bespoke xoxo +1 typewriter paleo retro vice mlkshk kitsch authentic.
Biodiesel meditation williamsburg schlitz kickstarter helvetica cray vegan.
Toggle
Biodiesel meditation williamsburg schlitz kickstarter helvetica cray vegan.
Polaroid stumptown 8-bit selfies actually listicle ugh twee ennui hammock chartreuse kitsch ramps disrupt wolf.
Bitters occupy locavore flexitarian austin mumblecore twee gentrify.
Toggle
Bitters occupy locavore flexitarian austin mumblecore twee gentrify.
Seitan cornhole mlkshk tacos irony disrupt Messenger bag banjo photo booth waistcoat Photo booth cronut flannel 8 bit chicharrones dreamcatcher whatever Biodiesel ennui tofu heirloom wayfarers cleanse food truck jean shorts Flexitarian shabby chic yolo retro chillwave Freegan listicle deep v mustache shoreditch Plaid portland jean shorts pitchfork Poutine biodiesel thundercats vinyl Slow carb beard letterpress tattooed Brooklyn bushwick tilde food truck offal Cred yr photo booth freegan
Godard master<div class="d-flex justify-content-between text-muted vi-type vi-type--text-small mb-10">
<div class="ml-auto">
<!-- .text-accent-2 used to align with design requirements -->
<a aria-accordion-expand-all="true" aria-label="Expand all accordion items" class="text-decoration-none text-accent-2" href="#sg-ac3156" role="button">
Expand all
</a>
/
<!-- .text-accent-2 used to align with design requirements -->
<a aria-accordion-collapse-all="true" aria-label="Collapse all accordion items" class="text-decoration-none text-accent-2" href="#sg-ac3156" role="button">
Collapse all
</a>
</div>
</div>
<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="false" id="sg-ac3156">
<div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-78c989">
<div class="vi-accordion-content__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-a9e882">Normcore dreamcatcher pop-up 8-bit thundercats semiotics diy migas.</h4>
<a aria-controls="region-e61323" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-78c989" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Normcore dreamcatcher pop-up 8-bit thundercats semiotics diy migas.</span></div>
</a>
</div>
<div aria-labelledby="heading-a9e882" class="vi-accordion-content__main vi-accordion__main" id="region-e61323" role="region">
<div class="vi-accordion-content__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Tousled post-ironic schlitz slow-carb authentic.</h3>
<p id="sg-d39725"><a href="#sample">Etsy single</a> origin coffee <a href="#sample">jean shorts</a> scenester godard hella cornhole Park venmo jean shorts drinking fingerstache ennui swag deep v Cronut tote bag small <a href="#sample">batch typewriter</a> skateboard Kale chips letterpress diy viral Venmo locavore migas kogi vhs keffiyeh thundercats roof Semiotics sustainable squid cliche <a href="#sample">meditation scenester</a> <a href="#sample">tofu Flexitarian</a> <a href="#sample">cold pressed</a> williamsburg tousled swag Polaroid freegan jean shorts synth <a href="#sample">Swag five</a> dollar toast goth fanny pack Diy <a href="#sample">humblebrag marfa</a> brooklyn church key tote bag mixtape viral Ugh offal distillery actually Thundercats muggle magic roof direct trade</p>
<h3>Carry thundercats vegan lumbersexual artisan.</h3>
<p>Salvia organic master put <a href="#sample">a bird</a> on it iphone migas Twee austin photo booth gluten free <a href="#sample">iphone fixie</a> <a href="#sample">tofu chicharrones</a> Roof kinfolk <a href="#sample">carry crucifix</a> <a href="#sample">shoreditch freegan</a> <a href="#sample">Direct trade</a> knausgaard cronut paleo blue bottle chicharrones sriracha Distillery pickled skateboard salvia slow carb chambray Listicle blog squid celiac <a href="#sample">authentic Normcore</a> <a href="#sample">pug kale</a> chips pinterest cornhole twee brooklyn Meggings tote bag <a href="#sample">meditation lumbersexual</a> ethical swag banjo Single <a href="#sample">origin coffee</a> disrupt occupy <a href="#sample">polaroid everyday</a> deep v shabby chic retro Tilde <a href="#sample">cornhole ennui</a> Humblebrag shoreditch <a href="#sample">kinfolk yuccie</a> normcore fixie</p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-063a15">
<div class="vi-accordion-content__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-b77de4">Cardigan cray humblebrag retro celiac brooklyn farm-to-table xoxo.</h4>
<a aria-controls="region-5dae0a" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-063a15" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Cardigan cray humblebrag retro celiac brooklyn farm-to-table xoxo.</span></div>
</a>
</div>
<div aria-labelledby="heading-b77de4" class="vi-accordion-content__main vi-accordion__main" id="region-5dae0a" role="region">
<div class="vi-accordion-content__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Pinterest twee cray narwhal.</h3>
<p id="sg-a2970e"><a href="#sample">Tofu vinegar</a> beard 1 <a href="#sample">park roof</a> Kombucha pour over before they sold <a href="#sample">out ennui</a> <a href="#sample">roof pop</a> <a href="#sample">up Vice</a> mixtape bespoke kombucha street flannel roof tilde Waistcoat chartreuse everyday tattooed Pinterest neutra tacos ethical yr viral Blog sartorial chambray knausgaard pickled tattooed Trust fund brunch seitan health Cray chambray 90 s aesthetic tumblr wes anderson Lumbersexual vinyl portland leggings put a bird on it shabby chic chillwave blog</p>
<h3>Pitchfork kombucha yr 90's.</h3>
<p>Asymmetrical food truck phlogiston pbr b scenester artisan aesthetic bicycle <a href="#sample">rights Tacos</a> wayfarers offal <a href="#sample">polaroid etsy</a> next level <a href="#sample">cold pressed</a> Twee williamsburg hella chartreuse goth 90 s gastropub pickled Authentic vhs muggle magic shoreditch Mlkshk franzen tofu Diy <a href="#sample">muggle magic</a> single origin coffee tousled try hard narwhal Selvage mlkshk lomo ethical poutine Food truck <a href="#sample">kombucha small</a> batch blue bottle yr Microdosing put a bird on it listicle fanny pack hoodie try hard pork belly tilde Beard scenester art party narwhal mumblecore</p>
<h3>Viral asymmetrical hoodie master.</h3>
<p>Mixtape master selvage brunch slow carb Butcher hoodie echo messenger bag 90 s celiac pabst hella Health cliche shabby chic bespoke kinfolk Cliche yuccie <a href="#sample">occupy chicharrones Whatever</a> pour over photo booth church key williamsburg keffiyeh pickled cray Banjo crucifix hoodie skateboard shoreditch polaroid Brunch photo booth twee selvage <a href="#sample">literally cold pressed</a> Craft beer seitan <a href="#sample">ethical disrupt mixtape</a> carry lo fi Mixtape paleo wayfarers Shoreditch cred pitchfork before they sold out leggings mlkshk craft beer Meggings aesthetic cray stumptown echo Wes anderson <a href="#sample">etsy bicycle rights</a> meh butcher vhs poutine</p>
</div>
</div>
</div>
<div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-8c0627">
<div class="vi-accordion-content__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-content__title vi-accordion__title" id="heading-1768a1">Diy 90's godard fingerstache tattooed iphone cleanse etsy.</h4>
<a aria-controls="region-08c024" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-8c0627" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Diy 90's godard fingerstache tattooed iphone cleanse etsy.</span></div>
</a>
</div>
<div aria-labelledby="heading-1768a1" class="vi-accordion-content__main vi-accordion__main" id="region-08c024" role="region">
<div class="vi-accordion-content__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<h3>Literally seitan cred meh.</h3>
<p><a href="#sample">Whatever taxidermy semiotics</a> Pork belly trust fund lumbersexual lo fi truffaut you probably haven t heard of them Park street cardigan chia pabst pug <a href="#sample">artisan Art party</a> muggle magic gluten free tattooed Street neutra selvage venmo Tacos flannel normcore vinegar kogi blog distillery selvage Fashion axe meh carry chia crucifix intelligentsia pop up semiotics Hammock artisan you probably haven t heard of them farm to table ramps austin cliche Authentic pabst meh <a href="#sample">chillwave schlitz whatever</a> selfies Street crucifix shabby chic</p>
<h3>Phlogiston mumblecore readymade chambray cronut.</h3>
<p>Paleo yuccie sustainable slow carb messenger bag brunch <a href="#sample">sriracha fingerstache</a> Pinterest yr direct trade <a href="#sample">gastropub deep</a> v church key bushwick dreamcatcher Church <a href="#sample">key gentrify</a> blog five dollar toast Actually organic <a href="#sample">trust fund</a> kickstarter pitchfork neutra Fanny pack street <a href="#sample">meditation neutra</a> <a href="#sample">twee flannel</a> bushwick wayfarers Dreamcatcher letterpress forage migas Chambray bespoke <a href="#sample">tote bag</a> <a href="#sample">listicle selvage</a> portland photo booth next <a href="#sample">level Sustainable</a> locavore phlogiston <a href="#sample">knausgaard actually</a> cred small batch swag Thundercats chicharrones deep v williamsburg Lomo scenester single origin coffee squid Wolf phlogiston sriracha cray normcore typewriter fixie chillwave Selfies bitters wes anderson squid <a href="#sample">mixtape tousled</a></p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Hoodie carry</a>
</div>
</div>
</div>
</div>
<hr>
<div class="d-flex justify-content-between text-muted vi-type vi-type--text-small mb-10">
<div class="ml-auto">
<!-- .text-accent-2 used to align with design requirements -->
<a aria-accordion-expand-all="true" aria-label="Expand all accordion items" class="text-decoration-none text-accent-2" href="#sg-5923be" role="button">
Expand all
</a>
/
<!-- .text-accent-2 used to align with design requirements -->
<a aria-accordion-collapse-all="true" aria-label="Collapse all accordion items" class="text-decoration-none text-accent-2" href="#sg-5923be" role="button">
Collapse all
</a>
</div>
</div>
<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion" data-autoclose="false" id="sg-5923be">
<div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-d4d0a3">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-d492b2">Godard vinyl post-ironic mlkshk offal tilde aesthetic kinfolk.</h4>
<a aria-controls="region-878585" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-d4d0a3" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Godard vinyl post-ironic mlkshk offal tilde aesthetic kinfolk.</span></div>
</a>
</div>
<div aria-labelledby="heading-d492b2" class="vi-accordion-refine__main vi-accordion__main" id="region-878585" role="region">
<div class="vi-accordion-refine__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<p>Butcher disrupt brooklyn williamsburg schlitz bespoke xoxo +1 typewriter paleo retro vice mlkshk kitsch authentic.</p>
</div>
</div>
</div>
<div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-841ba6">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-83e320">Biodiesel meditation williamsburg schlitz kickstarter helvetica cray vegan.</h4>
<a aria-controls="region-951aed" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-841ba6" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Biodiesel meditation williamsburg schlitz kickstarter helvetica cray vegan.</span></div>
</a>
</div>
<div aria-labelledby="heading-83e320" class="vi-accordion-refine__main vi-accordion__main" id="region-951aed" role="region">
<div class="vi-accordion-refine__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<p>Polaroid stumptown 8-bit selfies actually listicle ugh twee ennui hammock chartreuse kitsch ramps disrupt wolf.</p>
</div>
</div>
</div>
<div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-dc1c96">
<div class="vi-accordion-refine__header vi-accordion__header">
<!-- Use h1-h6 depending page hierarchy -->
<h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-95ba42">Bitters occupy locavore flexitarian austin mumblecore twee gentrify.</h4>
<a aria-controls="region-6765cd" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-dc1c96" role="button">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
Bitters occupy locavore flexitarian austin mumblecore twee gentrify.</span></div>
</a>
</div>
<div aria-labelledby="heading-95ba42" class="vi-accordion-refine__main vi-accordion__main" id="region-6765cd" role="region">
<div class="vi-accordion-refine__content vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
<p>Seitan cornhole mlkshk tacos irony disrupt Messenger bag banjo photo <a href="#sample">booth waistcoat</a> Photo booth cronut flannel 8 bit chicharrones dreamcatcher whatever Biodiesel ennui tofu heirloom wayfarers cleanse food truck jean shorts Flexitarian shabby chic yolo retro chillwave Freegan <a href="#sample">listicle deep</a> v mustache shoreditch Plaid portland jean shorts pitchfork Poutine biodiesel thundercats vinyl Slow carb beard letterpress tattooed Brooklyn bushwick tilde food truck offal Cred yr photo booth freegan</p>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Godard master</a>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
JavaScript #
The following javascript is required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 31 Mar 2025 - fix(accordion): icon sizing and spacing on mobile and desktop
- 05 Mar 2025 - fix(accordion): adjust scrollIntoView to center the element
- 24 Feb 2025 - fix(accordion): ensure boolean values for active state checks
- 16 Dec 2024 - fix(accordion): increase header padding according design.
- 17 May 2024 - Preserve query and hash with replace to fix multiple browser back button clicks needed to go back.
- 06 Feb 2023 - Removed replacing history state to adding the state of the accordion to fix query being removed when using accordion.
- 10 May 2023 - Button focus outline visible on accordion trigger.
- 03 Mar 2023 - Expand / Collapse buttons, when “inactive”, still clickable
- 11 Aug 2022 - Fix overlap title and button.
- 10 Aug 2022 - Fix open close icon when used in modal.
- Escape meta characters in url fragment.
- Incorrect icon state (+/-) on keyboard navigation
- Incorrect icon state (+/-) when opened by #hash link
- Regression introduced by accessibility changes where the item is not opening automatically
Please note that Timeline Era needs to update the css,
as it depends on the Accordion
Changed
- 16 Nov 2023 - Add ability to use icon or image next to title of Content Accordion
- 28 Jun 2022 - Add modifier
--transscript to Accordion type refine
- 20 Jun 2022 - CSS change to easier allow color variations on refine variation
- Do not act on hash links when not explicitly set to do so.
- Extended BPS support to refine variation
- A11y Add
role="button" to element a.vi-accordion__trigger
- CSS Optimized for print.
- Print: css adjustments
- Ensure no animation on component initiation.
- Accessibility: Expandable and collapsible regions
- Clarify documentation on autoclose.
Added
- 25 Apr 2025 - feat(accordion): add data-disable-hash-change option
- 17 Dec 2024 - feat(accordion): add item-without-content item and styles
- 22 Nov 2024 - feat(accordion): allow to target content of accordion with hash link
- Support for external controls
- PBS support
- RTL support
- Example of accordion with a button.
- Initial draft