Headline (vi20 )
Our Headline component is used to help visually tie similar colored content (component) pieces seamlessly together, when you need a top-level headline and description to help introduce your topic chunk below.
It is purpose built to work with all of our components, but must be stacked with the same colored component below.
A few key features include:
• Include an optional eyebrow to help define the content you are displaying
• 3 Headline sizes (XL, L, M)
• Choose between multiple brand colors for seamless transitions to the following content
• Ability to turn component-level top, bottom or both padding options on or off
• Note: Use this is to solve “double” padding issues when stacking similar colored components together which may cause large gaps to appear, and get pre-approval for guidance from the Design Platform team
Publishing? View the DCR guidebook for detailed instructions.
Headline sets
As mentioned above, the combination of our Headline component needs to match the chosen component color that follows below.
We’ve baked many features into this component, including the ability to:
• Include an optional eyebrow to help define the content you are displaying
• 3 optional headline size options:
⁃ X-Large (this automatically displays a larger intro text). Use this when the next component below is using a “large” headline. Keep headline hierarchy.
⁃ Large (this should be your default, as it matches our standard paragraph headline sizes)
⁃ Medium (this matches our H3 paragraph headline sizes)
• Optional intro blurb
• Ability to turn component-level top, bottom or both padding options on or off. See “Appearance” tab for details
This is our Extra-large headline option. Max 70 characters.
Optional intro-size paragraph text goes here, along with a hyperlink. Character count is set to 350 max, and the headline character count is 70.
This is our Large headline option. Max 70 characters.
Optional body-size paragraph text goes here, along with a hyperlink. Character count is set to 350 max, and the headline character count is 70.
This is our Medium headline option. Max 70 characters.
Optional body-size paragraph text goes here, along with a hyperlink. Character count is set to 350 max, and the headline character count is 70.
Rules and recommendations
• BLK_White
• BLK_Neutral
• BLK_Orange
• BLK_Yellow
• BLK_Pink
⁃ Headline choices: XL (56px Extrabold), Large (40px Extrabold), or Medium (32px Bold)
⁃Large should be your default, as it matches our standard paragraph headline sizes
⁃If choose XL headline, intro text automatically increases to 20px “intro” size
• Intro blurb can include hyperlink