Accordion
The Accordion widget is a useful UI element for various content types, such as lists and FAQ's. The colors are theme-specifc, but I've included all 3 options for display purposes. The Accordion will take the size (width) of its containing element.
One nuance I included can be seen on the two smaller Accordion widgets below (Medical & Dual Themes). You'll notice the text in the second Accordion item wraps to a second line. Using the calc function in CSS, calc(50% - 10px); the "+" or "-" icon will always remain centered vertically no matter how many lines the item title wraps to. Thanks to the advent of the flex property, vertical centering is a breeze nowadays. But I was pretty happy to find a solution using calc at the time.
Downtown Campus Theme
Hey now here's some text.
Deep v leggings meditation chillwave, skateboard sustainable readymade aesthetic master cleanse freegan tousled hella fashion axe cray. Four dollar toast banjo XOXO craft beer. Taxidermy kitsch ethical, disrupt listicle pug wayfarers selvage iPhone blog Pitchfork readymade. Narwhal cornhole fashion axe cronut cliche, farm-to-table salvia Pinterest. Lumbersexual Bushwick beard gastropub four loko. Sriracha Wes Anderson mustache bespoke messenger bag four loko. Swag trust fund PBR&B tilde, readymade Carles farm-to-table cornhole bitters locavore retro.
Content inside tab 2
Pug scenester skateboard, XOXO drinking vinegar four loko Intelligentsia dreamcatcher master cleanse yr Echo Park Shoreditch.
Health goth readymade jean shorts lumbersexual Carles, fanny pack banjo tattooed raw denim vinyl leggings whatever fashion axe narwhal chia. Banksy kitsch selfies cornhole, drinking vinegar twee plaid Schlitz 90's photo booth meh. Pickled wolf typewriter VHS Schlitz organic.
- Here is a list item.
- This is yet another list item.
- This is the third and final list item.
Medical Campus Theme
Hey now here's some text.
Deep v leggings meditation chillwave, skateboard sustainable readymade aesthetic master cleanse freegan tousled hella fashion axe cray. Four dollar toast banjo XOXO craft beer. Taxidermy kitsch ethical, disrupt listicle pug wayfarers selvage iPhone blog Pitchfork readymade. Narwhal cornhole fashion axe cronut cliche, farm-to-table salvia Pinterest. Lumbersexual Bushwick beard gastropub four loko. Sriracha Wes Anderson mustache bespoke messenger bag four loko. Swag trust fund PBR&B tilde, readymade Carles farm-to-table cornhole bitters locavore retro.
Content inside tab 2
Pug scenester skateboard, XOXO drinking vinegar four loko Intelligentsia dreamcatcher master cleanse yr Echo Park Shoreditch.
Health goth readymade jean shorts lumbersexual Carles, fanny pack banjo tattooed raw denim vinyl leggings whatever fashion axe narwhal chia. Banksy kitsch selfies cornhole, drinking vinegar twee plaid Schlitz 90's photo booth meh. Pickled wolf typewriter VHS Schlitz organic.
- Here is a list item.
- This is yet another list item.
- This is the third and final list item.
Dual Campus Theme
Hey now here's some text.
Deep v leggings meditation chillwave, skateboard sustainable readymade aesthetic master cleanse freegan tousled hella fashion axe cray. Four dollar toast banjo XOXO craft beer. Taxidermy kitsch ethical, disrupt listicle pug wayfarers selvage iPhone blog Pitchfork readymade. Narwhal cornhole fashion axe cronut cliche, farm-to-table salvia Pinterest. Lumbersexual Bushwick beard gastropub four loko. Sriracha Wes Anderson mustache bespoke messenger bag four loko. Swag trust fund PBR&B tilde, readymade Carles farm-to-table cornhole bitters locavore retro.
Content inside tab 2
Pug scenester skateboard, XOXO drinking vinegar four loko Intelligentsia dreamcatcher master cleanse yr Echo Park Shoreditch.
Health goth readymade jean shorts lumbersexual Carles, fanny pack banjo tattooed raw denim vinyl leggings whatever fashion axe narwhal chia. Banksy kitsch selfies cornhole, drinking vinegar twee plaid Schlitz 90's photo booth meh. Pickled wolf typewriter VHS Schlitz organic.
- Here is a list item.
- This is yet another list item.
- This is the third and final list item.
