> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Content tiles

> Advanced grid-based layout system with unlimited customizable tiles and flexible column/row spanning

The Content tiles section allows you to create complex, mosaic-style grid layouts with unlimited customizable tiles that can span multiple columns and rows. This advanced layout system enables sophisticated visual compositions for showcasing content, images, videos, or slideshows in creative, magazine-style arrangements. Use this section when standard grid layouts feel too rigid for your creative vision.

## What this section controls

This section controls advanced grid layouts with the following capabilities:

* Unlimited customizable tile blocks
* Flexible column spanning (1-6 columns on desktop, 1-2 on mobile)
* Flexible row spanning for vertical layouts
* Mixed content types (images, videos, slideshows, text)
* Individual tile color schemes and visibility settings
* Section heading with customizable size and alignment
* Three width options and vertical spacing controls

## Section settings

### General settings

<AccordionGroup>
  <Accordion title="Block order (Mobile)">
    Enable this option to reverse the tile order on mobile devices, useful for optimizing the visual hierarchy on smaller screens.
  </Accordion>

  <Accordion title="Section heading">
    Add an optional heading above the tile grid. Configure the heading text, size (XS to XL), and alignment (left, center, or right).
  </Accordion>

  <Accordion title="Color scheme">
    Select the default color scheme for the entire section. Individual tiles can override this with their own color schemes.
  </Accordion>

  <Accordion title="Section width">
    Choose between three width options:

    * **Page width** — Standard container width
    * **Fluid** — Wider, edge-to-edge within padding
    * **Full width** — Complete edge-to-edge layout
  </Accordion>

  <Accordion title="Spacing">
    Control the vertical spacing above and below the section with options ranging from None to XL (0, S, M, L, XL).
  </Accordion>
</AccordionGroup>

## Block types

### Tile

The primary content block for creating grid items with text, media, and buttons.

<AccordionGroup>
  <Accordion title="Visibility settings">
    Control where the tile appears:

    * **Desktop only**
    * **Mobile only**
    * **Both** (default)
  </Accordion>

  <Accordion title="Grid layout">
    **Column factor** — Set how many columns the tile spans (1-6, default 1)

    **Row factor** — Set how many rows the tile spans (1-6, default 1)

    These settings enable flexible mosaic layouts by controlling the tile's grid size. A tile with column factor 3 and row factor 2 will occupy a 3×2 grid space.
  </Accordion>

  <Accordion title="Tile appearance">
    **Color scheme** — Override the section's color scheme for this specific tile (default: scheme-5)

    **Custom background color** — Apply a custom gradient or solid background color, overriding the color scheme

    **Aspect ratio** — Choose between:

    * **Auto** — Height determined by content
    * **Fixed ratios** — Square (1:1), Landscape (4:3, 3:2, 5:4, 16:9, 2:1, 4:1, 8:1), Portrait (3:4, 2:3, 4:5, 9:16, 1:2)
  </Accordion>

  <Accordion title="Content positioning">
    **Vertical position** — Align content to top, center (default), or bottom of the tile

    **Content alignment** — Position content left, center (default), or right

    **Content alignment (Mobile)** — Separate alignment control for mobile devices (default: left)
  </Accordion>

  <Accordion title="Media settings">
    **Media position** — Choose where media appears:

    * **Top** — Above content
    * **Bottom** — Below content
    * **Background** (default) — Behind content as background

    **Image** — Upload a static image

    **Video** — Upload a native video file

    **External video** — Add a YouTube or Vimeo URL

    **Show video controls** — Display playback controls for videos
  </Accordion>

  <Accordion title="Mobile-specific media">
    Provide alternative media assets optimized for mobile devices:

    * **Image (Mobile)**
    * **Video (Mobile)**
    * **External video (Mobile)**
    * **Show video controls (Mobile)**
  </Accordion>

  <Accordion title="Text content">
    **Heading** — Add a tile heading with configurable size (XS to XL, default L)

    **Text** — Add descriptive text content supporting rich text formatting

    **Button label** — Add a call-to-action button with customizable text

    **Button link** — Set the button destination URL

    **Button style** — Choose filled, outlined, or text button style (default: filled)
  </Accordion>

  <Accordion title="Inner spacing">
    Control the padding inside the tile, ranging from None to XL (0, S, M, L, XL, default M).
  </Accordion>
