Basic information

The content of pages is divided into "Sections". Those sections can have different background colors and contain all single elements, called "Blocks". The margin between blocks within a section is always the same and smaller than the margin between different sections.

Heading

This element is simply a headline. It can be styled in three different ways:

Heading - H1

Heading - H2

Heading - H3

Lead

Basically this block is just a text with a larger font size. It can be used e.g. for intros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is "Heading with lead"

The element combines the elements "heading" and "lead" into one. The only difference to the single elements is the (smaller) margin between the headline and the lead.

Text (extendable with sidebar)

This block is a WYSIWYG-editor and should be used for text. It can be extended by a sidebar – find out more about the sidebar version on the sidebar page.

This is the element „Text (extendable with sidebar), but without a sidebar. Lorem ipsum dolor sit amet, this is bold consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is italic and duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur linked text to first section sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a video embedded within the textfield:

Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is an H2 heading and now comes an unordered list:

  • This is an unordered list
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  • Third item
  • Fourth

Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This should be centered text.

This should be right aligned text.

This is an H3 heading and now comes an ordered list:

  1. This is an ordered list
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  3. Third item
  4. Fourth

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quote

The text for quote itself is the only mandatory field, but the block can also have an image, a name and a position. It can be used as full-width-element and in the sidebar of some blocks. Find out more about the sidebar version on the sidebar page.

This is a the "Quote" element. This text is the only mandatory field, but it can also have an image, a name and a position.

This is the name And this is the position
Carlo Sommaruga

Fact box

This block shows multiple facts with predefined icons, that can be chosen. It can be used as full-width-element and in the sidebar of some blocks. Find out more about the sidebar version on the sidebar page.

  • Fact 1 Yuccie butcher readymade, mustache blog irony man braid banh mi normcore green juice la croix dreamcatcher taiyaki organic.
  • Fact 2 with a longer title Yuccie butcher readymade, mustache blog irony man braid banh mi normcore green juice la croix dreamcatcher taiyaki organic.
  • Fact 3 is good, but without description
  • Fact 4 Yuccie butcher readymade, mustache blog irony man braid banh mi normcore green juice la croix dreamcatcher taiyaki organic.

Icon teaser

It shows a title, a text (with possible links) combined with an image/icon. The element can have a light background color and the highlight color can be set.

It can be used as full-width-element and in the sidebar of some blocks. Find out more about the sidebar version on the sidebar page.

Icon teaser with donation highlight color + background color

First one

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Second icon
teaser

It has a different background color and a link

And one
more

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Icon teaser with default highlight color

First one

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Second icon teaser

It has a different background color and a link

And one more

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Downloads

Presents downloadable PDF-files.

Shortcode

The shortcode element can be used to show all types of registered shortcodes, like the audio-player-shortcode:

Form

The form element can be used to show a specific Gravity form. It can be extended by a sidebar – find out more about the sidebar version on the sidebar page.

Image

Shows an image with or without a caption. Height is variable.

Farmer waters his plants Farmer waters his plants

This is an image

Image slider

Shows images in a fixed size with or without captions in a slider format:

First aid for a free world First aid for a free world

Image caption

Group of people Group of people
Portrait of a young doctor Portrait of a young doctor
Young woman sorting goods Young woman sorting goods

Another caption

It can also be used to present only one image without a slider, similar to the image element:

Bolivian man and boy Bolivian man and boy

This is an image slider with only one image

Worker with protective mask in a leather factory in Bangladesh Worker with protective mask in a leather factory in Bangladesh
Farmer waters his plants Farmer waters his plants

Content slider

The content slider shows text and an image caption on a full-width background image.

Enamel pin jianbing retro single-origin coffee brooklyn blog coloring book activated charcoal thundercats.

This is an image caption

Knausgaard raw denim fam chicharrones single-origin coffee pok pok.

Text is text

Knausgaard raw denim fam chicharrones single-origin coffee pok pok.

Teaser boxes

This block exists of tiles, that can have full or half width of the container. The tiles have a background image and text and can be linked.

Zurück nach oben