Accordions
Accordions enable users to open and close sections of page content. The shown/open state enables viewing details. The hidden/closed state enables users to focus on other content.
Standard Accordion
Headline title goes here
Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control.
Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control.
Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control.
Headline title goes here
Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control.
Headline title goes here
Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control.
Accordion with Independent Panels
The Show All / Hide All controls should be used for accordions that have six or more cards, and are capable of expanding more than one panel at a time. The classes "accordion-card-1" and "accordion-arrow-1" have been added to this accordion so that Show/Hide All operations don't affect the others on the page.
Headline title goes here
Headline title goes here
Headline title goes here
Secondary Accordion
Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control. Content that is shown and hidden by the control.
Show More / Show Less List
Show More / Show Less Paragraph
Content Gallery
To simplify interactions, opening any content gallery will shut all others. In the production version, only those that are on the same row would be shut.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Card title 1
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.