Text Elements

Headline, SubHeadline, and Paragraph elements share the same structure with different styling defaults.

Text Element Types

Type	Selector	Style Guide Attr
`Headline/V1`	`.elHeadline`	`data-style-guide-headline`
`SubHeadline/V1`	`.elSubheadline`	`data-style-guide-subheadline`
`Paragraph/V1`	`.elParagraph`	`data-style-guide-content`

Basic Structure

JSON

{
  "type": "Headline/V1",
  "id": "6Z-HdLnE-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": { "margin-top": 0 }
  },
  "params": {
    "margin-top--unit": "px"
  },
  "selectors": {
    ".elHeadline": {
      "attrs": {
        "data-style-guide-headline": "m",
        "style": {
          "font-size": 32,
          "font-weight": "600",
          "color": "rgb(0, 0, 0)",
          "text-align": "center",
          "line-height": 120,
          "letter-spacing": 0
        }
      },
      "params": {
        "style-guide-override-headline": true,
        "font-size--unit": "px",
        "line-height--unit": "%",
        "letter-spacing--unit": "px"
      }
    }
  },
  "children": [
    {
      "type": "ContentEditableNode",
      "id": "6Z-CntEd-0",
      "version": 0,
      "parentId": "6Z-HdLnE-0",
      "fractionalIndex": "a0",
      "children": [
        {
          "type": "text",
          "innerText": "Your Headline Text Here",
          "id": "6Z-TxtNd-0",
          "version": 0,
          "parentId": "6Z-CntEd-0",
          "fractionalIndex": "a0"
        }
      ]
    }
  ]
}

Important Constraints

Line-height uses %: Always use percentage values (e.g., 120, 150) with "line-height--unit": "%"

No background/border support: Text elements don't support background, border, or shadow. Wrap in a FlexContainer if needed.

One icon per position: Maximum ONE .fa_prepended and ONE .fa_apended icon.

With Prepended Icon

JSON

{
  "type": "Headline/V1",
  "selectors": {
    ".elHeadline": {
      "attrs": {
        "style": {
          "font-size": 24,
          "font-weight": "600",
          "color": "#1e293b",
          "text-align": "left"
        }
      }
    },
    ".fa_prepended": {
      "attrs": {
        "data-skip-icon-settings": "false",
        "className": "fas fa-bolt",
        "style": {
          "font-size": 18,
          "margin-right": 8,
          "color": "#fbbf24"
        }
      },
      "params": {
        "font-size--unit": "px",
        "margin-right--unit": "px"
      }
    }
  }
}

Note: fa_apended uses a single 'p' - this is CF's spelling.

Styleguide Sizes

Use data-style-guide-* attributes for consistent typography:

Size	Description
`xl`	Extra large
`l`	Large
`m`	Medium (default)
`s`	Small

To override styleguide settings with custom values, set:

JSON

{
  "params": {
    "style-guide-override-headline": true
  }
}

Paragraph Example

JSON

{
  "type": "Paragraph/V1",
  "id": "6Z-PrGrP-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": { "margin-top": 15 }
  },
  "params": {
    "margin-top--unit": "px"
  },
  "selectors": {
    ".elParagraph": {
      "attrs": {
        "data-style-guide-content": "m",
        "style": {
          "font-size": 16,
          "font-weight": "400",
          "color": "rgb(100, 116, 139)",
          "text-align": "left",
          "line-height": 160
        }
      },
      "params": {
        "style-guide-override-content": true,
        "font-size--unit": "px",
        "line-height--unit": "%"
      }
    }
  },
  "children": [
    {
      "type": "ContentEditableNode",
      "id": "6Z-CntEd-0",
      "children": [
        {
          "type": "text",
          "innerText": "Your paragraph text goes here. This can include multiple sentences and formatting."
        }
      ]
    }
  ]
}