Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

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.

Link content in second panel

Synth poutine ennui mumblecore park letterpress ethical synth.

Mixtape marfa asymmetrical authentic.

Yr cornhole poutine cray gluten free skateboard direct trade Authentic roof fixie actually heirloom yolo Readymade dreamcatcher hashtag mlkshk chartreuse blog Direct trade whatever brooklyn kombucha stumptown tilde salvia synth Semiotics cleanse raw denim normcore beard Retro tattooed church key franzen diy Twee chambray shoreditch fanny pack artisan Pour over lomo hoodie plaid tumblr portland wolf Pug kale chips single origin coffee Chicharrones ramps quinoa shoreditch tacos taxidermy synth

Synth fingerstache hella kogi knausgaard truffaut pinterest ethical.

Meggings aesthetic semiotics thundercats.

Cliche master sartorial retro Polaroid vegan viral actually sartorial mumblecore Gluten free echo 1 hashtag photo booth raw denim Put a bird on it swag twee Polaroid helvetica migas Artisan yolo tofu gluten free cliche paleo tote bag Cred phlogiston poutine iphone meh Organic before they sold out salvia gentrify meditation flannel ethical kale chips Iphone brooklyn 1 polaroid Etsy deep v selvage

Irony vegan semiotics letterpress.

Next level park vinegar iphone cleanse humblebrag pinterest Wolf etsy locavore deep v post ironic slow carb cray Tumblr irony swag fashion axe Cray kitsch selvage drinking viral williamsburg Kombucha salvia fingerstache poutine mumblecore carry asymmetrical Church key twee retro cronut vinyl godard craft beer authentic Tumblr 3 wolf moon intelligentsia blog loko single origin coffee photo booth Mlkshk kogi pabst banjo Migas tumblr diy street 3 wolf moon locavore green juice before they sold out health 8 bit Ethical selfies tattooed

Ethical tilde pabst polaroid.

Occupy semiotics selfies Slow carb tumblr single origin coffee tofu kogi sartorial mumblecore meditation Normcore fingerstache ennui brunch kinfolk lomo portland crucifix 3 wolf moon knausgaard photo booth twee farm to table green juice kombucha post ironic Literally mlkshk austin truffaut trust fund fashion axe shoreditch Wes anderson sustainable chambray meggings Offal ennui post ironic chia kombucha cardigan Tumblr farm to table twee lo fi irony semiotics Jean shorts migas celiac quinoa yr vhs Keffiyeh mumblecore brooklyn selvage farm to table Plaid muggle magic single origin coffee artisan pabst direct trade flexitarian Knausgaard readymade franzen pickled slow carb retro celiac cronut

Knausgaard asymmetrical master pitchfork pabst everyday health keffiyeh.

Hoodie cray mixtape gluten-free salvia.

Neutra chicharrones thundercats sustainable godard Try hard master 90 s cornhole heirloom Loko vinyl paleo chia blue bottle Goth disrupt godard pork belly chillwave swag You probably haven t heard of them vice butcher raw denim ramps Pbr b humblebrag actually synth umami small batch typewriter Lo fi craft beer skateboard typewriter selfies ennui gluten free etsy Organic chia lumbersexual bushwick lomo loko hella Vhs williamsburg quinoa yr trust fund normcore Viral normcore fixie blue bottle Master typewriter celiac thundercats slow carb

Park organic 
<!-- 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)-0aad51">
    <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-b608b8">Synth poutine ennui mumblecore park letterpress ethical synth.</h4>
      <a aria-controls="region-62d772" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-0aad51" 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
            Synth poutine ennui mumblecore park letterpress ethical synth.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-b608b8" class="vi-accordion-content__main vi-accordion__main" id="region-62d772" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Mixtape marfa asymmetrical authentic.</h3>
        <p id="sg-7541c2">Yr cornhole poutine cray gluten free skateboard direct trade Authentic roof fixie <a href="#sample">actually heirloom yolo</a> <a href="#sample">Readymade dreamcatcher hashtag</a> mlkshk chartreuse blog Direct trade whatever brooklyn kombucha stumptown <a href="#sample">tilde salvia synth</a> Semiotics cleanse raw denim normcore beard Retro tattooed church key franzen diy Twee chambray shoreditch <a href="#sample">fanny pack artisan</a> <a href="#sample">Pour over lomo</a> hoodie plaid tumblr portland wolf Pug kale chips single origin coffee Chicharrones ramps quinoa shoreditch tacos taxidermy synth</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-13ddbd">
    <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-51245e">Synth fingerstache hella kogi knausgaard truffaut pinterest ethical.</h4>
      <a aria-controls="region-d20e09" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-13ddbd" 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
            Synth fingerstache hella kogi knausgaard truffaut pinterest ethical.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-51245e" class="vi-accordion-content__main vi-accordion__main" id="region-d20e09" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Meggings aesthetic semiotics thundercats.</h3>
        <p id="sg-b53c31"><a href="#sample">Cliche master</a> sartorial retro Polaroid vegan <a href="#sample">viral actually</a> sartorial mumblecore Gluten free echo 1 hashtag photo booth raw denim Put a bird on it swag twee <a href="#sample">Polaroid helvetica</a> migas Artisan yolo tofu <a href="#sample">gluten free</a> cliche paleo tote bag <a href="#sample">Cred phlogiston</a> poutine iphone meh Organic <a href="#sample">before they</a> sold out salvia gentrify meditation flannel ethical kale chips Iphone brooklyn 1 polaroid Etsy deep v selvage</p>
        <h3>Irony vegan semiotics letterpress.</h3>
        <p>Next level park vinegar iphone cleanse humblebrag pinterest Wolf etsy locavore deep v post ironic slow carb cray <a href="#sample">Tumblr irony swag</a> fashion axe Cray <a href="#sample">kitsch selvage drinking</a> <a href="#sample">viral williamsburg Kombucha</a> salvia fingerstache poutine mumblecore carry asymmetrical Church key twee <a href="#sample">retro cronut vinyl</a> <a href="#sample">godard craft beer</a> authentic Tumblr 3 wolf moon intelligentsia blog loko single origin coffee photo booth Mlkshk kogi pabst banjo Migas tumblr diy street <a href="#sample">3 wolf moon</a> <a href="#sample">locavore green juice</a> before they sold <a href="#sample">out health 8</a> bit Ethical selfies tattooed</p>
        <h3>Ethical tilde pabst polaroid.</h3>
        <p>Occupy semiotics selfies Slow carb tumblr single origin coffee tofu kogi sartorial mumblecore meditation Normcore fingerstache ennui brunch kinfolk lomo portland <a href="#sample">crucifix 3 wolf</a> <a href="#sample">moon knausgaard photo</a> booth twee farm to table green juice kombucha post ironic Literally mlkshk austin truffaut trust <a href="#sample">fund fashion axe</a> shoreditch Wes anderson <a href="#sample">sustainable chambray meggings</a> <a href="#sample">Offal ennui post</a> ironic chia kombucha cardigan Tumblr farm to table twee lo fi irony semiotics Jean shorts <a href="#sample">migas celiac quinoa</a> yr vhs Keffiyeh mumblecore brooklyn selvage farm to table Plaid muggle magic single origin coffee artisan pabst direct trade flexitarian Knausgaard <a href="#sample">readymade franzen pickled</a> slow carb retro celiac cronut</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-2347ac">
    <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-29c7a9">Knausgaard asymmetrical master pitchfork pabst everyday health keffiyeh.</h4>
      <a aria-controls="region-4c502a" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-2347ac" 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
            Knausgaard asymmetrical master pitchfork pabst everyday health keffiyeh.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-29c7a9" class="vi-accordion-content__main vi-accordion__main" id="region-4c502a" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Hoodie cray mixtape gluten-free salvia.</h3>
        <p>Neutra chicharrones thundercats sustainable godard Try hard master 90 s cornhole heirloom Loko vinyl paleo chia blue bottle Goth disrupt godard pork belly chillwave swag You probably haven t heard of them vice butcher raw denim ramps Pbr b humblebrag actually synth umami small batch typewriter Lo fi craft beer skateboard typewriter selfies ennui gluten free etsy Organic chia lumbersexual bushwick lomo loko hella Vhs williamsburg quinoa yr trust fund normcore Viral normcore fixie blue bottle Master typewriter celiac thundercats slow carb</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Park organic</a>
      </div>
    </div>
  </div>
</div>

The Content Accordion can also be used with an icon on the left

Link content in second panel

Chambray kogi pour-over +1 keffiyeh pug vegan freegan.

Selvage pinterest meh irony.

Actually wes anderson put a bird on it vinyl semiotics chartreuse single origin coffee gastropub Brunch park post ironic chartreuse irony mustache farm to table master Gastropub etsy cray put a bird on it vinegar Bushwick pickled readymade retro flannel Small batch vice banh mi 8 bit franzen tattooed cred chillwave taxidermy raw denim Keytar craft beer 3 wolf moon Vhs flexitarian tilde Hella fashion axe pork belly mumblecore salvia fixie Biodiesel yr next level everyday mumblecore muggle magic meditation Dreamcatcher meggings before they sold out 1 portland

Gluten-free flannel bitters tattooed.

Small batch wes anderson thundercats Kickstarter gluten free kitsch irony cornhole Squid helvetica 90 s typewriter cronut tumblr hammock Marfa knausgaard blog pbr b shabby chic bicycle rights skateboard hoodie Trust fund synth health pickled wolf Ugh bushwick vhs sustainable keytar Tote bag everyday locavore raw denim church key 90 s lo fi kinfolk Kinfolk small batch roof quinoa authentic franzen Tumblr pickled distillery 1 venmo meditation banjo before they sold out Seitan pug roof polaroid ramps yuccie lo fi

Marfa semiotics celiac irony aesthetic kinfolk sriracha tacos.

Cold-pressed xoxo vegan brunch viral.

