Skip to content
Tread Documentation

Media grid

A freeform grid where each block (image, video, content card, or heading) can be positioned and sized independently. Limited to 16 blocks. Not available in the header, drawers, or popups.

Grid settings

Section titled “Grid settings”
  • Show settings for — pick Desktop or Mobile before setting the column count/row height below.
  • Column count (desktop) (only when showing Desktop settings) — range 1–16, default 16.
  • Row height (desktop) (only when showing Desktop settings) — range 2.5–18.5rem, default 6.5rem.
  • Column count (mobile) (only when showing Mobile settings) — range 1–8, default 4.
  • Row height (mobile) (only when showing Mobile settings) — range 2–12rem, default 4rem.

Section settings

Section titled “Section settings”
  • Color scheme — default Scheme 1.
  • Spacing — where padding is applied: Bottom, Top, Top and bottom, or None. Default Top and bottom.
  • Spacing size — Base, Small, or X-small. Default Base.
  • Include header offset — offsets the section by the height of the header, in addition to the top padding. Default off.

Blocks

Section titled “Blocks”

Every block type below shares the same position/size controls:

  • Show settings for — pick Desktop or Mobile before setting the fields below.
  • Column span (desktop only) — range 1–16, default 4.
  • Row span (desktop only) — range 1–16, default 4.
  • Column start (desktop only) — range 1–16, default 4.
  • Row start (desktop only) — range 1–16, default 4.
  • Column span (mobile) (mobile only) — range 1–8, default 4.
  • Row span (mobile) (mobile only) — range 1–12, default 4.
  • Use custom position (mobile only) — off lets the block flow in with the others; on places it manually on the mobile grid. Default off.
    • Column start (mobile) (mobile only, and only when Use custom position is on) — range 1–8, default 1.
    • Row start (mobile) (mobile only, and only when Use custom position is on) — range 1–12, default 1.
  • Enable parallax — moves the block at a different speed as the page scrolls, for a depth effect. Desktop only — parallax doesn’t run on mobile. Default off.
    • Vertical parallax (only when Enable parallax is on) — range -50–50%, default 0%.
    • Horizontal parallax (only when Enable parallax is on) — range -50–50%, default 0%.

Image

Section titled “Image”
  • Image — the image.
  • Link — where the image links to.

Video

Section titled “Video”
  • Video — the video.
  • Link — where the video links to.

Content card

Section titled “Content card”

A media tile with overlaid text — same idea as the content card used elsewhere, adapted to sit on the grid.

  • Image / Video — the card’s media.
  • Opacity — darkens/lightens the media so overlaid text stays readable. Range 0–100%, step 10%, default 50%.
  • Link — where the card links to.
  • Horizontal alignment — Left, Center, or Right. Default Left.
  • Vertical alignment — Top, Middle, or Bottom. Default Bottom.
  • Max width — caps the text content width: Medium, Large, X-large, 2X-large, 3X-large, 4X-large, 5X-large, or None. Default None.
  • Color scheme — default Scheme 1.
  • Supports its own Subheading, Heading, Rich text, and Button blocks (see Shared content blocks).

Heading

Section titled “Heading”
  • Heading — the text. Supports inline rich text (bold/italic/links). Wrap a word in [brackets] to apply the scheme’s “heading highlight” color to it.
  • Tag — the actual HTML heading tag used (H1–H6). Default H2.
  • Size — the visual size (H0–H6), independent of the tag. Default H2.
  • Use a different size on mobile — set a separate visual size on mobile. Default off.
    • Size (mobile) (only when the above is on) — default H2.