Advanced Text Paragraph

Advanced Text is specialized paragraph for creating single headline or text paragraph. It serves the purpose of layout building rather than long form writing. It does not support multiple paragraphs and general content like lists, table, and codeblock.

Advanced Text
  • About text format

Note: enabling action will make the entire headline or text paragraph clickable.
    • Action Type
Action
Note: size and shape are not available for inline icons with text.
  • Choose an icon from the library
Icon Before
Note: size and shape are not available for inline icons with text.
  • Choose an icon from the library
Icon After

  • Spacing Overrides

  • Additional Attributes

    Note: HTML and aria attributes are allowed.

    + Add another attribute

Overrides

Output markup


  Content goes here

Dev Notes

  1. Rich Text (CKEditor) format provides limited options:
    • align
      • start (add u-bolt-text-align-start class to container)
      • center (add u-bolt-text-align-center class to container)
      • end (add u-bolt-text-align-end class to container)
    • italic (wrap <em> around selected text)
    • bold (wrap <strong> around selected text)
    • superscript (wrap <sup> around selected text)
    • subscript (wrap <sub> around selected text)
    • quote (wrap <q> around selected text)
    • inline code (wrap <code> around selected text)
  2. Plain Text format: escape all special characters, print as exactly typed.
  3. Raw HTML format: print HTML.
  4. If eyebrow is selected for Hierarchy, disable Size select input, because Eyebrow only has one size.
  5. Size, Weight, and Color should all be disabled, but their values will update if you change between presets
  6. If you select Custom under presets, then those three dropdowns get enabled
  7. If you select a preset other than Custom, the other three dropdowns become disabled again and are reset to the values that match the preset you selected.