Craft beer retro bicycle rights Meditation salvia tofu cred tumblr deep v taxidermy Beard echo try hard butcher Twee jean shorts intelligentsia fanny pack cred pbr b Chicharrones hashtag cold pressed loko squid kitsch tattooed portland Echo art party poutine venmo Cronut loko wayfarers polaroid Gluten free marfa hoodie iphone Cliche quinoa slow carb tumblr carry ugh deep v xoxo Meditation butcher venmo before they sold out kombucha gastropub scenester single origin coffee Portland knausgaard pinterest kogi shoreditch

+1 cray iphone keytar.

Drinking salvia polaroid intelligentsia shabby chic Humblebrag fanny pack blog authentic thundercats freegan Migas sartorial chartreuse meh loko retro Bespoke normcore loko wes anderson you probably haven t heard of them pabst cold pressed raw denim Disrupt keffiyeh small batch messenger bag forage Goth fingerstache yr occupy Street cornhole cold pressed chillwave Muggle magic wes anderson mumblecore fingerstache Drinking schlitz bitters scenester Biodiesel you probably haven t heard of them vinegar loko venmo bushwick park Ennui pug wolf pop up butcher

Meggings yuccie semiotics occupy umami.

Squid kale chips pour over microdosing Skateboard 1 twee health bushwick hella whatever Loko godard twee mustache pitchfork pour over Blue bottle microdosing knausgaard helvetica Lomo carry hella kombucha fixie Helvetica bespoke shabby chic Skateboard readymade art party wes anderson swag sriracha letterpress Kitsch scenester ennui fixie Waistcoat put a bird on it master hammock Cray mixtape brooklyn meditation gentrify xoxo church key

Retro chartreuse hashtag farm-to-table whatever dreamcatcher cleanse yr.

Farm-to-table drinking vinegar polaroid literally.

Ramps paleo literally single origin coffee Skateboard gentrify artisan blog Bespoke occupy put a bird on it cleanse Tumblr intelligentsia drinking blue bottle salvia Franzen deep v semiotics helvetica keytar jean shorts phlogiston Banjo portland put a bird on it cleanse Tacos schlitz leggings 1 photo booth Flexitarian tacos paleo 8 bit humblebrag austin carry master Meh knausgaard wolf marfa street banjo Disrupt muggle magic skateboard humblebrag

Tattooed normcore 
<!-- 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)-da829e">
    <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-5862e9">Chambray kogi pour-over +1 keffiyeh pug vegan freegan.</h4>
      <a aria-controls="region-3a0134" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-da829e" 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
            Chambray kogi pour-over +1 keffiyeh pug vegan freegan.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-5862e9" class="vi-accordion-content__main vi-accordion__main" id="region-3a0134" 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>Selvage pinterest meh irony.</h3>
        <p id="sg-28655a">Actually wes <a href="#sample">anderson put</a> a bird on it vinyl semiotics chartreuse single origin coffee <a href="#sample">gastropub Brunch</a> park post ironic chartreuse irony mustache farm to table master Gastropub etsy cray put a bird on it vinegar Bushwick pickled readymade retro flannel <a href="#sample">Small batch</a> vice banh mi 8 bit franzen tattooed cred chillwave taxidermy raw denim Keytar craft <a href="#sample">beer 3</a> <a href="#sample">wolf moon</a> Vhs flexitarian <a href="#sample">tilde Hella</a> fashion axe pork belly mumblecore salvia fixie Biodiesel yr next <a href="#sample">level everyday</a> mumblecore muggle magic meditation Dreamcatcher meggings before they sold out 1 portland</p>
        <h3>Gluten-free flannel bitters tattooed.</h3>
        <p>Small batch wes anderson thundercats Kickstarter gluten free kitsch irony cornhole Squid helvetica 90 s typewriter cronut tumblr <a href="#sample">hammock Marfa knausgaard</a> blog pbr b shabby chic bicycle rights skateboard hoodie Trust fund synth health pickled wolf Ugh bushwick vhs sustainable keytar Tote <a href="#sample">bag everyday locavore</a> raw denim church key 90 s lo fi kinfolk Kinfolk small batch roof quinoa authentic franzen Tumblr pickled distillery 1 venmo meditation banjo before they sold out Seitan pug roof polaroid ramps yuccie lo fi</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-dc5d54">
    <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-cb428b">Marfa semiotics celiac irony aesthetic kinfolk sriracha tacos.</h4>
      <a aria-controls="region-5d51ec" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-dc5d54" 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
            Marfa semiotics celiac irony aesthetic kinfolk sriracha tacos.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-cb428b" class="vi-accordion-content__main vi-accordion__main" id="region-5d51ec" 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>Cold-pressed xoxo vegan brunch viral.</h3>
        <p id="sg-7d7431">Craft beer retro bicycle rights Meditation salvia tofu cred tumblr deep v taxidermy Beard echo try hard butcher Twee jean shorts intelligentsia fanny pack cred pbr b Chicharrones hashtag cold pressed loko squid kitsch tattooed portland Echo art party poutine venmo Cronut loko wayfarers polaroid Gluten free marfa hoodie iphone Cliche quinoa slow carb tumblr carry ugh deep v xoxo Meditation butcher venmo before they sold out kombucha gastropub scenester single origin coffee Portland knausgaard pinterest kogi shoreditch</p>
        <h3>+1 cray iphone keytar.</h3>
        <p>Drinking salvia polaroid intelligentsia shabby chic Humblebrag fanny pack blog authentic thundercats freegan Migas sartorial chartreuse meh loko retro Bespoke normcore loko wes anderson you probably haven t heard of <a href="#sample">them pabst cold</a> pressed raw denim Disrupt keffiyeh small batch messenger bag <a href="#sample">forage Goth fingerstache</a> yr occupy Street <a href="#sample">cornhole cold pressed</a> chillwave Muggle magic wes anderson mumblecore fingerstache Drinking schlitz bitters scenester Biodiesel you probably haven t heard of them vinegar loko venmo bushwick park <a href="#sample">Ennui pug wolf</a> pop up butcher</p>
        <h3>Meggings yuccie semiotics occupy umami.</h3>
        <p><a href="#sample">Squid kale</a> <a href="#sample">chips pour</a> over microdosing Skateboard 1 <a href="#sample">twee health</a> bushwick hella whatever Loko godard twee mustache pitchfork pour over Blue bottle <a href="#sample">microdosing knausgaard</a> helvetica Lomo carry hella kombucha fixie <a href="#sample">Helvetica bespoke</a> shabby chic Skateboard readymade art party <a href="#sample">wes anderson</a> swag sriracha letterpress Kitsch scenester ennui fixie Waistcoat put a bird on it master hammock Cray mixtape brooklyn meditation gentrify xoxo church key</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-db2e7b">
    <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-49e059">Retro chartreuse hashtag farm-to-table whatever dreamcatcher cleanse yr.</h4>
      <a aria-controls="region-73c2e2" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-db2e7b" 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
            Retro chartreuse hashtag farm-to-table whatever dreamcatcher cleanse yr.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-49e059" class="vi-accordion-content__main vi-accordion__main" id="region-73c2e2" 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>Farm-to-table drinking vinegar polaroid literally.</h3>
        <p>Ramps paleo literally single origin coffee Skateboard gentrify artisan blog Bespoke occupy put a bird on it cleanse Tumblr intelligentsia drinking blue bottle salvia Franzen deep v semiotics helvetica keytar jean shorts phlogiston Banjo portland put a bird on it cleanse Tacos schlitz leggings 1 photo booth Flexitarian tacos paleo 8 bit humblebrag austin carry master Meh knausgaard wolf marfa street banjo Disrupt muggle magic skateboard humblebrag</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Tattooed normcore</a>
      </div>
    </div>
  </div>
</div>

The Content Accordion can also be used with an image on the left

Link content in second panel
alt text

Chartreuse occupy vinyl pinterest narwhal quinoa church-key migas.

Aesthetic whatever locavore cliche yuccie.

Forage sartorial paleo Blog franzen swag Knausgaard 8 bit flannel organic sustainable Church key aesthetic paleo banh mi Messenger bag xoxo franzen Leggings sriracha locavore franzen narwhal Meh chillwave kombucha narwhal Authentic 90 s normcore synth pop up irony vice williamsburg Knausgaard microdosing asymmetrical organic Meditation readymade shoreditch Xoxo muggle magic kombucha swag listicle Leggings tattooed helvetica kinfolk craft beer street viral

Flannel kogi bushwick brunch meditation.

Church key tacos you probably haven t heard of them biodiesel chicharrones pinterest godard pickled Sustainable try hard keytar mustache Tumblr five dollar toast austin kale chips try hard Cray truffaut fanny pack Fingerstache poutine tousled asymmetrical meh you probably haven t heard of them loko five dollar toast Beard kickstarter before they sold out Quinoa meh cliche Tofu bespoke stumptown banh mi ramps pbr b asymmetrical wayfarers Mumblecore direct trade narwhal microdosing cleanse Waistcoat single origin coffee bicycle rights celiac direct trade selfies literally locavore Wes anderson cred jean shorts Echo butcher phlogiston stumptown raw denim austin

Biodiesel irony chia kinfolk.

Locavore drinking retro Deep v cold pressed before they sold out photo booth vinyl chartreuse hammock Shabby chic yuccie taxidermy goth Blue bottle semiotics phlogiston hammock loko leggings direct trade Squid muggle magic cold pressed vinegar brooklyn Vinyl aesthetic vinegar franzen next level Fanny pack park shabby chic polaroid echo church key Cardigan tilde gentrify Chicharrones kickstarter post ironic wayfarers readymade whatever schlitz squid Occupy yolo kickstarter disrupt Mumblecore roof swag microdosing blog

alt text

+1 brooklyn normcore pour-over iphone yuccie chillwave intelligentsia.

Forage vice waistcoat readymade.

Park lomo bicycle rights squid Master kale chips microdosing lo fi yr leggings schlitz try hard Hoodie trust fund distillery gentrify meh tofu Tacos xoxo bitters farm to table retro 8 bit post ironic scenester cliche Mustache mlkshk kale chips Fanny pack narwhal phlogiston dreamcatcher celiac Truffaut craft beer heirloom tousled plaid Wolf mlkshk cardigan Phlogiston try hard asymmetrical fixie thundercats butcher tumblr wolf Freegan schlitz disrupt 3 wolf moon semiotics

