Tables, Tabs, Accordions & Lists

Tables

Heading 1 Heading 2 Heading 3 Heading 4
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content
Cell Content Cell Content Cell Content Cell Content

Tabs (Full Width Bar)

Tab content will be the content of whatever page the tab is referencing. Full width tab bars are subpage navigation like what is used in this Style Guide at the top


Tabs (With Content Container)

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, felis nec sollicitudin condimentum, tortor nibh tincidunt urna, ut efficitur risus leo ac purus. Phasellus quam metus, dignissim at tincidunt at, sollicitudin eu mauris.

Accordions

Accordion 1

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion 2

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion 3

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.


Unordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh ipsum consequat nisl vel pretium lectus quam id. At quis risus sed vulputate odio.

  • Unordered List Item
  • Second Unordered List Item
    • Sub-item
  • Third Unordered List Item

Ordered List

  1. Ordered List Item
  2. Second Ordered List Item
    1. Sub-item
  3. Third Ordered List Item