Typography - Page Title (H1, 48/56px)

Heading (H2, 33/42px)

Click to add image
Teaser Title (H2, 30/36px)

For grid blocks, the font of the headlines are variable, depending on the number of cells in the grid.

Read more
Click to add image
Teaser Headtitle (DIV, 14/18px)
Teaser Title (H3, 24/30px)
 Read more
Click to add image
Teaser Headtitle (DIV, 14/18px)
Teaser Title (H3, 24/30px)

Paragraph (p, 18px/24px). This section has a sample of content types available in this site.

Read more

Text Heading H2 (H2, 30/36px)

Paragraph (p, 18px/24px)

  • unordered list
  • unordered list
  1. ordered list
  2. ordered list

blockquote

bold / italic / strikethrough

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text Heading H3 (H3, 24/30px)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

This page has a sample of the typography available in the theme.

Custom Blocks

Define custom block types, schema enhancers, and block conversion mappings.

Visual Editing

Add data attributes to your rendered HTML to enable progressively richer visual editing features.

Live Preview

How to set up hydra.js, receive live updates, and define custom block types

How Hydra Works

How Hydra separates editing from rendering using an iframe bridge, and a guide to building a frontend

Docs

Key concepts behind Hydra's visual headless CMS architecture

Button text (button, 18/24px)

Text Heading (H2, 30/36px)

For grid blocks, the font of the headlines are variable, depending on the number of cells in the grid.

Text Heading (H3, 24/30px)

Paragraph Text (p, 18/24px)

Text Heading (H3, 24/30px)

Paragraph Text (p, 18/24px)

Table Header (THEAD, 18/24)

Table Header (THEAD, 18/24)

Table cell (td p, 18/24px)

Table cell (td p, 18/24px)