Carry cornhole swag cold-pressed meditation.

Cred brooklyn gentrify art party Hoodie keffiyeh you probably haven t heard of them vegan umami Flexitarian hammock goth post ironic keytar tumblr Slow carb marfa health deep v Chia paleo pbr b synth 90 s stumptown godard skateboard Aesthetic deep v sartorial ennui blog Selfies flannel chicharrones Fixie truffaut carry post ironic letterpress retro kitsch heirloom Typewriter food truck xoxo mumblecore pour over kombucha loko tacos Plaid ennui yr pop up listicle aesthetic mumblecore migas Jean shorts locavore fingerstache Phlogiston bitters kogi knausgaard kombucha

alt text

Ugh godard butcher skateboard distillery vice stumptown migas.

Artisan bushwick chillwave readymade.

Fixie bicycle rights offal Blog bicycle rights fixie iphone street tattooed Portland tote bag mixtape wayfarers try hard umami blue bottle bespoke Mumblecore slow carb viral Jean shorts chia polaroid knausgaard williamsburg Pbr b lumbersexual disrupt slow carb Cred occupy keffiyeh lumbersexual craft beer pickled Tofu vhs portland shoreditch intelligentsia raw denim flexitarian Xoxo organic readymade stumptown art party five dollar toast vhs banjo Skateboard flannel fingerstache viral pour over microdosing knausgaard selfies

Cred listicle portland meggings wolf.

Meh cleanse single origin coffee mustache chia slow carb Fashion axe yr keytar austin street viral yolo Single origin coffee intelligentsia cred Asymmetrical readymade letterpress kickstarter viral brooklyn fingerstache Cliche actually flannel 90 s Whatever dreamcatcher chillwave roof Polaroid messenger bag roof Jean shorts church key green juice photo booth Yolo thundercats goth brooklyn beard Single origin coffee fixie skateboard sriracha photo booth bitters 3 wolf moon

Shoreditch cardigan 
<!-- 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)-e59896">
    <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-33d480">Chartreuse occupy vinyl pinterest narwhal quinoa church-key migas.</h4>
      <a aria-controls="region-03036b" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-e59896" 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
            Chartreuse occupy vinyl pinterest narwhal quinoa church-key migas.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-33d480" class="vi-accordion-content__main vi-accordion__main" id="region-03036b" 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>Aesthetic whatever locavore cliche yuccie.</h3>
        <p id="sg-e06ae5">Forage sartorial paleo Blog franzen swag Knausgaard 8 bit flannel organic sustainable Church key aesthetic paleo banh mi Messenger bag xoxo franzen Leggings sriracha locavore franzen narwhal Meh chillwave kombucha narwhal Authentic <a href="#sample">90 s</a> normcore synth pop up <a href="#sample">irony vice</a> williamsburg Knausgaard microdosing asymmetrical organic Meditation readymade shoreditch Xoxo muggle magic kombucha swag listicle <a href="#sample">Leggings tattooed</a> helvetica kinfolk craft beer street viral</p>
        <h3>Flannel kogi bushwick brunch meditation.</h3>
        <p>Church key tacos you <a href="#sample">probably haven</a> <a href="#sample">t heard</a> of them biodiesel chicharrones pinterest godard <a href="#sample">pickled Sustainable</a> <a href="#sample">try hard</a> <a href="#sample">keytar mustache</a> Tumblr five <a href="#sample">dollar toast</a> <a href="#sample">austin kale</a> <a href="#sample">chips try</a> hard Cray truffaut fanny pack Fingerstache poutine tousled asymmetrical meh you probably haven t heard of them loko <a href="#sample">five dollar</a> toast Beard <a href="#sample">kickstarter before</a> they sold <a href="#sample">out Quinoa</a> <a href="#sample">meh cliche</a> <a href="#sample">Tofu bespoke</a> <a href="#sample">stumptown banh</a> mi ramps pbr b asymmetrical wayfarers <a href="#sample">Mumblecore direct</a> <a href="#sample">trade narwhal</a> <a href="#sample">microdosing cleanse</a> Waistcoat single origin coffee <a href="#sample">bicycle rights</a> <a href="#sample">celiac direct</a> <a href="#sample">trade selfies</a> literally locavore <a href="#sample">Wes anderson</a> <a href="#sample">cred jean</a> shorts Echo butcher phlogiston stumptown raw denim austin</p>
        <h3>Biodiesel irony chia kinfolk.</h3>
        <p>Locavore drinking retro <a href="#sample">Deep v cold</a> pressed before they sold out photo <a href="#sample">booth vinyl chartreuse</a> <a href="#sample">hammock Shabby chic</a> yuccie taxidermy goth Blue bottle semiotics <a href="#sample">phlogiston hammock loko</a> leggings direct trade <a href="#sample">Squid muggle magic</a> <a href="#sample">cold pressed vinegar</a> <a href="#sample">brooklyn Vinyl aesthetic</a> vinegar franzen next level Fanny pack <a href="#sample">park shabby chic</a> <a href="#sample">polaroid echo church</a> key Cardigan tilde <a href="#sample">gentrify Chicharrones kickstarter</a> <a href="#sample">post ironic wayfarers</a> <a href="#sample">readymade whatever schlitz</a> <a href="#sample">squid Occupy yolo</a> kickstarter disrupt Mumblecore roof swag microdosing blog</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-8e0777">
    <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-2c80d8">+1 brooklyn normcore pour-over iphone yuccie chillwave intelligentsia.</h4>
      <a aria-controls="region-080c21" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-8e0777" 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
            +1 brooklyn normcore pour-over iphone yuccie chillwave intelligentsia.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-2c80d8" class="vi-accordion-content__main vi-accordion__main" id="region-080c21" 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>Forage vice waistcoat readymade.</h3>
        <p id="sg-644020">Park lomo bicycle rights squid Master kale chips microdosing lo fi yr leggings schlitz try hard Hoodie trust fund distillery gentrify meh tofu Tacos xoxo bitters farm to <a href="#sample">table retro</a> 8 bit post ironic scenester cliche Mustache mlkshk kale chips Fanny pack narwhal phlogiston dreamcatcher celiac Truffaut craft beer heirloom tousled plaid Wolf mlkshk cardigan Phlogiston try hard asymmetrical fixie thundercats butcher tumblr wolf Freegan schlitz disrupt 3 wolf moon semiotics</p>
        <h3>Carry cornhole swag cold-pressed meditation.</h3>
        <p>Cred brooklyn gentrify art party Hoodie keffiyeh you probably haven t heard of them vegan umami Flexitarian hammock goth post ironic keytar tumblr Slow carb marfa health deep v Chia paleo pbr b synth 90 s stumptown godard skateboard Aesthetic deep v sartorial ennui blog Selfies flannel chicharrones Fixie truffaut carry post ironic letterpress retro kitsch heirloom Typewriter food truck xoxo mumblecore pour <a href="#sample">over kombucha loko</a> tacos Plaid ennui yr pop up <a href="#sample">listicle aesthetic mumblecore</a> migas Jean shorts locavore fingerstache Phlogiston bitters kogi knausgaard kombucha</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-ae902b">
    <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-6c2744">Ugh godard butcher skateboard distillery vice stumptown migas.</h4>
      <a aria-controls="region-877976" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-ae902b" 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
            Ugh godard butcher skateboard distillery vice stumptown migas.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-6c2744" class="vi-accordion-content__main vi-accordion__main" id="region-877976" 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>Artisan bushwick chillwave readymade.</h3>
        <p>Fixie bicycle rights <a href="#sample">offal Blog bicycle</a> rights fixie iphone street tattooed Portland <a href="#sample">tote bag mixtape</a> wayfarers try hard umami blue bottle bespoke Mumblecore slow carb viral Jean shorts chia polaroid knausgaard williamsburg Pbr b lumbersexual disrupt slow carb Cred occupy keffiyeh lumbersexual craft beer pickled <a href="#sample">Tofu vhs portland</a> <a href="#sample">shoreditch intelligentsia raw</a> denim flexitarian Xoxo organic readymade stumptown art party five <a href="#sample">dollar toast vhs</a> banjo Skateboard flannel <a href="#sample">fingerstache viral pour</a> over microdosing knausgaard selfies</p>
        <h3>Cred listicle portland meggings wolf.</h3>
        <p>Meh cleanse single origin coffee mustache chia slow carb Fashion axe yr keytar austin <a href="#sample">street viral</a> yolo Single origin coffee <a href="#sample">intelligentsia cred</a> Asymmetrical readymade letterpress kickstarter viral brooklyn fingerstache Cliche actually flannel 90 s Whatever dreamcatcher chillwave roof Polaroid messenger bag roof Jean shorts church key green juice photo booth Yolo thundercats goth brooklyn beard Single origin coffee fixie skateboard sriracha photo booth bitters 3 wolf <a href="#sample">moon</a></p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Shoreditch cardigan</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.

Flexitarian post-ironic chillwave brooklyn master sriracha vegan church-key.

Yuccie sriracha kogi letterpress hammock keffiyeh plaid lumbersexual gentrify kitsch pitchfork tousled pabst meh vegan.

Swag pour-over mumblecore cornhole church-key yuccie retro chartreuse.

Narwhal letterpress viral poutine humblebrag cleanse celiac crucifix tousled pinterest cleanse goth readymade freegan butcher.

Phlogiston vinegar yr tacos chartreuse celiac ethical meggings.

Green juice freegan taxidermy craft beer beard 90 s food truck locavore Master vice stumptown 1 blue bottle kitsch austin Hoodie franzen knausgaard poutine church key small batch pitchfork Freegan ugh whatever ennui Narwhal banh mi listicle ugh bushwick craft beer dreamcatcher phlogiston Cornhole 1 pop up squid meditation carry swag Chartreuse gluten free before they sold out brunch scenester helvetica Slow carb pinterest fingerstache photo booth squid Vinegar schlitz umami taxidermy bitters xoxo beard Post ironic pop up neutra photo booth letterpress Master kinfolk meggings diy bicycle rights jean shorts normcore artisan

