Web Style Guide
Menu
Search

Footnotes

The footnotes component is a list of notes which are intrinsically connected to the previous component(s).

Minimum requirements
  • 1 item (li or p)

Quick access

UsageGuidelines
HTML structurePresetsVariations
Embedding
?
main (HTML file)
Component
div.footnotes

Some components can be placed inside other components. Whenever this happens, they are no longer components but elements of the respective parent component. Know in this section in which components can you place the footnotes element.

Table
Nesting
Advanced settings

Presets

?

Variations

?
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML
Copy to clipboard








	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsEmbeddingNestingTest pageGo to top		

	

	

		
Details

		
Usage
The footnotes component is used to display a list of notes not directly related to the content of the article. They are used to provide additional information that the author does not wish to include in the article, but that are made accessible via these notes.
Guidelines
  1. Should be placed on the bottom of the text it is linked
HTML structure
Overall HTML view of a footnotes component:
HTML file (.html)
        
(other component(s))

        
div.footnotes
            
ol (or ul)
                
li (one or more)

            

        

        
(other component(s))

    
Presets
Footnotes presets:
PresetDescription
DefaultDefault template.
Variations
Footnotes variations:
VariationDescription
FootnotesComposed of an ol or ul list.
Embedding
The footnotes component can be embedded inside other component:
ComponentDescription
TableWhenever it is necessary add additional information to a table.
main (HTML file)
        
(component, one of the above table)
            
div.footnotes (element)

        

    

    
Some components can be placed/embedded inside other components. Whenever this happens, they become elements of the respective parent component and they can no longer be called components.
Nesting
The footnotes component cannot be used as a container of other components and/or elements.
main (HTML file)
        
div.footnotes
            
(Element)