This page presents the same examples as the YAML syntax content blocks page, written in Markdown. Class lines sit outside the block they style. Nested quotes group columns, images and captions, or cards; automatic page cards use a short Liquid include.

To shorten the class lines, use the reusable layout attributes file. Copy the definitions you need into your page and follow its usage example. The Markdown with layout classes guide explains how these names replace class lines while keeping the same nested layout structure.

Text-only block

The image-text block without an image uses the full content-panel width and is useful for short explanations, introductions, and narrative content. This example uses the optional secondary background colour on the block itself.

Northern Queensland supports rainforest, reef, woodland, wetland, and savanna habitats. These landscapes are home to animals found nowhere else in Australia.

Two-column block

Rainforest species

The southern cassowary and Lumholtz’s tree-kangaroo are strongly associated with Wet Tropics rainforest. They rely on connected habitat and healthy native vegetation.

Coastal and marine species

Estuarine crocodiles and green turtles connect freshwater, coastal, and reef systems. Their life cycles are shaped by water quality, nesting habitat, and climate.

Two-column block with primary background

Rainforest research

This example uses background: "primary" to place both columns inside a coloured content panel. The block heading uses the matching primary text colour.

Research in the Wet Tropics explores how connected forests support wildlife and seed dispersal.

Coastal research

Each column retains its surface background and matching text and link colours, making it readable against the surrounding primary panel.

Coastal research connects seagrass meadows, reef habitats, and nesting beaches.

View the sample pages.

Image and text block, image left, without background

This example uses image_position: "left" and omits background. The image and text sit directly on the page, with a gap between them and no outer panel padding.

Southern cassowaries disperse the seeds of many rainforest plants. Their movement through connected forest helps maintain the diversity of the Wet Tropics.

Stylised southern cassowary in rainforest

Omit background to use the normal page background.

Image and text block, image left, with background

This block places an optional image beside a single text column. The image can be positioned on the left or right and set to small, medium, or large.

Lumholtz’s tree-kangaroo is an arboreal marsupial of the Wet Tropics. It moves through the forest canopy and is vulnerable to habitat fragmentation.

Stylised Lumholtz's tree-kangaroo in rainforest

Example with image_position: left, image_size: small, and background contained within the content panel.

Image and text block, image right, with background

Use image_position: "right" to place the image beside the text on the right. The background stays within the content panel, and the image has no padding on its outer side.

Green turtles connect reef and seagrass habitats with coastal nesting beaches. Protecting these linked environments supports their life cycle.

Stylised green turtle in coastal waters

The image sits flush with the right edge of the coloured panel.

Partner logos block

The partner logo block can use a columns override in front matter as the maximum number of logos per row, with optional links from each logo. If columns is omitted, it uses partner_logo_max_items_per_row from _config.yml. A background colour setting is optional.

Partner organisation Rainforest research partner Reef research partner Funding partner

Partner logos block with background: primary

White reverse mono logos have transparent backgrounds, so the primary colour shows through their negative spaces.

Partner organisation Rainforest research partner Reef research partner Funding partner

Cards block, > 1 column

These cards use the same surface colours and styling as page cards, but their content is written here rather than collected from other pages. Images and links are optional. The number of colums is configurable but if you add too many it won’t look good or be very responsive.

Stylised southern cassowary in rainforest

Species profile

Rainforest wildlife

Southern cassowaries help disperse rainforest seeds throughout the Wet Tropics.

Coastal habitats

This text-only card needs no image or link. It can include Markdown:

  • Seagrass meadows
  • Nesting beaches
  • Connected reef habitats

Stylised Lumholtz's tree-kangaroo in rainforest

Tree-kangaroo habitat

This card has an image without a link. Protecting connected forest supports canopy-dwelling wildlife.

Cards block, 1 column

With columns: 1, images appear beside the text on desktop. Text-only cards use the full row. On smaller screens, images stack above the text.

Stylised green turtle in coastal waters

Green turtle

Green turtles depend on linked marine habitats and coastal nesting beaches.

Research priorities

A text-only card fills the row without reserving an empty image column.

Use the same title, text, image, image_alt, url, and link_text fields as landing-page section cards.

Page cards block, four per row

This card block uses columns: 4. Each card is generated from a Markdown page in the animals folder.

Southern cassowary

A large rainforest bird that spreads seeds through the Wet Tropics and depends on connected habitat.

Read species profile

Lumholtz's tree-kangaroo

An arboreal marsupial of the Wet Tropics rainforest canopy.

Read species profile

Estuarine crocodile

A powerful predator found in rivers, estuaries, wetlands, and coastal waters across northern Australia.

Read species profile

Green turtle

A marine turtle associated with seagrass meadows, coral reef habitats, and sandy nesting beaches.

Read species profile

Page cards block, one per row

This card block uses columns: 1, so each card displays as a wide row with the image on the left and the summary on the right on desktop screens.

Southern cassowary

A large rainforest bird that spreads seeds through the Wet Tropics and depends on connected habitat.

Open full profile

Lumholtz's tree-kangaroo

An arboreal marsupial of the Wet Tropics rainforest canopy.

Open full profile

Estuarine crocodile

A powerful predator found in rivers, estuaries, wetlands, and coastal waters across northern Australia.

Open full profile

Green turtle

A marine turtle associated with seagrass meadows, coral reef habitats, and sandy nesting beaches.

Open full profile

Note alert block

Use a Note for supporting information. Markdown is supported in the alert content, including lists and links.

Important alert block

Use Important for details that readers need to complete a task successfully. For example, keep image paths relative to the site assets directory.

Warning alert block

Use Warning to draw attention to a risk. Check that project information is approved for public release before publishing it.

Caution alert block

Use Caution for actions that may have unwanted consequences. Keep a copy of your content before replacing sample pages.

Table on primary background

The table uses the primary background and matching text colours. Light backgrounds receive subtle alternating row stripes; dark backgrounds remain unshaded. Borders separate the rows.

Activity Habitat Purpose
Wildlife survey Rainforest Record species observations.
Water sampling Estuary Monitor water quality.
Nest monitoring Coast Track nesting success.
Habitat mapping Reef Identify important habitat areas.

Table on standard background

No background colour is specified for this block. The table body uses the standard page background and matching text colours, with subtle alternating stripes when that background is light.

Activity Habitat Purpose
Wildlife survey Rainforest Record species observations.
Water sampling Estuary Monitor water quality.
Nest monitoring Coast Track nesting success.
Habitat mapping Reef Identify important habitat areas.

This Markdown gallery sets square framing on the whole group. The second photo uses its own portrait shape and top crop. Open an image to view the source.