Web Style Guide
Menu
Search

Explainer box

This component should be used to link to explainers from expert content. This allows non-experts to have an easy-to-find reference to learn more about a topic. It should ideally be added to as many pages as possible.

Minimum requirements
  • 1 image (div[data-image])
  • 1 link name (a) and 1 hyperlink (a[href])

Quick access

UsageGuidelines
HTML structurePresetsVariationsModifiers
Embedding
Nesting
Advanced settings

Presets

?

Variations

?

Modifiers

?
NOT AN EXPERT? CHECK EXPLAINER
LEARN MORE
Lorem ipsum dolor sit amet?
HTML
Copy to clipboard




Component used in
Page template
article-page
hub-page
sub-section-page
sub-section-page





	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsModifiersEmbeddingNestingTest pageGo to top		

	

	

		
Details

		
Usage
This component is used to guide users to an explainer on the ECB website whose content is related to the content of the page the box is on. The explainer box should not be used to link to an explainer from another explainer, instead you can use a regular link, or carousel. 
Guidelines
  1. Apart from the homepage, should be placed always on the bottom of the page
  2. Should not be used in an explainer
  3. Please leave this text unchanged:
    • the blue bubble (NOT AN EXPERT? CHECK EXPLAINER)
    • the blue text in the grey box (LEARN MORE)
  4. Character limits:
    • 45 characters for the link name (a)
  5. Image dimensions:
    • 2560x750 (resolution)
    • JPG and WEBP (format)
HTML structure
Overall HTML view of an explainer box component:
HTML file (.html)
        
(other component(s))

        
div[data-image].explainer-box
            
div.wrapper
                
div.bubble-box

                
a
                    
div
                        
span

                    

                

            

        

    
Presets
Explainer box presets:
PresetDescription
DefaultDefault preset.
HomepageDefault homepage preset.
Presets are ready to use HTML structures.
Variations
Explainer box variations:
VariationDescription
DefaultThis snippet is composed of a background image, a fixed label and a link with headline.
Modifiers
Explainer box classes:
ClassDescription
-bottom-arrowAdds an arrow on the bottom of the component linking to the next component.
-top, -leftChanges the position of the explainer link. Use these modifiers if the link is going over important parts of the image.
-dark-blueChanges the background colour of the explainer link. Use this if the image is very light to increase the contrast with links.
-no-space-belowRemoves component margin bottom.
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The explainer box component cannot be embedded inside other component.
main (HTML file)
        
(component)
            
div.explainer-box

        

    
Nesting
The explainer box component cannot be used as a container of other components and/or elements.
main (HTML file)
        
div.explainer-box
            
(Element)