This page uses javascript to help render elements, if you have problems please enable javascript.
 
Skip to main content
 
 
 
 
 
 
You are now inside the main content area
 
 
 
left col

Using Accordions and Backgrounds

Data can  be easier to read when its broken into sections that allow users to isolate.  Backgrounds and accordions do both of those things and putting them together is easy to do.

The ability to collapse data into accordions (or tabs) is great for putting a lot of easy to digest data.  While accordions have their own color schemes they can be put into sections with background colors.  This page documents examples of different colors and shows you what is possible.  The layout below uses gaps to help separate the sections so you can visualize how the content is organized on the page.

right col
 
left col

The default background

Out of the box the background is crafted to handle two things: 1) reduce glare and improve batter life and 2) allow white colors to stand out from the background.  The styles are pre-loaded with background and text colors that help keep things accessible.  When mixing the styles you can see odd behavior as background colors can be seen but in those cases let the web team know so we can fix it.

right col
 
 
left col

background-white

Example Text

Lorem ipsum odor amet, consectetuer adipiscing elit. Turpis inceptos ac maecenas scelerisque, felis hac aptent? Facilisi mollis eros tempor cursus ut litora. Velit natoque ullamcorper tempor odio placerat consectetur porttitor. Condimentum consectetur vehicula rutrum; diam neque dictumst.

First Accordion

Tempor nostra fermentum pharetra at blandit. Viverra turpis nostra sem aliquet lectus malesuada mus id. At etiam mattis maximus pretium dapibus consectetur a, molestie mauris. Nostra interdum odio sem arcu donec.

Ex efficitur pharetra ultricies pretium viverra, praesent natoque sit cras! Varius sed vivamus feugiat suscipit vestibulum netus nascetur nisi ultricies. Ornare nisl torquent adipiscing pretium himenaeos pharetra lobortis aenean. Purus donec fermentum accumsan faucibus lacus himenaeos montes.

Second Accordion

Parturient mi erat consequat finibus cubilia maximus justo amet. Interdum pharetra mauris sapien facilisis amet. Lacinia congue tempus; senectus mus scelerisque condimentum ad curae. Interdum adipiscing sem libero donec leo gravida himenaeos. Pharetra potenti diam ornare litora sapien eros mus rhoncus.

Thrid Accordion

Viverra dapibus vulputate ridiculus fames tortor imperdiet. Accumsan elementum himenaeos cras hendrerit amet iaculis duis varius. Hac aliquet venenatis eleifend conubia potenti elementum facilisi egestas.

Vel habitasse etiam vulputate blandit metus scelerisque placerat.

Et leo justo euismod eleifend vehicula dui. Posuere est justo adipiscing dolor facilisi congue mauris. Mauris orci curabitur nibh risus neque leo. Pulvinar tortor porta justo odio egestas molestie dapibus tempus conubia.

right col
 
 
left col

Example Text

Lorem ipsum odor amet, consectetuer adipiscing elit. Turpis inceptos ac maecenas scelerisque, felis hac aptent? Facilisi mollis eros tempor cursus ut litora. Velit natoque ullamcorper tempor odio placerat consectetur porttitor. Condimentum consectetur vehicula rutrum; diam neque dictumst.

First Accordion

Tempor nostra fermentum pharetra at blandit. Viverra turpis nostra sem aliquet lectus malesuada mus id. At etiam mattis maximus pretium dapibus consectetur a, molestie mauris. Nostra interdum odio sem arcu donec.

Ex efficitur pharetra ultricies pretium viverra, praesent natoque sit cras! Varius sed vivamus feugiat suscipit vestibulum netus nascetur nisi ultricies. Ornare nisl torquent adipiscing pretium himenaeos pharetra lobortis aenean. Purus donec fermentum accumsan faucibus lacus himenaeos montes.

Second Accordion

Parturient mi erat consequat finibus cubilia maximus justo amet. Interdum pharetra mauris sapien facilisis amet. Lacinia congue tempus; senectus mus scelerisque condimentum ad curae. Interdum adipiscing sem libero donec leo gravida himenaeos. Pharetra potenti diam ornare litora sapien eros mus rhoncus.

Thrid Accordion

Viverra dapibus vulputate ridiculus fames tortor imperdiet. Accumsan elementum himenaeos cras hendrerit amet iaculis duis varius. Hac aliquet venenatis eleifend conubia potenti elementum facilisi egestas.

Vel habitasse etiam vulputate blandit metus scelerisque placerat.

Et leo justo euismod eleifend vehicula dui. Posuere est justo adipiscing dolor facilisi congue mauris. Mauris orci curabitur nibh risus neque leo. Pulvinar tortor porta justo odio egestas molestie dapibus tempus conubia.

right col
 
 
left col
right col
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col
 
 
left col
right col