Cardigan portland 
<!-- 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)-227303">
    <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-eb3b77">Flexitarian post-ironic chillwave brooklyn master sriracha vegan church-key.</h4>
      <a aria-controls="region-939876" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-227303" 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
            Flexitarian post-ironic chillwave brooklyn master sriracha vegan church-key.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-eb3b77" class="vi-accordion-refine__main vi-accordion__main" id="region-939876" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Yuccie sriracha kogi letterpress hammock keffiyeh plaid lumbersexual gentrify kitsch pitchfork tousled pabst meh vegan.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-834997">
    <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-9305b3">Swag pour-over mumblecore cornhole church-key yuccie retro chartreuse.</h4>
      <a aria-controls="region-87ab52" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-834997" 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
            Swag pour-over mumblecore cornhole church-key yuccie retro chartreuse.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-9305b3" class="vi-accordion-refine__main vi-accordion__main" id="region-87ab52" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Narwhal letterpress viral poutine humblebrag cleanse celiac crucifix tousled pinterest cleanse goth readymade freegan butcher.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-12d621">
    <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-20680c">Phlogiston vinegar yr tacos chartreuse celiac ethical meggings.</h4>
      <a aria-controls="region-0925de" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-12d621" 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
            Phlogiston vinegar yr tacos chartreuse celiac ethical meggings.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-20680c" class="vi-accordion-refine__main vi-accordion__main" id="region-0925de" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Green juice freegan taxidermy craft beer <a href="#sample">beard 90 s</a> food truck locavore Master vice stumptown 1 blue bottle kitsch austin Hoodie franzen knausgaard poutine church key small batch pitchfork Freegan ugh whatever ennui Narwhal banh mi listicle ugh bushwick craft beer dreamcatcher phlogiston Cornhole 1 pop up squid meditation carry swag Chartreuse gluten free before they sold out brunch scenester helvetica Slow carb pinterest fingerstache photo booth squid Vinegar schlitz umami taxidermy bitters xoxo beard Post ironic pop up neutra photo booth letterpress Master kinfolk meggings diy bicycle rights jean shorts normcore artisan</p>
        <!-- Button type: outline  -->
        <a href="#" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Cardigan portland</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.

Selfies asymmetrical waistcoat marfa cliche austin drinking disrupt.

(Squid loko banjo.)
  • selfies
  • gentrify

Cronut church-key street carry gentrify.

Pitchfork mlkshk tilde jean shorts raw denim plaid skateboard vice Cray artisan cold pressed quinoa Ennui single origin coffee sustainable mustache seitan chicharrones craft beer Cold pressed tote bag synth ugh single origin coffee Tote bag 3 wolf moon disrupt selfies messenger bag yuccie Cleanse kitsch venmo Biodiesel hashtag leggings mlkshk direct trade yolo tumblr Cronut fanny pack goth meh before they sold out brunch hashtag asymmetrical Sartorial keffiyeh 1 try hard swag Franzen schlitz sustainable portland forage artisan tacos

Farm-to-table asymmetrical quinoa gluten-free polaroid.

Hella carry pop up vinegar health next level cliche Meh venmo goth truffaut vegan poutine ennui Try hard freegan truffaut Artisan semiotics pop up pabst lumbersexual Cardigan pabst locavore freegan Waistcoat wolf xoxo heirloom knausgaard brunch yuccie Meditation ennui irony vegan readymade chartreuse echo Shoreditch knausgaard wes anderson bicycle rights pork belly Actually ugh humblebrag green juice goth Readymade kickstarter gastropub pbr b Jean shorts kogi messenger bag knausgaard artisan drinking

Banjo sartorial bespoke freegan.

Marfa cliche typewriter Pickled tilde five dollar toast pinterest Kitsch muggle magic health godard lo fi fanny pack Semiotics vhs pinterest vinyl selvage raw denim keffiyeh gentrify Irony pbr b wayfarers pinterest banh mi jean shorts Ethical everyday scenester vegan vinegar Lo fi quinoa williamsburg twee try hard swag selfies Wes anderson franzen echo 8 bit skateboard mustache chicharrones Blog cray twee kombucha selvage Readymade stumptown humblebrag cold pressed lo fi fixie hella

Iphone flannel vhs health distillery cornhole street thundercats.

(Paleo cornhole whatever.)
  • waistcoat
  • mumblecore
  • bushwick
  • hashtag
  • williamsburg

Asymmetrical chartreuse letterpress intelligentsia.

Deep v seitan messenger bag food truck brooklyn next level twee truffaut Diy pickled synth mixtape ennui direct trade normcore authentic Ugh etsy muggle magic chillwave kickstarter pop up Roof put a bird on it schlitz blue bottle truffaut Lo fi bicycle rights blue bottle dreamcatcher cronut 90 s vice Brooklyn stumptown you probably haven t heard of them chia kogi goth crucifix plaid Freegan fixie shabby chic typewriter offal ramps tofu meh Post ironic kale chips narwhal Poutine five dollar toast park Hammock leggings 3 wolf moon literally pug

Seitan cardigan cold-pressed flexitarian.

Lumbersexual banh mi poutine church key ramps pbr b Gastropub stumptown put a bird on it marfa franzen austin cardigan roof Shoreditch cardigan vinyl photo booth farm to table scenester Migas tumblr beard pabst actually You probably haven t heard of them banjo truffaut pour over goth Truffaut kogi post ironic Banjo sustainable beard occupy try hard kale chips bushwick raw denim Banh mi williamsburg bitters godard biodiesel Cliche selvage scenester meh green juice Drinking poutine intelligentsia Vinegar listicle yuccie biodiesel migas cliche kogi Tousled tattooed messenger bag swag neutra hella yr cold pressed

Iphone try-hard +1 keffiyeh brunch lomo plaid helvetica.

(Fixie freegan literally.)
  • keytar
  • sartorial
  • cliche

Church-key vinegar readymade portland selfies.

Listicle kombucha vhs trust fund dreamcatcher letterpress umami Fixie microdosing kinfolk cardigan iphone pug locavore Cliche phlogiston mustache portland stumptown Fanny pack bushwick trust fund pop up ugh shabby chic Selfies cold pressed plaid thundercats Literally deep v raw denim kickstarter cold pressed godard dreamcatcher Mlkshk freegan shabby chic kinfolk Everyday park taxidermy selvage selfies distillery brooklyn fixie Fixie irony narwhal franzen umami direct trade chicharrones viral Twee hella photo booth Kogi umami next level truffaut crucifix kale chips

Etsy crucifix yuccie tilde disrupt.

Pabst mustache ugh locavore tattooed gluten free Tacos meh occupy pop up keytar Disrupt truffaut hammock park master Iphone hammock pug occupy Occupy 8 bit vice fingerstache next level typewriter disrupt hammock Yr knausgaard mustache vinegar Yuccie normcore slow carb street ugh Mlkshk waistcoat tote bag twee schlitz godard letterpress shabby chic Bespoke tousled health Vinegar banjo hashtag keffiyeh offal

Try-hard vhs

90's street

(Cred semiotics sriracha.)

Currently, there is no detailed content available for this drug.

  • narwhal
  • locavore
  • swag
  • marfa
  • fixie

Gentrify street chillwave quinoa umami literally yuccie narwhal.

(Health brooklyn retro.)
  • hoodie
  • yr
  • asymmetrical

Retro chicharrones phlogiston chambray bespoke.

Microdosing trust fund you probably haven t heard of them lumbersexual craft beer lomo keffiyeh Bitters biodiesel selfies squid messenger bag leggings mumblecore Tumblr green juice iphone selfies gluten free Hella 8 bit muggle magic Xoxo kickstarter tilde meditation pickled you probably haven t heard of them kogi Irony migas trust fund flexitarian muggle magic umami gastropub Cronut pickled intelligentsia crucifix loko truffaut cold pressed Kinfolk trust fund truffaut small batch chambray gentrify seitan Hoodie you probably haven t heard of them leggings wayfarers shabby chic Cold pressed seitan craft beer you probably haven t heard of them pinterest Seitan brunch thundercats asymmetrical truffaut yolo typewriter chia Waistcoat kogi wolf health slow carb

Neutra sriracha readymade portland selfies.

Craft beer gentrify waistcoat fingerstache gastropub Blog brunch heirloom Truffaut paleo chicharrones godard dreamcatcher Cleanse chillwave carry selfies 90 s Tote bag 3 wolf moon meh goth irony tofu Meh narwhal tote bag viral ethical Celiac wayfarers pbr b five dollar toast banjo pop up mlkshk post ironic Fixie hammock waistcoat twee small batch pour over salvia Flexitarian next level brooklyn pug vice austin mustache Raw denim knausgaard tousled flannel swag vinyl Lumbersexual drinking crucifix beard bespoke intelligentsia tote bag Twee meggings fanny pack tumblr biodiesel tousled

Knausgaard wolf viral bushwick.

Sartorial normcore you probably haven t heard of them ugh bitters street austin Fingerstache yolo wes anderson hella crucifix ennui freegan 90 s 1 flannel actually fashion axe leggings Biodiesel marfa health synth hammock gluten free readymade keytar Five dollar toast stumptown cray Direct trade 8 bit meggings semiotics etsy distillery normcore Portland art party park everyday twee Swag phlogiston semiotics Schlitz ethical typewriter poutine selfies Chia lumbersexual yr photo booth synth cornhole church key godard Mumblecore pitchfork put a bird on it tote bag hoodie Pour over vhs you probably haven t heard of them

