Contact
text · media-text · columns · features

Content sections

page-header — copy these settings
- background_image: images/demo/berries.jpg
  divider_bottom: curve
  eyebrow: text · media-text · columns · features
  heading: Content sections
  overlay: primary
  type: page-header
text

A simple text section

Use it for plain copy with headings, lists and links. Width can be small, default or large.

Subheadings too

A button
text — copy these settings
- body: 'Use it for **plain copy** with headings, lists and links. Width can be small, default or large.\n\n- Lists work\n- So do [links](/sections)\n\n### Subheadings too'
  buttons:
  - label: A button
    page: /sections
    style: primary
  eyebrow: text
  heading: A simple text section
  type: text
text · centred

Centred on a muted background

Good for a short statement between busier sections.
Centred button
text — copy these settings
- align: center
  background: muted
  body: Good for a short statement between busier sections.
  buttons:
  - label: Centred button
    page: /sections
    style: primary
  eyebrow: text · centred
  heading: Centred on a muted background
  type: text
Canoe on a lake
media-text · photo left

Photo beside text

Rounded photo on the left with a quote and buttons on the right.
“A pull quote can sit right in the text.”— Someone important
Primary Secondary
media-text — copy these settings
- body: Rounded photo on the left with a quote and buttons on the right.
  buttons:
  - label: Primary
    page: /sections
    style: primary
  - label: Secondary
    page: /styles
    style: default
  eyebrow: media-text · photo left
  heading: Photo beside text
  image: images/demo/canoe.jpg
  image_alt: Canoe on a lake
  image_side: left
  image_style: rounded
  quote:
    cite: Someone important
    text: A pull quote can sit right in the text.
  type: media-text
Coffee
media-text · cover + glow

Book or product cover

Use image style ‘cover’ with the glow or tilt effect on a dark background.
media-text — copy these settings
- background: dark
  body: Use image style 'cover' with the glow or tilt effect on a dark background.
  divider_bottom: tilt
  divider_top: tilt
  eyebrow: media-text · cover + glow
  heading: Book or product cover
  image: images/demo/coffee.jpg
  image_alt: Coffee
  image_effect: glow
  image_side: right
  image_style: cover
  type: media-text
columns

Two or three columns of copy

Column one

Short paragraph explaining a point.

Column two

Another point, same length.

Column three

Use dividers between columns or leave them off.
Read more
columns — copy these settings
- columns: 3
  divided: true
  eyebrow: columns
  heading: Two or three columns of copy
  items:
  - body: Short paragraph explaining a point.
    heading: Column one
  - body: Another point, same length.
    heading: Column two
  - body: Use dividers between columns or leave them off.
    buttons:
    - label: Read more
      page: /sections
      style: text
    heading: Column three
  type: columns
features · grid

Icon feature grid

Friendly

Short description.

Reviewed

Short description.

Local

Short description.
features — copy these settings
- background: muted
  columns: 3
  eyebrow: features · grid
  heading: Icon feature grid
  items:
  - icon: heart
    text: Short description.
    title: Friendly
  - icon: star
    text: Short description.
    title: Reviewed
  - icon: location
    text: Short description.
    title: Local
  type: features
features · list

Icon list layout

Same-day service

Icons sit beside the text.

24/7 phone line

Two columns on desktop.

Easy payment

Any UIkit icon works.

Guaranteed

Keep text short.
features — copy these settings
- columns: 2
  eyebrow: features · list
  heading: Icon list layout
  items:
  - icon: clock
    text: Icons sit beside the text.
    title: Same-day service
  - icon: receiver
    text: Two columns on desktop.
    title: 24/7 phone line
  - icon: credit-card
    text: Any UIkit icon works.
    title: Easy payment
  - icon: check
    text: Keep text short.
    title: Guaranteed
  layout: list
  type: features
Portrait
features · split

Split with a photo

A photo on one side, a checklist on the other.
  • Licensed and insured
    Checklist item with a supporting line.
  • Upfront quotes
  • Local team since 1998
Call us
features — copy these settings
- buttons:
  - label: Call us
    page: /sections/conversion
    style: primary
  eyebrow: features · split
  heading: Split with a photo
  image: images/demo/portrait-1.jpg
  image_alt: Portrait
  image_side: left
  intro: A photo on one side, a checklist on the other.
  items:
  - text: Checklist item with a supporting line.
    title: Licensed and insured
  - title: Upfront quotes
  - title: Local team since 1998
  layout: split
  type: features