HTML

Content

ExamplesDocumentationCSS variables

Examples

Content example

Copied to clipboard

Documentation

Overview

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use pf-c-content as container. It can handle almost any HTML tag:

  • <p> paragraphs
  • <ul> <ol> <dl> lists
  • <h1> to <h6> headings
  • <blockquote> quotes
  • <em> and <strong>

This pf-c-content class can be used in any context where you just want to (or can only) write some text.

This component is an exception to the variable system since we style type selectors.

Usage

Class Applied to Outcome
.pf-c-content <div>, <section>, or <article> Generates vertical rythm and typographic treatment to html elements

CSS variables

--pf-c-content--Colorc_content_Color#151515
--pf-c-content--FontSizec_content_FontSize1rem
--pf-c-content--FontWeightc_content_FontWeight400
--pf-c-content--LineHeightc_content_LineHeight1.5
--pf-c-content--MarginBottomc_content_MarginBottom1rem
--pf-c-content--a--Colorc_content_a_Color#004080
--pf-c-content--a--TextDecorationc_content_a_TextDecorationunderline
--pf-c-content--a--hover--Colorc_content_a_hover_Color#004080
--pf-c-content--a--hover--TextDecorationc_content_a_hover_TextDecorationunderline
--pf-c-content--blockquote--BorderLeftColorc_content_blockquote_BorderLeftColor#d2d2d2
--pf-c-content--blockquote--BorderLeftWidthc_content_blockquote_BorderLeftWidth3px
--pf-c-content--blockquote--Colorc_content_blockquote_Color#737679
--pf-c-content--blockquote--FontWeightc_content_blockquote_FontWeight400
--pf-c-content--blockquote--PaddingBottomc_content_blockquote_PaddingBottom1rem
--pf-c-content--blockquote--PaddingLeftc_content_blockquote_PaddingLeft1rem
--pf-c-content--blockquote--PaddingRightc_content_blockquote_PaddingRight1rem
--pf-c-content--blockquote--PaddingTopc_content_blockquote_PaddingTop1rem
--pf-c-content--dl--ColumnGapc_content_dl_ColumnGap3rem
--pf-c-content--dl--RowGapc_content_dl_RowGap1rem
--pf-c-content--dt--FontWeightc_content_dt_FontWeight700
--pf-c-content--dt--MarginTopc_content_dt_MarginTop1rem
--pf-c-content--dt--sm--MarginTopc_content_dt_sm_MarginTop0
--pf-c-content--h1--FontSizec_content_h1_FontSize1.5rem
--pf-c-content--h1--FontWeightc_content_h1_FontWeight400
--pf-c-content--h1--LineHeightc_content_h1_LineHeight1.3
--pf-c-content--h1--MarginBottomc_content_h1_MarginBottom0.5rem
--pf-c-content--h1--MarginTopc_content_h1_MarginTop1.5rem
--pf-c-content--h2--FontSizec_content_h2_FontSize1.25rem
--pf-c-content--h2--FontWeightc_content_h2_FontWeight400
--pf-c-content--h2--LineHeightc_content_h2_LineHeight1.5
--pf-c-content--h2--MarginBottomc_content_h2_MarginBottom0.5rem
--pf-c-content--h2--MarginTopc_content_h2_MarginTop1.5rem
--pf-c-content--h3--FontSizec_content_h3_FontSize1.125rem
--pf-c-content--h3--FontWeightc_content_h3_FontWeight400
--pf-c-content--h3--LineHeightc_content_h3_LineHeight1.5
--pf-c-content--h3--MarginBottomc_content_h3_MarginBottom0.5rem
--pf-c-content--h3--MarginTopc_content_h3_MarginTop1.5rem
--pf-c-content--h4--FontSizec_content_h4_FontSize1rem
--pf-c-content--h4--FontWeightc_content_h4_FontWeight400
--pf-c-content--h4--LineHeightc_content_h4_LineHeight1.5
--pf-c-content--h4--MarginBottomc_content_h4_MarginBottom0.5rem
--pf-c-content--h4--MarginTopc_content_h4_MarginTop1.5rem
--pf-c-content--h5--FontSizec_content_h5_FontSize1rem
--pf-c-content--h5--FontWeightc_content_h5_FontWeight400
--pf-c-content--h5--LineHeightc_content_h5_LineHeight1.5
--pf-c-content--h5--MarginBottomc_content_h5_MarginBottom0.5rem
--pf-c-content--h5--MarginTopc_content_h5_MarginTop1.5rem
--pf-c-content--h6--FontSizec_content_h6_FontSize1rem
--pf-c-content--h6--FontWeightc_content_h6_FontWeight400
--pf-c-content--h6--LineHeightc_content_h6_LineHeight1.5
--pf-c-content--h6--MarginBottomc_content_h6_MarginBottom0.5rem
--pf-c-content--h6--MarginTopc_content_h6_MarginTop1.5rem
--pf-c-content--heading--FontFamilyc_content_heading_FontFamilyRedHatDisplay,Overpass,overpass,helvetica,arial,sans-serif
--pf-c-content--hr--BackgroundColorc_content_hr_BackgroundColor#d2d2d2
--pf-c-content--hr--Heightc_content_hr_Height1px
--pf-c-content--li--MarginTopc_content_li_MarginTop0.5rem
--pf-c-content--ol--MarginLeftc_content_ol_MarginLeft0.5rem
--pf-c-content--ol--MarginTopc_content_ol_MarginTop0.5rem
--pf-c-content--ol--PaddingLeftc_content_ol_PaddingLeft1.5rem
--pf-c-content--ol--nested--MarginLeftc_content_ol_nested_MarginLeft0.5rem
--pf-c-content--ol--nested--MarginTopc_content_ol_nested_MarginTop0.5rem
--pf-c-content--small--Colorc_content_small_Color#737679
--pf-c-content--small--FontSizec_content_small_FontSize0.875rem
--pf-c-content--small--FontWeightc_content_small_FontWeight700
--pf-c-content--small--LineHeightc_content_small_LineHeight1.5
--pf-c-content--small--MarginBottomc_content_small_MarginBottom1rem
--pf-c-content--ul--ListStylec_content_ul_ListStyledisc outside
--pf-c-content--ul--MarginLeftc_content_ul_MarginLeft0.5rem
--pf-c-content--ul--MarginTopc_content_ul_MarginTop0.5rem
--pf-c-content--ul--PaddingLeftc_content_ul_PaddingLeft1.5rem
--pf-c-content--ul--nested--MarginLeftc_content_ul_nested_MarginLeft0.5rem
--pf-c-content--ul--nested--MarginTopc_content_ul_nested_MarginTop0.5rem