Aspect Ratio 21:9

Hero Headline
text-7xl (72px)

Additional Text with Style “.lead”

Block Button secondary

Alignment: center.

Second Headline in text-5xl

The second element usually has a larger heading (size text-5xl) and text with .lead formatting. The chosen heading hierarchy (h1/h2/div) depends on SEO concerns. The page may have only one h1, and it must be the first heading.

To achieve even spacing between sections, use the inner spacing in medium size. To keep the text from being too wide, the width should also be reduced to lg (1024px).

Settings

Text & Media

Lorem ipsum dolor sit amet, consetetur sadipscing …

Field 'header' fontscale:
text-lg (1.125rem/18px)
text-xl (1.25rem/20px)
text-2xl (1.5rem/24px)
text-3xl (1.875rem/30px)
text-4xl (2.25rem/36px)
text-5xl (3rem/48px)
text-6xl (3.75rem/60px)
text-7xl (4.5rem/72px)
text-8xl (6rem/96px)
text-9xl (8rem/128px)

Bodytext Styles

Content inside the texteditor (=bodytext) has a slightly different styling, because it is not focused on design, but on content.

Title 1

Title 2

Title 3

Title 4

.lead Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dolore iste eius ratione, illo quae ducimus quo, sequi odit vero odio at, non sit nulla amet modi culpa ab quibusdam!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab veniam aliquid commodi deserunt sint fugit praesentium quam, ut voluptate facilis vel facere iste sed harum amet animi maiores asperiores architecto!

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, doloremque!
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem est beatae rem a? Saepe facere, adipisci maxime quod dolor quidem velit quia, quae a ipsum, animi quo! Veritatis, repellat illo?
  3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti quo, assumenda atque soluta natus optio repellat modi neque explicabo dolorum quaerat vel error totam molestiae iste aspernatur nisi nobis. Accusamus.
  • Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non praesentium optio iste, voluptas unde aut mollitia cum dolor veritatis harum consectetur vel quasi ad quas dignissimos reprehenderit dolorum deleniti fuga.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quae asperiores eligendi repellat laudantium. Ea quae, possimus minima cupiditate incidunt nobis ad sequi dolorum nulla optio explicabo labore quos repellendus.
  • Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id dignissimos odit qui et. Facilis dolorum facere hic quae ex error atque magnam aliquid in, dolorem doloremque. Consectetur ducimus quis obcaecati.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World

     

ItemsExpenditure
Donuts3,000
Stationery18,000
Council budget (in £) 2018
Alternative Text
Description (Caption)

Interactive 3D model