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

Headlines

H1: Headline

H2: Headline

H3: Headline

H4: Headline

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

H1: Module Headline

<h1>h1: Module Headline</h1>

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

H2: Section Headline

<h2>H2: Section Headline</h2>

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

H3: Paragraph Headline

<h3>H3: Paragraph Headline</h3>

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

H4: Moderate headline

<h4>H4: Moderate Headline</h4>

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.

<p>Copy text</p>

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.

<p class="lead">Text</p>

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.

<strong>Bold text</strong>
<b>Bold text</b>

Italic

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

This example includes bold text based on em html tag.

This example includes bold text based on i html tag.

<em>Italic text</em>
<i>Italic text</i>

Small text

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

Line of small text
<small>Small text</small>

Links

Links are currently not decorated.

Copy text with embedded link text.

<a>Link</a>

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
<ul>
   <li>...</li>
</ul>

<ol>
   <li>...</li>
</ol>

<ul class="list-unstyled">
   <li>...</li>
</ul>

<ol class="list-unstyled">
   <li>...</li>
</ol>

Colors

CI
Primary

CI color from the TYPO3 logo and constrast primary color.


Previous page «Index» / Next page «Trees»