32 section types

Section library

Every block a DFB site can use. Each example shows its settings: copy them into a page's sections list.

page-header — copy these settings
- background_image: images/demo/forest-road.jpg
  divider_bottom: curve
  eyebrow: 32 section types
  heading: Section library
  overlay: primary
  subheading: 'Every block a DFB site can use. Each example shows its settings: copy them into a page''s sections list.'
  type: page-header
cards — copy these settings
- columns: 4
  items:
  - icon: image
    link:
      page: /sections/heroes
    link_label: View
    text: 'Big opening sections: photo, centred, feature image, slider.'
    title: Heroes
  - icon: file-text
    link:
      page: /sections/content
    link_label: View
    text: Text, photo + text, columns and feature lists.
    title: Content
  - icon: thumbnails
    link:
      page: /sections/cards
    link_label: View
    text: Cards, filterable grids, jump links, team.
    title: Cards & grids
  - icon: star
    link:
      page: /sections/social-proof
    link_label: View
    text: Quotes, testimonials, logos, big numbers.
    title: Social proof
  - icon: settings
    link:
      page: /sections/interactive
    link_label: View
    text: Accordions, tabs, timelines, steps, countdowns.
    title: Interactive
  - icon: play-circle
    link:
      page: /sections/media
    link_label: View
    text: Galleries, image bands, videos, maps.
    title: Media
  - icon: cart
    link:
      page: /sections/conversion
    link_label: View
    text: Call-to-action banners, newsletter, contact form.
    title: Conversion
  - icon: list
    link:
      page: /sections/listings
    link_label: View
    text: Data-driven lists and latest blog posts.
    title: Listings
  type: cards