Ramps mustache 
<!-- 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)-dc3ecb">
    <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-ad5112">Selfies asymmetrical waistcoat marfa cliche austin drinking disrupt.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Squid loko banjo.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          selfies
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          gentrify
        </li>
      </ul>
      <a aria-controls="region-8db0e0" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-dc3ecb" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-ad5112" class="vi-accordion-pipeline__main vi-accordion__main" id="region-8db0e0" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Cronut church-key street carry gentrify.</h3>
        <p id="sg-c89b40">Pitchfork mlkshk tilde jean shorts raw denim plaid skateboard vice Cray artisan cold pressed quinoa Ennui single origin coffee sustainable mustache seitan chicharrones craft beer Cold pressed tote bag synth ugh single origin coffee Tote bag 3 wolf <a href="#sample">moon disrupt</a> selfies messenger bag yuccie Cleanse kitsch venmo Biodiesel hashtag leggings mlkshk direct trade yolo tumblr Cronut fanny pack goth meh before they sold out brunch hashtag asymmetrical Sartorial keffiyeh 1 try hard swag Franzen schlitz sustainable portland forage artisan tacos</p>
        <h3>Farm-to-table asymmetrical quinoa gluten-free polaroid.</h3>
        <p><a href="#sample">Hella carry</a> <a href="#sample">pop up</a> <a href="#sample">vinegar health</a> <a href="#sample">next level</a> <a href="#sample">cliche Meh</a> <a href="#sample">venmo goth</a> <a href="#sample">truffaut vegan</a> <a href="#sample">poutine ennui</a> <a href="#sample">Try hard</a> <a href="#sample">freegan truffaut</a> <a href="#sample">Artisan semiotics</a> <a href="#sample">pop up</a> <a href="#sample">pabst lumbersexual</a> <a href="#sample">Cardigan pabst</a> <a href="#sample">locavore freegan</a> <a href="#sample">Waistcoat wolf</a> <a href="#sample">xoxo heirloom</a> <a href="#sample">knausgaard brunch</a> <a href="#sample">yuccie Meditation</a> <a href="#sample">ennui irony</a> <a href="#sample">vegan readymade</a> <a href="#sample">chartreuse echo</a> <a href="#sample">Shoreditch knausgaard</a> <a href="#sample">wes anderson</a> <a href="#sample">bicycle rights</a> <a href="#sample">pork belly</a> <a href="#sample">Actually ugh</a> <a href="#sample">humblebrag green</a> <a href="#sample">juice goth</a> <a href="#sample">Readymade kickstarter</a> <a href="#sample">gastropub pbr</a> <a href="#sample">b Jean</a> <a href="#sample">shorts kogi</a> <a href="#sample">messenger bag</a> <a href="#sample">knausgaard artisan</a> <a href="#sample">drinking</a></p>
        <h3>Banjo sartorial bespoke freegan.</h3>
        <p>Marfa cliche typewriter Pickled tilde five dollar toast pinterest Kitsch muggle magic health godard lo fi fanny pack Semiotics vhs pinterest vinyl selvage raw denim keffiyeh gentrify Irony pbr b wayfarers pinterest banh mi jean shorts Ethical everyday scenester vegan vinegar Lo fi quinoa williamsburg twee try hard swag selfies Wes anderson franzen echo 8 bit skateboard mustache chicharrones Blog cray twee kombucha selvage Readymade stumptown humblebrag cold pressed lo fi fixie hella</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-d66ba1">
    <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-a513a6">Iphone flannel vhs health distillery cornhole street thundercats.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Paleo cornhole whatever.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          waistcoat
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          mumblecore
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          bushwick
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          hashtag
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          williamsburg
        </li>
      </ul>
      <a aria-controls="region-ca814c" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-d66ba1" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-a513a6" class="vi-accordion-pipeline__main vi-accordion__main" id="region-ca814c" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Asymmetrical chartreuse letterpress intelligentsia.</h3>
        <p id="sg-76ed12">Deep v seitan messenger bag food truck brooklyn next level twee truffaut Diy pickled synth mixtape ennui direct trade normcore authentic Ugh etsy muggle magic chillwave kickstarter pop up Roof put a bird on it schlitz blue bottle truffaut Lo fi bicycle rights blue bottle dreamcatcher cronut 90 s vice Brooklyn stumptown you probably <a href="#sample">haven t heard</a> of them chia kogi goth crucifix plaid Freegan fixie shabby chic typewriter offal ramps tofu meh Post ironic kale chips narwhal Poutine five dollar toast park Hammock leggings 3 wolf moon literally pug</p>
        <h3>Seitan cardigan cold-pressed flexitarian.</h3>
        <p>Lumbersexual banh mi poutine church key ramps pbr b Gastropub stumptown put a bird on it marfa franzen austin cardigan roof Shoreditch cardigan vinyl photo booth farm to table scenester Migas tumblr beard pabst actually You probably haven t heard of them banjo truffaut pour over goth Truffaut kogi post ironic <a href="#sample">Banjo sustainable beard</a> occupy try hard kale chips bushwick raw denim Banh mi williamsburg bitters godard biodiesel Cliche selvage scenester meh green juice Drinking poutine intelligentsia Vinegar listicle yuccie biodiesel migas cliche kogi Tousled tattooed messenger <a href="#sample">bag swag neutra</a> hella yr cold pressed</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-111ac1">
    <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-3847d2">Iphone try-hard +1 keffiyeh brunch lomo plaid helvetica.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Fixie freegan literally.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          keytar
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          sartorial
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          cliche
        </li>
      </ul>
      <a aria-controls="region-164a6d" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-111ac1" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-3847d2" class="vi-accordion-pipeline__main vi-accordion__main" id="region-164a6d" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Church-key vinegar readymade portland selfies.</h3>
        <p>Listicle kombucha vhs trust fund dreamcatcher letterpress umami Fixie microdosing kinfolk cardigan iphone pug locavore Cliche phlogiston mustache portland stumptown Fanny pack bushwick trust fund pop up ugh shabby chic <a href="#sample">Selfies cold pressed</a> plaid thundercats Literally deep v raw denim kickstarter cold pressed godard dreamcatcher Mlkshk freegan shabby chic kinfolk Everyday park taxidermy selvage selfies distillery brooklyn fixie Fixie irony narwhal franzen umami direct trade chicharrones <a href="#sample">viral Twee hella</a> photo booth Kogi umami next level truffaut crucifix kale chips</p>
        <h3>Etsy crucifix yuccie tilde disrupt.</h3>
        <p>Pabst mustache ugh locavore tattooed gluten free Tacos meh occupy pop up keytar Disrupt truffaut hammock park master Iphone hammock pug occupy Occupy 8 bit vice fingerstache next level typewriter <a href="#sample">disrupt hammock</a> Yr knausgaard mustache vinegar Yuccie normcore slow carb street ugh Mlkshk waistcoat tote bag twee schlitz godard letterpress shabby chic <a href="#sample">Bespoke tousled</a> health Vinegar banjo hashtag keffiyeh offal</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Try-hard vhs</a>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-7421c4">
    <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-b23022">90's
          street
        </h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Cred semiotics sriracha.)
        </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">
          narwhal
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          locavore
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          swag
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          marfa
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          fixie
        </li>
      </ul>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-c9dcb8">
    <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-685621">Gentrify street chillwave quinoa umami literally yuccie narwhal.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Health brooklyn retro.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          hoodie
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          yr
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          asymmetrical
        </li>
      </ul>
      <a aria-controls="region-259a8d" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-c9dcb8" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-685621" class="vi-accordion-pipeline__main vi-accordion__main" id="region-259a8d" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Retro chicharrones phlogiston chambray bespoke.</h3>
        <p>Microdosing trust fund you probably haven t heard of them lumbersexual craft <a href="#sample">beer lomo</a> keffiyeh Bitters biodiesel selfies squid messenger bag leggings mumblecore Tumblr green juice <a href="#sample">iphone selfies</a> <a href="#sample">gluten free</a> Hella 8 <a href="#sample">bit muggle</a> magic Xoxo kickstarter tilde meditation pickled you probably <a href="#sample">haven t</a> heard of them kogi Irony migas trust fund flexitarian muggle magic umami gastropub Cronut <a href="#sample">pickled intelligentsia</a> crucifix loko truffaut cold pressed Kinfolk trust fund truffaut small batch chambray gentrify seitan Hoodie you probably haven t heard of them leggings wayfarers shabby chic Cold pressed seitan craft beer you probably haven t heard of them pinterest Seitan brunch thundercats asymmetrical truffaut yolo typewriter chia Waistcoat kogi wolf health slow carb</p>
        <h3>Neutra sriracha readymade portland selfies.</h3>
        <p>Craft beer gentrify waistcoat fingerstache gastropub Blog brunch heirloom Truffaut paleo chicharrones godard dreamcatcher Cleanse chillwave carry selfies 90 s Tote bag 3 wolf moon meh goth irony tofu Meh narwhal tote bag viral ethical Celiac wayfarers pbr b five dollar toast banjo pop up mlkshk post ironic Fixie hammock waistcoat twee small batch pour over salvia Flexitarian next level brooklyn pug vice austin mustache Raw denim knausgaard tousled flannel swag vinyl Lumbersexual drinking crucifix beard bespoke intelligentsia tote bag Twee meggings fanny pack tumblr biodiesel tousled</p>
        <h3>Knausgaard wolf viral bushwick.</h3>
        <p>Sartorial normcore you probably <a href="#sample">haven t</a> heard of <a href="#sample">them ugh</a> bitters street austin Fingerstache yolo wes anderson hella crucifix ennui freegan 90 s 1 flannel actually fashion axe leggings Biodiesel marfa health synth hammock gluten free readymade keytar Five dollar toast stumptown cray Direct trade 8 bit meggings semiotics etsy distillery normcore Portland art party park <a href="#sample">everyday twee</a> Swag phlogiston semiotics Schlitz ethical typewriter poutine selfies Chia lumbersexual yr photo booth synth cornhole church key godard Mumblecore pitchfork put a bird on it tote bag hoodie Pour over vhs you probably haven t heard of them</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Ramps mustache</a>
      </div>
    </div>
  </div>
</div>

The color of the whole component can be easily changed by changing a css variable

Tacos sartorial butcher portland banjo bespoke pickled salvia.

(Chicharrones brooklyn viral.)
  • phlogiston
  • sustainable

Loko paleo master gentrify asymmetrical.

Artisan slow carb vinyl fanny pack mlkshk Readymade ennui fixie typewriter gastropub Sriracha pug seitan typewriter chambray Vice helvetica bushwick microdosing twee Waistcoat chicharrones carry hella Cred yuccie marfa ramps neutra cardigan tote bag Iphone semiotics stumptown 90 s tacos wolf williamsburg migas everyday Thundercats wayfarers helvetica cleanse normcore Brooklyn pug offal health quinoa pitchfork Goth fixie shabby chic mumblecore twee deep v

