Web Style Guide
Menu
Search

Jumbo box

A jumbo box is a full-width content container which visually enhances a piece of information.

Minimum requirements
  • 1 heading (h3)
  • 1 paragraph (p)
  • 1 image (div[data-image])

Quick access

UsageGuidelines
HTML structurePresetsVariationsModifiers
Embedding
Nesting
?
main (HTML file)
div.jumbo-box
Element

Some elements can be placed directly inside the component. They are component add-ons which allow you to adapt the HTML structure to your needs. Know in this section which elements can be added to the jumbo box component.

Exchange ratesIframeVideo
Advanced settings

Presets

?

Variations

?

Modifiers

?

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, facere reiciendis exercitationem eligendi ducimus ipsum quos impedit saepe ab cum ad ratione eius nemo rem asperiores dolorem dolores obcaecati voluptas.

Lorem ipsum dolor sit amet
HTML
Copy to clipboard




Component used in
Page template
publication-landing-page





	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsModifiersEmbeddingNestingTest pageGo to top		

	

	

		
Details

		
Usage
The jumbo box component should be used whenever you want to emphasize visual content, in most of the cases for big visuals.
Guidelines
  1. Image resolution should be 1000x750
  2. Image properties recommended:
    • 1280x700 (resolution)
    • 2560x750 (resolution)
    • 1000x750 (resolution) for the promo preset
    • JPG and WEBP (format)
  3. Character limits recommended:
    • 75 characters for the heading (h3)
    • 280 characters for the paragraph (p)
HTML structure
Overall HTML view of a jumbo box component:
HTML file (.html)
        
(other component(s))

        
div.jumbo-box
            
div.upper
                
div.content-box
                    
h3

                    
p

                

            

            
div.lower
                
div[data-image]

            

        

        
(other component(s))

    
Nesting element might significantly affect the HTML markup.
Presets
Jumbo box presets:
PresetDescription
DefaultDefault preset.
Full widthWhenever the available picture should be expanded to the edges.
PromoWhenever you want to add a description to the image.
Presets are ready to use HTML structures.
Variations
Jumbo box variations:
VariationDescription
DefaultTemplate composed of an image, a title, a blurb and a link.
With aside descriptionTemplate composed of an aside box with written content.
Modifiers
Jumbo box classes:
ClassDescription
-top-arrowAdds an arrow on top of the component.
-inner-top-arrowAdds an arrow on top of the image.
-dark-blueChanges the background colour.
-full-widthMakes the image expand to the edges.
-overlayTo be used whenever a background image is added to the div.lower container.
-no-space-belowRemoves component margin bottom.
-constrainedAdjusts content to match the left and right limits of the heading text.
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The jumbo box component cannot be embedded inside other component.
main (HTML file)
        
(component)
            
div.jumbo box

        

    
Nesting
The jumbo box component can be used as a container of other components and/or elements (a nested component becomes an element of the parent component):
ElementDescription
Exchange ratesTo be used solely in the exchange rates pages.
IframeWhenever you need to feature an iframe.
VideoWhenever you need to add a video directly in a jumbo box.
main (HTML file)
        
div.jumbo-box (component)
            
(Element)

        

    

    
Elements are component add-ons which can be placed directly inside the component allowing you to adapt the HTML structure to your needs. The correct markup can be checked in the element page.