Title/Eyebrow

Technical Design

The title component is an atom component that can be used singly or embedded within a molecule component (e.g.) hero.

Dialog:

Tab Name FieldType Comments
Properties Title textfield

Used to create the text being displayed.

NOTE: The use of the following placeholder text will be converted upon saving the title (via the following file: /apps/dfs-ppr/components/utils/string/ReplaceTokens.js):

  • ® will convert to ® in a superscript format

  • will convert to in a superscript format
  • {D} will be the placeholder for the disclosure (see Disclosure tab below for details) in a superscript format
  Heading Tag dropdown

The dropdown options are:

  • H1
  • H2
  • H3
  • H4
  Heading Size dropdown

The dropdown options are:

  • Large
  • Medium
  • Small
  • Eyebrow
Disclosure Show Disclosure checkbox

Used as a flag to show/hide a disclosure. It is unchecked by default.

NOTE: Only one disclosure can be created per title component.

  Disclosure Label dropdown

The dropdown options for the disclosure label/marker are:

  • #
  • @
  • !
  • 1 .. 20 (numbers are each listed as separate options)
  Disclosure Link pathbrowser

This field is used to select the file path to a content fragment containing the disclosure text. The content fragments are to be stored in the following location:

  • /content/dam/dfs/credit-cards/en/disclosure

 

Dialog Screenshots:

 

 

Sample Output: