VRT Tabs and Accordions

This page displays the different varieties of Tabs and Accordions available on the Digital Commons platform. It serves as a baseline for visual regression testing when code is deployed to the platform. Note that not every combination shown is desirable or a best practice. This band width is set to None.

Link to Accordion BA

Tabs on a Landing Page

Tab/Accordion Items

id=#Tab-TabA-1650. aardvark aardwolf aback abacus abaft abalone abandon abandoned abandoning abandonment abandons abase abasement abash abashed abashment abate abated abatement abating abattoir abaxial abaya abbess abbey abbot abbreviate abbreviated abbreviation abdicate abdicated abdication abdomen abdominal abdominoplasty abduct abducted abduction abductor abecedarian abelian abend aberrance aberrancy aberrant aberrated aberration

id=#Tab-TabB-1651. Text in Content area, Inline image in Content area, Event Card in Content area, CTA Card in sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie luctus dolor, a pellentesque ex.

Image caption.

Tab/Accordion Paragraph
View Embed
Current Blog List

Current Blog List

id=#Tab-TabC-1652. View embed and text in the Content area. Video card in the Sidebar. 

id=#Tab-TabD-1653. A link. daintiness dangerless daringness daydreamer dazzlingly deactivate deadliness deadlocked dealership debilitate debriefing decampment decapitate decelerate decentness decimalize decimation deciphered decisively declassify declension decolorize decomposed decomposer decompress deconflict decorating decoration decorative decreasing decryption dedicating dedication deductible defacement defamation defamatory defaulting defeasance

Accordion on a Landing Page, no padding

Tab/Accordion Items

id=#AccordionAA-1655. Text in Content area, Inline image in Content area, Event Card in Content area, CTA Card in sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie luctus dolor, a pellentesque ex.

Image caption.

Tab/Accordion Paragraph
View Embed
Current Blog List

Current Blog List

id=#AccordionBA-1656. View embed and text in the Content area. Stat card in the Sidebar. A person who plays the accordion is called an accordionist. The concertina, harmoneon and bandoneón are related. The harmonium and American reed organ are in the same family, but are typically larger than an accordion and sit on a surface or the floor.

id=#AccordionCA-1657. The accordion is played by compressing or expanding the bellows while pressing buttons or keys, causing pallets to open, which allow air to flow across strips of brass or steel, called reeds. These vibrate to produce sound inside the body.

id=#AccordionDA-1658. Statistic card in sidebar. Valves on opposing reeds of each note are used to make the instrument's reeds sound louder without air leaking from each reed block. The musician normally plays the melody on buttons or keys on the right-hand side (referred to as the manual), and the accompaniment on bass or pre-set chord buttons on the left-hand side.

Side by Side Tabs

With Other Paragraph Types

Tab/Accordion Items

id=#Tab-CTACard-1684. CTA Card in Sidebar. The accordion is widely spread across the world because of the waves of immigration from Europe to the Americas and other regions. In some countries (for example: Argentina, Brazil, Colombia, the Dominican Republic, Mexico, and Panama) it is used in popular music.

 

More Paragraph Types

Tab/Accordion Items

Tab/Accordion Paragraph
Woman in business suit in an office, coworkers in the background

Firstname Lastname

Profile in content area id=#Tab-ProfileandCTA-1688

Tab/Accordion Paragraph
View Embed
Current Blog List

Current Blog List

id=#Tab-ViewEmbed-1689. View Embed in Content Area

Table caption
Cat Dog Horse Fish
id=#Tab-HTMLTable-1697 Afghan Appaloosa Catfish
Bengal Collie Belgian Hatchetfish
Burmese Kai Ken Lipizzan Minnow
Korat Labrador Shire Salmon
Sphynx Spaniel Thoroughbred Tetra

 

id=#Tab-KitchenSink-1811. Text in Content area, Event Card in Content area, Stat Card in sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Image caption.

Side by Side Accordions

With Other Paragraph Types

Tab/Accordion Items

id=#CTACard-1795. CTA Card in Sidebar. The accordion is widely spread across the world because of the waves of immigration from Europe to the Americas and other regions. In some countries (for example: Argentina, Brazil, Colombia, the Dominican Republic, Mexico, and Panama) it is used in popular music.

 

More Paragraph Types

Tab/Accordion Items

Tab/Accordion Paragraph
Woman in business suit in an office, coworkers in the background

Firstname Lastname

Job Title id=#ProfileandCTA-1803

Tab/Accordion Paragraph
View Embed
Current Blog List

Current Blog List

id=#ViewEmbed-1805. View Embed in Content Area

Table caption
Cat Dog Horse Fish
id=#HTMLTable-1806 Afghan Appaloosa Catfish
Bengal Collie Belgian Hatchetfish
Burmese Kai Ken Lipizzan Minnow
Korat Labrador Shire Salmon
Sphynx Spaniel Thoroughbred Tetra

 

Image caption. Inline Large align right

id=#KitchenSink-1814. Text in Content area, Event Card in Content area, Stat Card in sidebar. Lorem ipsum dolor sit amet, consectetur adipiscing elit.