Offset Layouts

Place content on just the left or right half of the page on desktop, while it stays full width on mobile.

Syntax

For content on the right half of the screen:


:::right-offset

Your content here.

:::

For content on the left half of the screen:


:::left-offset

Your content here.

:::

Type this in Contentful:


:::right-offset

*"This program changed my life. I can't recommend it highly enough."*

— Maria S., Alumni

:::

What you’ll see: On desktop — the quote sits only on the right half of the content area. On mobile — it takes up the full width as normal.

Type this in Contentful:


:::left-offset

**Get in Touch**

Email: info@example.com
Phone: 555-0100

:::

What you’ll see: On desktop — the contact details sit on the left half of the page. On mobile — full width.

Type this in Contentful:


:::right-offset

## Key Facts

- Founded in 2005
- Over 10,000 alumni
- Programs in 20+ countries

:::

What you’ll see: A heading and bullet list, constrained to the right half on desktop.

Syntax	Content appears on…
`:::right-offset`	Right half of the screen on desktop
`:::left-offset`	Left half of the screen on desktop

On mobile (phones and small tablets), both options display as full-width content — the offset only applies on larger screens.

Offset layouts work best with short, self-contained blocks of content — a pull quote, a key stat, or a small contact block.
Use them to break up a long page visually without needing a full two-column grid.

Forgetting the closing :::

Wrong:


:::right-offset

Some text here.

Right:


:::right-offset

Some text here.

:::

The closing ::: on its own line is required. Without it, the layout won’t apply.

Misspelling the direction

Wrong: :::offset-right or :::rightoffset Right: :::right-offset or :::left-offset

The direction must come first, then -offset. Spelled and hyphenated exactly as shown.

Expecting both halves to be filled

An offset layout fills only one side — the other side of the page is empty space.