{namespace sg=TYPO3\CMS\Styleguide\ViewHelpers}

Headlines

H1: Headline

H2: Headline

H3: Headline

H4: Headline

H1: Headline small description

H2: Headline small description

H3: Headline small description

H4: Headline small description

Module headline "H1" is the main headline within each backend module. Only added once to every backend page.

H1: Module Headline

Section headline "H2" is the headline for every section in backend modules. Place above each section and use several times..

H2: Section Headline

Paragraph headline "H3" can be used to split section content into logical units. Place in between paragraphs within section.

H3: Paragraph Headline

Moderate headline "H4" might be used to split off meta / footer information.

H4: Moderate headline

Copy text

Normal copy text in base font size 1em with a line-height of 1.5em.

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap "strong" around type to make it bold!. You can also "em" to italicize your words.

Lead copy

The lead class can be added to paragraphs and other html content to highlight. Most used for the introduction text in backend modules.

Introduction text or lead copy text box with highlights.

Emphasis

Bold

Bold font-weight can be gained with strong and b html tag.

This example includes bold text based on strong html tag.

This example includes bold text based on b htm tag.

Italic

Italic font style can be gained with em and i html tag.

This example includes italic text based on em html tag.

This example includes italic text based on i html tag.

Small text

Footer information, small notices can be wrapped in small text tag.

Line of small text

Links

Links are currently not decorated.

Copy text with embedded link text.

Lists

Ordered and unordered lists are styled with disc bullet and decimal.

  • List item zero
  • First item of list
  • Last not least item
  1. List item zero
  2. First item of list
  3. Last not least item
  • List item zero
  • First item of list
  • Last not least item
  1. List item zero
  2. First item of list
  3. Last not least item

Colors

CI color from the TYPO3 logo and constrast primary color.

Primary color
Notice color
Info color
Warning color
Danger color
Success color