Blog leggings tilde gluten-free.

Banjo ennui poutine vegan chillwave squid 8 bit meditation gentrify pour over letterpress kombucha Mixtape single origin coffee waistcoat xoxo tumblr health pbr b polaroid Tofu humblebrag skateboard Selvage ugh cliche sustainable mlkshk Blog selfies keytar dreamcatcher heirloom cray pinterest paleo You probably haven t heard of them xoxo kitsch Pork belly hashtag pop up hammock portland jean shorts Mumblecore crucifix chambray Vinyl chia microdosing schlitz typewriter tousled chambray Brunch kitsch actually swag banjo master

Iphone viral everyday loko selfies normcore wolf disrupt.

(Sriracha drinking tacos.)
  • heirloom
  • keffiyeh
  • offal
  • locavore
  • loko

Chia knausgaard loko meh literally.

Umami kombucha ugh fashion axe pour over carry Tousled cliche irony Diy goth retro Master etsy kogi ramps microdosing next level 90 s 1 microdosing pug letterpress art party Roof single origin coffee etsy mlkshk five dollar toast Normcore squid hoodie tattooed vinegar Blue bottle taxidermy venmo distillery ugh Health cardigan before they sold out cleanse xoxo Schlitz lumbersexual kitsch hammock tilde Heirloom beard cliche austin pabst aesthetic photo booth

Goth kombucha flannel schlitz.

Forage whatever roof fanny pack seitan Truffaut lomo pickled Tacos venmo flexitarian semiotics fingerstache Selfies art party single origin coffee post ironic deep v Migas 3 wolf moon 90 s keffiyeh Bespoke marfa stumptown butcher pour over portland Ugh dreamcatcher neutra williamsburg plaid Craft beer blue bottle schlitz seitan Cray fixie franzen Jean shorts health yolo offal

Literally normcore chicharrones ramps.

Umami heirloom pour over semiotics Lo fi hammock hoodie seitan selvage kitsch 1 Mumblecore cray sriracha church key vice lo fi Synth wayfarers put a bird on it post ironic brooklyn next level Poutine pour over viral food truck 90 s cold pressed Yolo etsy messenger bag Tattooed pbr b organic 3 wolf moon venmo portland Meh pop up paleo artisan yolo aesthetic health Salvia craft beer vhs umami tofu pitchfork yuccie Readymade leggings salvia tacos muggle magic twee taxidermy Swag street mumblecore semiotics small batch lomo selfies Normcore pickled 90 s

Cray plaid squid wolf kombucha vhs heirloom fixie.

(Ennui semiotics pitchfork.)
  • beard
  • everyday
  • listicle

Schlitz twee chia seitan ramps.

Blue bottle ethical organic 3 wolf moon hashtag raw denim photo booth venmo Paleo yuccie small batch shoreditch cold pressed farm to table cred green juice Forage try hard artisan slow carb flexitarian Marfa bushwick venmo microdosing wolf celiac Drinking pickled salvia 1 kale chips Mixtape pinterest sustainable loko fingerstache echo Yolo sustainable sartorial direct trade tilde stumptown Food truck wes anderson knausgaard Beard readymade typewriter viral vinegar Kogi brunch direct trade blog helvetica

Typewriter tattooed beard pbr&b pinterest.

Literally xoxo five dollar toast Tacos marfa authentic quinoa Put a bird on it authentic flexitarian cardigan franzen whatever Polaroid pug meggings messenger bag hella salvia venmo 3 wolf moon Lomo schlitz fingerstache chicharrones tote bag flexitarian cornhole Farm to table slow carb authentic hoodie ugh brunch Normcore put a bird on it yr lo fi hashtag Fingerstache kombucha chicharrones viral Pbr b stumptown hoodie craft beer brooklyn austin meditation tattooed Put a bird on it keffiyeh meggings hella retro Semiotics schlitz poutine keffiyeh

Taxidermy vinyl

selvage taxidermy

(Vinegar viral cleanse.)

Currently, there is no detailed content available for this drug.

  • ennui
  • crucifix
  • flannel
  • bushwick
  • roof

Squid church-key helvetica asymmetrical blog +1 try-hard tilde.

(Post-ironic mixtape stumptown.)
  • carry
  • organic
  • poutine

Celiac bespoke butcher narwhal meggings.

Truffaut stumptown phlogiston Poutine skateboard synth viral occupy 90 s Meditation artisan kitsch swag sartorial readymade health Everyday art party heirloom actually hoodie banjo hammock Quinoa deep v waistcoat literally intelligentsia artisan celiac tattooed Godard mumblecore mlkshk photo booth pbr b microdosing shabby chic venmo Distillery neutra ramps lo fi bushwick brooklyn Art party 8 bit tousled godard freegan banjo Flexitarian irony cred tofu truffaut knausgaard seitan Forage hella vinyl taxidermy Mlkshk franzen banh mi kickstarter sartorial locavore

Williamsburg scenester knausgaard flannel yr.

Locavore bitters dreamcatcher poutine goth skateboard Aesthetic mumblecore twee Cornhole freegan fixie lumbersexual green juice keytar Cornhole crucifix shoreditch kickstarter selfies slow carb Everyday fanny pack polaroid Flannel roof cliche hashtag shoreditch diy pbr b Sriracha kitsch disrupt hoodie lomo Diy neutra trust fund celiac actually Microdosing jean shorts raw denim fashion axe vice Vinegar typewriter pbr b Flexitarian five dollar toast hammock tousled

Meh kitsch try-hard chillwave.

Kitsch tattooed retro brooklyn heirloom fixie Typewriter bitters jean shorts art party Thundercats tofu cred humblebrag messenger bag semiotics kogi chillwave Vinyl fanny pack messenger bag Narwhal humblebrag sriracha Ethical dreamcatcher sriracha kale chips art party Freegan paleo yr kickstarter pork belly thundercats Umami leggings kitsch flannel gluten free Muggle magic humblebrag beard blue bottle Health ethical viral tumblr neutra goth Bicycle rights taxidermy ramps cliche

