Headline

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

Rules and recommendations

Padding options

We have built in the ability to turn component-level top, bottom, or both padding options on or off. This is to solve “double” padding issues when stacking similar colored components that are related topic-wise.

Example: If you are using a component that has 80px of bottom padding, and you pull in a separate component right below it that has 80px top padding, then you’ll get a large gap of “negative” space. You can turn off the bottom padding to reduce the gap, and allow the user to visually understand these two components are part of one single topic.

NOTE: This should only be used when stacking similar colored components together. Please get pre-approval for guidance from the Design Platform team.

Padding examples

In the two examples below, we are illustrating what this may look like, and what the recommended options are for the optimal visual spacing.

Color pairing

It is very important to ensure color consistency between the vi20 headline component and the component directly following. This helps visually tie the content together in to one “chunk”.