HTML wrappers and Markdown content blocks
This page presents the same examples as the YAML and Markdown syntax content blocks pages. HTML wrappers name each group, while markdown="1" enables Markdown inside them. Keep blank lines around the Markdown content. Automatic page cards use the same short Liquid include.
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.
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.
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.
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.
The image sits flush with the right edge of the coloured panel.
Image gallery block
Southern cassowary
Lumholtz’s tree-kangaroo
Estuarine crocodile
Green turtle
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 logos block with background: primary
White reverse mono logos have transparent backgrounds, so the primary colour shows through their negative spaces.
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.
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
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.
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 profilePage 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 profileNote 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. |
HTML alongside ordinary Markdown
HTML also provides elements that ordinary Markdown does not define. These examples work without a layout block. Keep blank lines around block elements and add markdown="1" when a container should parse its contents as Markdown.
Collapsible sections
Use details and a descriptive summary to let readers reveal supplementary information. Keep essential instructions visible. This native control can be operated with the keyboard.
Read the sampling notes
We visited each location three times.
- Record the observation date.
- Note weather and habitat conditions.
<details markdown="1">
<summary>Read the sampling notes</summary>
We visited each location **three times**.
- Record the observation date.
- Note weather and habitat conditions.
</details>
Highlighting, subscript, and superscript
These are inline HTML elements. Use mark for relevant highlighting, and sub or sup for notation. Explain specialised notation in the surrounding text.
The sampling period is highlighted. Water is H2O; the study area is measured in km2.
The <mark>sampling period</mark> is highlighted. Water is H<sub>2</sub>O; the study area is measured in km<sup>2</sup>.
Abbreviations in HTML
An abbreviation can carry a title, but its meaning should also be written in the text for readers who cannot use a tooltip.
Environmental DNA (eDNA) helps identify species.
Environmental DNA (<abbr title="Environmental DNA">eDNA</abbr>) helps identify species.
Figures and captions
Use figure and figcaption to group an image with its caption. Alternative text describes the relevant image content; the caption supplies context.
<figure>
<img src="{{ "/assets/sample-images/card-cassowary.svg" | relative_url }}" alt="Illustration of a southern cassowary">
<figcaption>Southern cassowaries help disperse rainforest seeds.</figcaption>
</figure>
Explicit line breaks
A br element creates a line break within a paragraph. Use separate paragraphs for separate ideas rather than adding repeated breaks to create spacing.
Fieldwork team
Coastal research project
Fieldwork team<br>
Coastal research project
Hidden HTML comments
Comments are absent from the visible page but remain in its source. Use them for editing notes, not confidential information.
This sentence is visible.
This sentence is also visible.
This sentence is visible.
<!-- Editing note: review this description after the next survey. -->
This sentence is also visible.
Gallery image shapes
The gallery uses landscape framing by default. Each image can override the shape or fit using named classes.
Landscape
Portrait override
Original override