Typewriter beard 
<!-- 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)-2d2b10">
    <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-096185">Tacos sartorial butcher portland banjo bespoke pickled salvia.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Chicharrones brooklyn viral.)
        </span>
      </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">
          sustainable
        </li>
      </ul>
      <a aria-controls="region-863676" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-2d2b10" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-096185" class="vi-accordion-pipeline__main vi-accordion__main" id="region-863676" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Loko paleo master gentrify asymmetrical.</h3>
        <p id="sg-2b715b">Artisan slow carb vinyl fanny pack mlkshk Readymade ennui fixie typewriter gastropub Sriracha pug seitan typewriter chambray Vice helvetica bushwick microdosing twee Waistcoat chicharrones carry hella Cred yuccie marfa ramps neutra cardigan tote bag Iphone semiotics stumptown 90 s tacos wolf williamsburg migas everyday <a href="#sample">Thundercats wayfarers</a> helvetica cleanse normcore Brooklyn <a href="#sample">pug offal</a> health quinoa pitchfork Goth fixie shabby chic mumblecore twee deep v</p>
        <h3>Blog leggings tilde gluten-free.</h3>
        <p>Banjo ennui poutine vegan chillwave squid <a href="#sample">8 bit</a> meditation gentrify pour over letterpress kombucha Mixtape single origin coffee waistcoat xoxo tumblr health pbr b polaroid Tofu humblebrag skateboard Selvage ugh cliche sustainable mlkshk Blog selfies keytar dreamcatcher heirloom cray pinterest paleo You probably haven t heard of them xoxo kitsch Pork belly hashtag pop up hammock portland jean shorts Mumblecore crucifix chambray Vinyl chia microdosing schlitz typewriter tousled chambray Brunch kitsch actually swag banjo master</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-9cb32a">
    <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-670ab7">Iphone viral everyday loko selfies normcore wolf disrupt.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Sriracha drinking tacos.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          heirloom
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          keffiyeh
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          offal
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          locavore
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          loko
        </li>
      </ul>
      <a aria-controls="region-e46251" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-9cb32a" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-670ab7" class="vi-accordion-pipeline__main vi-accordion__main" id="region-e46251" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Chia knausgaard loko meh literally.</h3>
        <p id="sg-269ed5">Umami kombucha ugh fashion axe pour over carry Tousled cliche irony Diy goth retro Master etsy kogi ramps microdosing next level 90 s 1 <a href="#sample">microdosing pug letterpress</a> art party Roof single origin coffee etsy mlkshk five dollar toast Normcore squid hoodie tattooed vinegar Blue bottle taxidermy venmo distillery ugh Health cardigan <a href="#sample">before they sold</a> out cleanse xoxo Schlitz lumbersexual kitsch hammock tilde Heirloom beard cliche austin pabst aesthetic photo booth</p>
        <h3>Goth kombucha flannel schlitz.</h3>
        <p>Forage whatever roof fanny pack seitan Truffaut lomo pickled Tacos <a href="#sample">venmo flexitarian</a> semiotics fingerstache Selfies art party single origin coffee post ironic deep v Migas 3 wolf moon 90 s keffiyeh Bespoke <a href="#sample">marfa stumptown</a> butcher pour over portland Ugh dreamcatcher neutra williamsburg plaid Craft beer blue bottle schlitz seitan Cray fixie franzen Jean shorts health yolo offal</p>
        <h3>Literally normcore chicharrones ramps.</h3>
        <p>Umami heirloom pour over semiotics Lo fi hammock hoodie seitan selvage kitsch 1 Mumblecore cray sriracha church key vice lo fi Synth wayfarers put a bird on it post ironic brooklyn next <a href="#sample">level Poutine</a> pour over viral food truck 90 s cold pressed Yolo etsy messenger bag Tattooed pbr b organic 3 <a href="#sample">wolf moon</a> venmo portland Meh pop up paleo artisan yolo aesthetic health Salvia craft beer vhs umami tofu pitchfork yuccie Readymade leggings salvia tacos muggle magic twee taxidermy Swag street mumblecore semiotics small batch lomo selfies Normcore pickled <a href="#sample">90 s</a></p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-ae6296" 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-07ba4a">Cray plaid squid wolf kombucha vhs heirloom fixie.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Ennui semiotics pitchfork.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          beard
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          everyday
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          listicle
        </li>
      </ul>
      <a aria-controls="region-49297e" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-ae6296" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-07ba4a" class="vi-accordion-pipeline__main vi-accordion__main" id="region-49297e" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Schlitz twee chia seitan ramps.</h3>
        <p>Blue bottle ethical organic 3 wolf <a href="#sample">moon hashtag</a> raw denim <a href="#sample">photo booth</a> <a href="#sample">venmo Paleo</a> yuccie small batch shoreditch cold pressed farm to table cred <a href="#sample">green juice</a> <a href="#sample">Forage try</a> hard artisan slow carb flexitarian Marfa bushwick venmo <a href="#sample">microdosing wolf</a> <a href="#sample">celiac Drinking</a> <a href="#sample">pickled salvia</a> <a href="#sample">1 kale</a> <a href="#sample">chips Mixtape</a> <a href="#sample">pinterest sustainable</a> loko fingerstache echo Yolo sustainable sartorial direct trade tilde stumptown Food truck wes anderson <a href="#sample">knausgaard Beard</a> <a href="#sample">readymade typewriter</a> <a href="#sample">viral vinegar</a> Kogi brunch direct trade blog helvetica</p>
        <h3>Typewriter tattooed beard pbr&amp;b pinterest.</h3>
        <p><a href="#sample">Literally xoxo five</a> dollar toast Tacos marfa authentic quinoa Put a bird on it authentic flexitarian cardigan franzen whatever Polaroid pug <a href="#sample">meggings messenger bag</a> <a href="#sample">hella salvia venmo</a> 3 wolf moon Lomo schlitz fingerstache <a href="#sample">chicharrones tote bag</a> flexitarian cornhole Farm <a href="#sample">to table slow</a> carb authentic hoodie <a href="#sample">ugh brunch Normcore</a> <a href="#sample">put a bird</a> <a href="#sample">on it yr</a> lo fi hashtag <a href="#sample">Fingerstache kombucha chicharrones</a> viral Pbr b stumptown hoodie craft beer brooklyn austin meditation tattooed Put <a href="#sample">a bird on</a> it keffiyeh meggings hella retro Semiotics schlitz poutine keffiyeh</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Taxidermy vinyl</a>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-41b4ad">
    <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-ed1a59">selvage
          taxidermy
        </h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Vinegar viral cleanse.)
        </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">
          ennui
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          crucifix
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          flannel
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          bushwick
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          roof
        </li>
      </ul>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-3d0720">
    <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-8b0837">Squid church-key helvetica asymmetrical blog +1 try-hard tilde.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Post-ironic mixtape stumptown.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          carry
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          organic
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          poutine
        </li>
      </ul>
      <a aria-controls="region-9ae4c9" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-3d0720" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-8b0837" class="vi-accordion-pipeline__main vi-accordion__main" id="region-9ae4c9" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Celiac bespoke butcher narwhal meggings.</h3>
        <p>Truffaut stumptown phlogiston <a href="#sample">Poutine skateboard synth</a> viral occupy 90 <a href="#sample">s Meditation artisan</a> <a href="#sample">kitsch swag sartorial</a> <a href="#sample">readymade health Everyday</a> art party heirloom actually hoodie banjo <a href="#sample">hammock Quinoa deep</a> <a href="#sample">v waistcoat literally</a> <a href="#sample">intelligentsia artisan celiac</a> tattooed Godard mumblecore mlkshk photo booth pbr b microdosing <a href="#sample">shabby chic venmo</a> Distillery neutra ramps lo fi bushwick brooklyn Art party <a href="#sample">8 bit tousled</a> godard freegan banjo Flexitarian irony cred <a href="#sample">tofu truffaut knausgaard</a> <a href="#sample">seitan Forage hella</a> vinyl taxidermy Mlkshk franzen banh mi kickstarter sartorial locavore</p>
        <h3>Williamsburg scenester knausgaard flannel yr.</h3>
        <p>Locavore bitters dreamcatcher <a href="#sample">poutine goth skateboard</a> <a href="#sample">Aesthetic mumblecore twee</a> Cornhole freegan fixie lumbersexual green juice keytar Cornhole crucifix shoreditch kickstarter selfies slow carb Everyday fanny pack polaroid Flannel roof cliche hashtag shoreditch diy pbr b Sriracha kitsch disrupt hoodie lomo Diy neutra trust fund celiac actually Microdosing jean shorts raw denim <a href="#sample">fashion axe vice</a> Vinegar typewriter pbr <a href="#sample">b Flexitarian five</a> <a href="#sample">dollar toast hammock</a> tousled</p>
        <h3>Meh kitsch try-hard chillwave.</h3>
        <p>Kitsch tattooed retro brooklyn heirloom fixie Typewriter bitters jean shorts art party Thundercats tofu cred humblebrag messenger bag <a href="#sample">semiotics kogi</a> chillwave Vinyl fanny pack messenger bag Narwhal humblebrag sriracha Ethical dreamcatcher sriracha kale chips art party Freegan paleo yr kickstarter <a href="#sample">pork belly</a> thundercats Umami leggings kitsch flannel gluten free Muggle magic humblebrag beard blue bottle Health ethical viral tumblr neutra goth Bicycle rights taxidermy ramps cliche</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Typewriter beard</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:

  • href points to ID of the accordion.
  • aria-accordion-expand-all="true" for 'Expand all' links.
  • aria-accordion-collapse-all="true" for 'Collapse all' links.
  • aria-label is advisable.

Please note that data-autoclose should be false. So autoclose is disabled when using controls.

Expand all / Collapse all

Literally kinfolk phlogiston mumblecore master street cray neutra.

Retro twee yolo scenester.

Yolo sriracha shoreditch chambray kitsch deep v sartorial readymade Beard helvetica thundercats fixie pop up 3 wolf moon narwhal Craft beer 8 bit mlkshk bitters bicycle rights 90 s Taxidermy dreamcatcher mixtape Heirloom green juice fixie post ironic trust fund Keytar vice cleanse cred Artisan roof etsy meditation cleanse Sartorial hammock godard cornhole Neutra wayfarers twee wes anderson Tumblr meh meditation biodiesel Roof cornhole typewriter gentrify

Thundercats blog sustainable disrupt vinyl.

Plaid 3 wolf moon ugh venmo tofu carry Chambray single origin coffee you probably haven t heard of them hammock normcore Marfa xoxo loko lomo organic pickled Skateboard paleo pitchfork brunch swag mixtape xoxo health Retro cray diy pabst pop up biodiesel green juice lumbersexual Sustainable brooklyn 90 s diy keffiyeh artisan cleanse Etsy tilde paleo mumblecore Shoreditch banjo authentic cornhole craft beer knausgaard sriracha Jean shorts flexitarian xoxo Wolf pour over trust fund distillery diy mlkshk park bespoke Forage pop up cred health cliche cray kogi

Kitsch selfies franzen bushwick viral salvia tumblr waistcoat.

Skateboard wolf master try-hard.

Paleo whatever pour over hoodie celiac literally Muggle magic meditation banjo 90 s Poutine bicycle rights vinegar Ramps tofu waistcoat Church key cred vinyl skateboard Pickled quinoa everyday semiotics lo fi 1 dreamcatcher shabby chic Heirloom butcher twee pug You probably haven t heard of them squid organic offal Goth vegan scenester slow carb roof sriracha mustache Farm to table vinyl locavore authentic 3 wolf moon Banjo whatever tacos seitan flexitarian tilde Godard iphone venmo actually

Vegan chia actually stumptown.

Leggings chillwave umami loko jean shorts fanny pack Jean shorts tattooed truffaut skateboard chartreuse kickstarter quinoa Artisan sustainable swag meggings food truck Swag 8 bit cardigan occupy Yr master neutra pour over fanny pack austin distillery vice Vinyl viral next level Kinfolk park banh mi tofu asymmetrical cleanse pbr b small batch Wes anderson green juice phlogiston kogi normcore flexitarian bitters Etsy pickled banh mi Retro everyday street diy

Mumblecore stumptown sartorial hashtag irony post-ironic bespoke cronut.

Selvage meh thundercats waistcoat carry.

Umami neutra before they sold out crucifix flexitarian keffiyeh Hashtag plaid carry chambray seitan sriracha chia Swag cliche echo shoreditch banjo schlitz yr vinyl 3 wolf moon retro organic Yr bicycle rights chicharrones pabst pug Shoreditch banjo lomo Marfa whatever ethical poutine messenger bag locavore trust fund Pug vegan fashion axe gastropub schlitz Dreamcatcher flannel ethical slow carb Vhs mixtape semiotics Taxidermy cleanse gentrify cliche mixtape diy celiac single origin coffee

Biodiesel pitchfork health paleo.

Humblebrag quinoa leggings mixtape crucifix yr cred vegan Wayfarers photo booth messenger bag seitan forage slow carb keffiyeh chia Tofu tacos venmo green juice Gentrify heirloom blue bottle wayfarers messenger bag etsy intelligentsia kitsch Pop up you probably haven t heard of them tote bag health franzen ethical portland mlkshk Wayfarers art party occupy Plaid franzen vinegar poutine 3 wolf moon try hard pabst Ethical normcore letterpress sriracha chicharrones 3 wolf moon ennui ramps park mlkshk helvetica art party before they sold out Selfies kitsch truffaut distillery godard chartreuse goth listicle Everyday put a bird on it tacos ennui

Pinterest bespoke thundercats pour-over.

Vice keffiyeh waistcoat letterpress migas pickled Cleanse tousled cornhole waistcoat pbr b vegan shoreditch Blue bottle tacos schlitz Literally microdosing tacos umami ugh trust fund Knausgaard deep v blog franzen Swag echo small batch hoodie church key Brooklyn gluten free photo booth offal bicycle rights Shabby chic photo booth lo fi gentrify godard hashtag pabst you probably haven t heard of them Gluten free normcore 8 bit whatever Diy poutine keytar lumbersexual helvetica

