Content Blocks

This page demonstrates the flexibility of blocks in Craft

View the Post

Each block inside of a section will span the width of the screen unless the New Section block preceding it has the Section Centered switch toggled on. The section above has two Heading blocks followed by a Button block. This Text block is inside of a New Section block with the Section Centered switch toggled on.

A section with a background image and background cover

Selecting Background cover from the Styles checkboxes on a Section lets you add text over an image.

Headings

Headings are available from Heading 1 through Heading 6. Generally, a section should start with a Heading 2 (Heading 1 is reserved for the page title. The heading type is selected using the Type dropdown on the Heading block. The text in Heading blocks can be aligned left, right, or center using the Alignment dropdown on each block.

Headings can have bold text

Headings can have italic text

Headings can have Small Text (And Anchors)

Text

Text blocks are for bolding, italicizing, striking, list making, and linking

Text blocks are also good for unordered lists:

  • Which have bullets
  • With bold text, italic text, and deleted text

Text blocks are also good for ordered lists:

  1. Which have numbers
  2. With bold text, italic text, and deleted text

Images

Images can be added throughout your layout using the Image block. Images can be positioned left, right, center, or full-width using the Position field, then sized using the Size dropdown. Images are marked up using a picture template to handle cropping and responsive features.

640X160

An image centered in a new section. This image is positioned center and has a "natural" size selected so it won't go wider than it is.

640X160

This image is positioned and sized full-width inside of a new section.

Pairing images and text creates columns

800x800

A left aligned image block

Pairing images with Text blocks lets you create columns of many sizes. The Position field on the Image block determines whether the image is on the left or right of your text. This image is sized to 16 of the section’s width and positioned to the left. You can choose to wrap the text when it gets long, or use overflow: hidden; on the div wrapping your text to have the text form a column.

800x800

This image also has a caption

A right aligned image block

Pairing images with Text blocks lets you create columns of many sizes. The Position field on the Image block determines whether the image is on the left or right of your text. This image is sized to 13 of the section’s width and positioned to the right. You can choose to wrap the text when it gets long, or use overflow: hidden; on the div wrapping your text to have the text form a column.

800x800

If you don’t wrap your text it will flow below your images

Pairing images with Text blocks lets you create columns of many sizes. The Position field on the Image block determines whether the image is on the left or right of your text. This image is sized to 14 of the section’s width and positioned to the right. This text has the Wrap Text switch toggled on so it will continue to flow below the image instead of forming a column. How fancy is that? Can you handle the flexibility? 

A new section followed by blocks

A Heading, Text, and Button block following a Section block with a light gray background

Buttons for Action

Columns

These content blocks can be nested in columns to make more complex layouts. Each column is it’s own entry in Craft.

800x800

The first column

Creating separate entries with additional content blocks allows you to nest complex layouts.

Amazing

800x800

The second column

Creating separate entries with additional content blocks allows you to nest complex layouts.

Seriously

800x800

The first column

The image in this column floats right and is sized to 13. The image in this column floats right and is sized to 13. The image in this column floats right and is sized to 13.

800x800

The second column

The image in this column floats left and is sized to 13.

Columns don’t have to be even

You can override the width of a column by adding sizes to the Size Override field on your Column block.

Customize away

You can add as many columns as your grid will support.

Even more than three

Add four, five, or six. Put everything in a column. The people will love it.