Hero Section

The Hero Section appears at the top of the Home, Pages, Breedings, and Articles page types. It’s the first thing visitors see on the page and is ideal for adding a visual introduction, key messaging, and a call-to-action.

Breedpost offers several layout options so you can match your hero section to the tone and purpose of each page.

What You Can Include

Each hero section can contain:

• Title – The main heading for the page

• Subheading (optional) – A smaller line of text above the title (Home only)

• Text (optional) – A short paragraph to describe the page or provide context

• CTA Button (optional) – Link to another page or external site (Home only)

• Background – Choose between:

  • Default (from your site palette)
  • Primary (from your site palette)
  • Secondary (from your site palette)
  • Muted (from your site palette)

Where the Hero Section Appears

• Home Page – A strong welcome or overview with image and CTA

• Pages – Use for About, Contact, or other general pages

• Breedings – Introduce the pairing or litter with a title and optional message

• Articles – Highlight the article title and a brief intro at the top

Tips for a Great Hero Section

• Keep your title short and clear – it's the first thing visitors will see.

• If you're using a background image, make sure it’s high quality and doesn’t overpower the text.

• Consistency across pages creates a cohesive feel, but don’t be afraid to tailor your hero for special announcements or features.

Where to Edit

You’ll find the hero section fields directly in the Home, Pages, Breedings, and Articles entries. Just scroll to the top of the page entry form in Directus to edit the hero section.

Hero Section Layout Options

The Hero Section is designed to be flexible and visually impactful, whether you’re creating a bold homepage, introducing a breeding pair, or publishing an article. You can choose from several layout options depending on whether you’re using an image, how much content you have, and the overall tone of your site.

Breedpost supports full-width, half-width, and no image layouts — each with optional padding and text alignment settings. This lets you tailor the hero to suit different types of pages without needing to worry about formatting or spacing manually.

Layout Options Table

The Hero Section supports a range of flexible layouts to suit different types of content and page styles. You can choose from full-width image banners, half-width side-by-side layouts, or text-only options. Some layouts include additional padding around the content for better spacing and readability.

Layout Examples