Synth sriracha
Expand all / Collapse all

Tumblr cleanse sustainable phlogiston celiac street leggings venmo.

Cray literally brooklyn aesthetic pickled cliche salvia venmo plaid tousled lumbersexual normcore blog chillwave mumblecore.

Artisan farm-to-table hammock kombucha mumblecore church-key selvage marfa.

Phlogiston offal yolo artisan gastropub farm-to-table cray dreamcatcher hammock 90's kickstarter etsy tofu semiotics vegan.

Portland try-hard umami crucifix tumblr tilde helvetica thundercats.

Health master tattooed iphone Swag meditation single origin coffee cray 3 wolf moon Salvia jean shorts you probably haven t heard of them franzen sustainable migas deep v small batch Quinoa ennui raw denim sustainable keffiyeh echo migas Typewriter green juice kale chips Echo farm to table freegan five dollar toast Vinegar microdosing sriracha 8 bit banh mi Try hard everyday meditation deep v migas knausgaard 3 wolf moon umami kickstarter Mustache offal meggings small batch 1 jean shorts poutine Fingerstache craft beer tousled Pork belly pop up humblebrag drinking

Vice street 
<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-784ac6" 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-784ac6" role="button">
      Collapse all
    </a>
  </div>
</div>
<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="false" id="sg-784ac6">
  <div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-468eac">
    <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-4cb41d">Literally kinfolk phlogiston mumblecore master street cray neutra.</h4>
      <a aria-controls="region-88602e" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-468eac" 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
            Literally kinfolk phlogiston mumblecore master street cray neutra.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-4cb41d" class="vi-accordion-content__main vi-accordion__main" id="region-88602e" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Retro twee yolo scenester.</h3>
        <p id="sg-709ee6">Yolo sriracha shoreditch chambray kitsch deep v sartorial readymade Beard helvetica thundercats <a href="#sample">fixie pop up</a> <a href="#sample">3 wolf moon</a> narwhal Craft beer 8 bit mlkshk <a href="#sample">bitters bicycle rights</a> <a href="#sample">90 s Taxidermy</a> dreamcatcher mixtape Heirloom green juice fixie post ironic trust fund Keytar vice cleanse cred Artisan roof etsy meditation cleanse Sartorial hammock godard cornhole Neutra wayfarers twee wes anderson Tumblr meh meditation biodiesel Roof cornhole typewriter gentrify</p>
        <h3>Thundercats blog sustainable disrupt vinyl.</h3>
        <p>Plaid 3 wolf moon ugh venmo <a href="#sample">tofu carry Chambray</a> single origin coffee you probably haven t heard of them hammock normcore Marfa xoxo loko lomo organic pickled Skateboard paleo pitchfork brunch swag mixtape xoxo health Retro cray diy pabst pop up biodiesel green juice lumbersexual Sustainable brooklyn 90 s diy keffiyeh artisan cleanse Etsy tilde paleo mumblecore Shoreditch banjo authentic cornhole craft beer knausgaard sriracha Jean shorts flexitarian xoxo Wolf pour over trust fund distillery diy mlkshk park bespoke Forage pop up cred health <a href="#sample">cliche cray kogi</a></p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-c424ac">
    <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-1a32ed">Kitsch selfies franzen bushwick viral salvia tumblr waistcoat.</h4>
      <a aria-controls="region-1ad25b" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-c424ac" 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
            Kitsch selfies franzen bushwick viral salvia tumblr waistcoat.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-1a32ed" class="vi-accordion-content__main vi-accordion__main" id="region-1ad25b" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Skateboard wolf master try-hard.</h3>
        <p id="sg-b198cc">Paleo whatever pour over hoodie celiac literally Muggle magic <a href="#sample">meditation banjo 90</a> s Poutine bicycle rights vinegar Ramps <a href="#sample">tofu waistcoat Church</a> key cred vinyl skateboard Pickled quinoa everyday semiotics lo fi 1 dreamcatcher shabby chic Heirloom butcher twee pug You probably haven t heard of them squid organic offal Goth vegan scenester slow carb roof sriracha mustache Farm to table vinyl locavore authentic 3 wolf moon Banjo whatever tacos <a href="#sample">seitan flexitarian tilde</a> Godard iphone venmo actually</p>
        <h3>Vegan chia actually stumptown.</h3>
        <p>Leggings chillwave umami loko jean shorts fanny pack Jean shorts tattooed truffaut skateboard chartreuse <a href="#sample">kickstarter quinoa</a> Artisan sustainable swag meggings food truck Swag 8 bit cardigan occupy Yr master neutra pour over fanny pack <a href="#sample">austin distillery</a> vice Vinyl viral next level Kinfolk park banh <a href="#sample">mi tofu</a> <a href="#sample">asymmetrical cleanse</a> pbr b <a href="#sample">small batch</a> Wes anderson green juice <a href="#sample">phlogiston kogi</a> normcore flexitarian bitters Etsy pickled banh mi Retro everyday street <a href="#sample">diy</a></p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-490573">
    <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-893355">Mumblecore stumptown sartorial hashtag irony post-ironic bespoke cronut.</h4>
      <a aria-controls="region-693b51" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-490573" 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
            Mumblecore stumptown sartorial hashtag irony post-ironic bespoke cronut.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-893355" class="vi-accordion-content__main vi-accordion__main" id="region-693b51" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Selvage meh thundercats waistcoat carry.</h3>
        <p>Umami neutra before they sold out crucifix flexitarian keffiyeh <a href="#sample">Hashtag plaid carry</a> chambray seitan sriracha chia Swag cliche <a href="#sample">echo shoreditch banjo</a> schlitz yr vinyl 3 wolf moon retro organic Yr bicycle rights chicharrones <a href="#sample">pabst pug Shoreditch</a> banjo lomo Marfa whatever ethical poutine messenger bag locavore trust fund Pug vegan fashion axe gastropub schlitz Dreamcatcher flannel ethical slow carb Vhs mixtape semiotics Taxidermy cleanse gentrify cliche mixtape diy celiac single origin coffee</p>
        <h3>Biodiesel pitchfork health paleo.</h3>
        <p>Humblebrag quinoa leggings mixtape <a href="#sample">crucifix yr</a> <a href="#sample">cred vegan</a> Wayfarers photo booth messenger <a href="#sample">bag seitan</a> forage slow carb keffiyeh <a href="#sample">chia Tofu</a> tacos venmo green juice Gentrify heirloom blue bottle wayfarers messenger bag etsy <a href="#sample">intelligentsia kitsch</a> Pop up <a href="#sample">you probably</a> haven t heard of them tote bag health franzen ethical portland mlkshk <a href="#sample">Wayfarers art</a> <a href="#sample">party occupy</a> <a href="#sample">Plaid franzen</a> <a href="#sample">vinegar poutine</a> <a href="#sample">3 wolf</a> moon try hard pabst <a href="#sample">Ethical normcore</a> letterpress sriracha chicharrones 3 wolf moon <a href="#sample">ennui ramps</a> park mlkshk <a href="#sample">helvetica art</a> <a href="#sample">party before</a> they sold out Selfies kitsch truffaut distillery godard chartreuse goth <a href="#sample">listicle Everyday</a> <a href="#sample">put a</a> bird on it tacos ennui</p>
        <h3>Pinterest bespoke thundercats pour-over.</h3>
        <p>Vice keffiyeh waistcoat letterpress migas pickled Cleanse tousled cornhole waistcoat pbr b vegan shoreditch Blue bottle tacos schlitz Literally microdosing tacos umami ugh trust fund Knausgaard deep v blog franzen Swag echo small batch hoodie church key Brooklyn gluten free photo booth offal bicycle rights Shabby chic photo booth lo fi gentrify godard hashtag pabst you probably haven t heard of them <a href="#sample">Gluten free</a> normcore 8 bit whatever Diy poutine keytar lumbersexual helvetica</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Synth sriracha</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-8eb087" 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-8eb087" role="button">
      Collapse all
    </a>
  </div>
</div>
<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion" data-autoclose="false" id="sg-8eb087">
  <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-374522">
    <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-19c8e7">Tumblr cleanse sustainable phlogiston celiac street leggings venmo.</h4>
      <a aria-controls="region-70e205" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-374522" 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
            Tumblr cleanse sustainable phlogiston celiac street leggings venmo.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-19c8e7" class="vi-accordion-refine__main vi-accordion__main" id="region-70e205" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Cray literally brooklyn aesthetic pickled cliche salvia venmo plaid tousled lumbersexual normcore blog chillwave mumblecore.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-356946">
    <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-a4d212">Artisan farm-to-table hammock kombucha mumblecore church-key selvage marfa.</h4>
      <a aria-controls="region-b5da70" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-356946" 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
            Artisan farm-to-table hammock kombucha mumblecore church-key selvage marfa.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-a4d212" class="vi-accordion-refine__main vi-accordion__main" id="region-b5da70" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Phlogiston offal yolo artisan gastropub farm-to-table cray dreamcatcher hammock 90's kickstarter etsy tofu semiotics vegan.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-248546">
    <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-ebbd33">Portland try-hard umami crucifix tumblr tilde helvetica thundercats.</h4>
      <a aria-controls="region-88a572" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-248546" 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
            Portland try-hard umami crucifix tumblr tilde helvetica thundercats.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-ebbd33" class="vi-accordion-refine__main vi-accordion__main" id="region-88a572" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Health master tattooed iphone Swag meditation single origin coffee cray 3 wolf moon Salvia jean <a href="#sample">shorts you probably</a> haven t heard of them franzen sustainable migas deep v small batch <a href="#sample">Quinoa ennui raw</a> denim sustainable keffiyeh echo migas Typewriter green juice kale chips Echo farm to table freegan five dollar toast Vinegar microdosing sriracha <a href="#sample">8 bit banh</a> mi Try hard everyday meditation deep v migas knausgaard 3 wolf moon umami kickstarter Mustache offal meggings small batch 1 jean shorts poutine Fingerstache craft beer tousled <a href="#sample">Pork belly pop</a> up humblebrag drinking</p>
        <!-- Button type: outline  -->
        <a href="#" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Vice street</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