Web Style Guide
Menu
Search

AccordionFigure

A figure element embedded in an accordion is a piece of self-contained content mainly used to enclose images, graphics or charts.

Minimum requirements
  • 1 accordion item
  • 1 image (img[src])

Quick access

UsageGuidelines
HTML structurePresetsVariations
Advanced settings

Presets

?

Variations

?

Modifiers

?
Lorem ipsum dolor sit amet

Chart/Figure/Table 5

Chart title

Chart subtitle, optional

(Chart unit)

A link with more information, optional

Notes, sources and captions go here.

HTML
Copy to clipboard





	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsTest pageGo to top		

	

	

		
Details

		
Usage
The figure element was designed to enclose images, graphics or charts inside accordions.
Guidelines
  1. Should be embedded in an accordion component
HTML structure
Overall HTML view of a figure element inside an accordion:
HTML file (.html)
        
...

        
div.accordion
            
div.header

            
div.content-box
                
div.figure

            

        

        
...

    
Presets
Accordion with figure presets:
PresetDescription
DefaultDefault template.
Variations
Accordion with figure variations: