Web Style Guide
Menu
Search

Intro

An intro is a page summary followed by an enhanced block of text which puts in plain language the main idea of the page.

Minimum requirements
  • 1 paragraph (p)
  • 1 block of enhanced text (p)

The intro component is an exclusive of the hub pages.

Quick access

UsageGuidelines
HTML structurePresetsVariations
Embedding
Nesting
Advanced settings

Presets

?

Variations

?

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.

HTML
Copy to clipboard




Component used in
Page template
explainer-page
hub-page





	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsEmbeddingNestingTest pageGo to top		

	

	

		
Details

		
Usage
The intro component is meant to be used only in hub pages. The intro component is mandatory for all entry section pages, commonly named hub pages.
The intro component is not a section quote. Nevertheless, quote's markup is partially used.
Guidelines
  1. Mandatory for hub pages
  2. Apart from the hub pages, this component should not be used
  3. To be inserted on top of the HTML file, right after the title component
  4. The number of characters can be exceeded if you use the -smaller class
  5. Character limits recommended:
    • 75 characters for the quote (blockquote)
  6. 3 as the maximum number of paragraphs recommended for the main text
HTML structure
Overall HTML view of an intro component:
HTML file (.html)
        
div.title

        
div.intro
            
div.quote.-aside.-stars-watermark
                
blockquote
                    
p

                

                
p (one or more)

            

        

        
(other component(s))

    
Presets
Intro presets:
PresetDescription
DefaultDefault preset.
Variations
Intro variations:
VariationDescription
IntroComposed of one or more paragraphs and an atypic .quote element. The .quote structure is slightly different than normal since it accepts p tags right after the blockquote tag. In small devices, the enhanced block of text is positioned after the main text.
Embedding
The intro component cannot be embedded inside other component.
main (HTML file)
        
(component)
            
div.intro

        

    
Nesting
The intro component cannot be used as a container of other components and/or elements. Nevertheless, it has in its structure a quote element.
main (HTML file)
        
div.intro
            
(Element)