</AccordionGroup>

### Slideshow

A specialized tile block that displays a carousel of content slides.

<AccordionGroup>
  <Accordion title="Visibility settings">
    Control where the slideshow tile appears (desktop only, mobile only, or both).
  </Accordion>

  <Accordion title="Grid layout">
    **Column factor** — Set column span (1-6, default 6)

    **Row factor** — Set row span (1-6, default 1)
  </Accordion>

  <Accordion title="Slideshow appearance">
    **Media aspect ratio** — Choose from 11 preset ratios including square (1:1), landscape (4:3, 3:2, 5:4, 16:9, 2:1), and portrait (3:4, 2:3, 4:5, 9:16, 1:2). Default is 2:1.

    **Color scheme** — Select the color scheme (default: scheme-5)

    **Custom background color** — Override with a custom gradient or solid color
  </Accordion>

  <Accordion title="Content positioning">
    **Vertical position** — Align content to top, center (default), or bottom

    **Content alignment** — Position content left, center (default), or right

    **Content alignment (Mobile)** — Separate alignment for mobile (default: left)
  </Accordion>

  <Accordion title="Slideshow controls">
    **Autoplay** — Set automatic slide transition interval (0-10 seconds, 0 = disabled)

    **Actions alignment** — Position navigation controls at start, center (default), or end

    **Show arrows** — Display previous/next navigation arrows (enabled by default)

    **Show bullets** — Display slide indicator bullets (enabled by default)

    **Show progress** — Display a progress bar for autoplay (enabled by default)
  </Accordion>

  <Accordion title="Slideshow content source">
    Choose between two content sources:

    * **Manual** — Manually configure up to 5 slides within the block settings
    * **Metaobject** — Dynamically populate slides from a metaobject definition
  </Accordion>

  <Accordion title="Manual slides (1-5)">
    When using manual mode, configure up to 5 individual slides:

    * **Heading** — Slide title
    * **Text** — Slide description
    * **Image** — Slide image

    Each slide includes these three fields for creating rich content presentations.
  </Accordion>

  <Accordion title="Inner spacing">
    Control the padding inside the slideshow tile (None to XL, default M).
  </Accordion>
</AccordionGroup>

## Default configuration

The section comes with a preset of three tiles arranged in a balanced grid layout:

* First tile: 3 columns × 2 rows (large featured tile)
* Second tile: 3 columns × 1 row (horizontal tile)
* Third tile: 3 columns × 1 row (horizontal tile)

This creates an asymmetric layout with one prominent tile and two smaller tiles below, ideal for highlighting key content.

## Best practices

<CardGroup cols={2}>
  <Card title="Grid planning" icon="grid">
    Plan your grid layout before adding tiles. The section uses a 6-column grid, so ensure column factors add up logically for balanced rows.
  </Card>

  <Card title="Mobile optimization" icon="mobile">
    Use the "Block order (Mobile)" setting and mobile-specific media to optimize the layout and content for smaller screens.
  </Card>

  <Card title="Visual hierarchy" icon="layer-group">
    Use larger row and column factors for important content to create focal points. Combine different tile sizes for visual interest.
  </Card>

  <Card title="Aspect ratios" icon="crop">
    Choose aspect ratios that complement your imagery. Use "auto" for text-heavy tiles and fixed ratios for image-focused tiles.
  </Card>

  <Card title="Color contrast" icon="palette">
    When using background media, ensure sufficient contrast between the media and text content for readability.
  </Card>

  <Card title="Performance" icon="gauge-high">
    Optimize images and videos before uploading. Use appropriate media for mobile to reduce data usage and improve loading times.
  </Card>
</CardGroup>

## Use cases

* **Homepage grids** — Create dynamic homepage layouts with mixed content types
* **Feature showcases** — Highlight multiple product features or benefits in an engaging grid
* **Portfolio displays** — Showcase projects or work samples with flexible sizing
* **Content hubs** — Build navigation hubs linking to different site sections
* **Mixed media galleries** — Combine images, videos, and text in a unified layout
* **Story walls** — Tell brand stories through a mosaic of visual and textual content