Atlas

Card

A linked content card: cropped image, badges, heading, meta list and subtitle, with the whole card acting as one link.

<x-atlas::card>

Cranes over a container terminal at dusk

Rotterdam terminal expansion

How a quay wall gained 400 metres without closing for a day.

/components/card 
<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card
        image="https://picsum.photos/seed/atlas-harbour/480/480"
        alt="Cranes over a container terminal at dusk"
        title="Rotterdam terminal expansion"
        subtitle="How a quay wall gained 400 metres without closing for a day."
        url="/components/card"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →
The card is one link end to end: an anchor stretched over the whole article carries the url. Nothing inside the body can be a separate link, because the stretched anchor sits on top of it. Badges are the exception — they are lifted above it deliberately.

Badges

Badges pin to the top-left of the image. Pass strings when they are only labels, or arrays when a badge needs a color, a lighter variant, or a destination of its own. Every key is optional except title, and the colors and variants are badge's own.

Infrastructure Case study

Quay wall renewal

Two strings, two default badges.

/components/card 
<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card
        image="https://picsum.photos/seed/atlas-badges-a/480/480"
        title="Quay wall renewal"
        subtitle="Two strings, two default badges."
        :badges="['Infrastructure', 'Case study']"
        url="/components/card"
    />

    <x-atlas::card
        image="https://picsum.photos/seed/atlas-badges-b/480/480"
        title="Tidal lock retrofit"
        subtitle="Arrays let each badge carry its own color, variant and destination."
        :badges="[
            ['title' => 'Live', 'color' => 'success'],
            ['title' => 'Water management', 'color' => 'secondary', 'variant' => 'outline', 'url' => '/components/badge'],
        ]"
        url="/components/card"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →

Meta list

meta renders an Atlas list above the subtitle. Keep the entries to a handful of words each — dates, places, document types — and leave the sentence to the subtitle.

Delta works inspection

  • 12 March 2026
  • Zeeland
  • Field report

A yearly survey of every moving part in the storm surge barrier.

/components/card 
<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card
        image="https://picsum.photos/seed/atlas-meta/480/480"
        title="Delta works inspection"
        subtitle="A yearly survey of every moving part in the storm surge barrier."
        :meta="['12 March 2026', 'Zeeland', 'Field report']"
        url="/components/card"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →

Aspect ratios

Cropping happens in CSS, so a grid of cards stays aligned even when the source images do not share a ratio. Only the ratios Atlas ships a utility for take effect: 1/1, 2/3, 3/4, 4/5, 3/2, 4/3 and 16/9. 

<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card
        image="https://picsum.photos/seed/atlas-aspect-a/480/480"
        aspect="1/1"
        title="Square"
        subtitle="The default."
        url="/components/card"
    />

    <x-atlas::card
        image="https://picsum.photos/seed/atlas-aspect-b/480/480"
        aspect="4/3"
        title="Landscape"
        subtitle="Reads as a photograph."
        url="/components/card"
    />

    <x-atlas::card
        image="https://picsum.photos/seed/atlas-aspect-c/480/480"
        aspect="3/4"
        title="Portrait"
        subtitle="Gives a person or a building room."
        url="/components/card"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →

Text overlay

Reach for text-overlay when the image is the point and the words are a caption — a hero tile, a photo essay, a promo. It moves the body onto the image over a dark gradient, so a tall ratio and short copy keep it readable. 

<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card
        variant="text-overlay"
        image="https://picsum.photos/seed/atlas-overlay/480/480"
        aspect="4/5"
        title="Night shift"
        subtitle="Twelve hours at the lock gates."
        :badges="['Photo essay']"
        url="/components/card"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →

Without an image

An empty image skips the figure entirely rather than falling back to a placeholder, which also removes the badges. Set heading-level to fit the document outline and heading-size to fit the layout; they are independent.

Annual report 2025

  • PDF
  • 2.4 MB

Forty pages, one download, no picture needed.

/components/card 
<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card
        title="Annual report 2025"
        subtitle="Forty pages, one download, no picture needed."
        :meta="['PDF', '2.4 MB']"
        :heading-level="2"
        heading-size="h4"
        url="/components/card"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →
Passing an integer to image switches the underlying image to the WordPress attachment driver, which calls wp_get_attachment_image(). In a plain Laravel app that throws, so pass a URL string here.

Employee card

A person: portrait, name, role, and the ways to reach them. Contact details can sit under the name or appear on hover over the portrait.

Image

One img tag, rendered by whichever driver fits the source: a URL, a WordPress attachment id, or nothing at all.

Badge

Short status labels in three sizes and weights. Renders as a span, or as a button or link when it needs to be actionable.

Reference

<x-atlas::card>

  • Name
    image
    Type
    string | int
    Default
    default: null
    Description
    Image source. A string URL renders through the standard image driver; an integer is treated as a WordPress attachment id. Without an image the whole figure is skipped, badges included.
  • Name
    alt
    Type
    string
    Default
    default: ''
    Description
    Alternative text for the image. Leave empty when the title already describes the picture.
  • Name
    aspect
    Type
    1/1 | 2/3 | 3/4 | 4/5 | 3/2 | 4/3 | 16/9
    Default
    default: 1/1
    Description
    Aspect ratio the image is cropped to. Values outside this set produce a class Atlas has no rule for, so the image keeps its natural ratio.
  • Name
    size
    Type
    string
    Default
    default: full
    Description
    WordPress image size passed to the attachment lookup. Ignored when image is a URL.
  • Name
    variant
    Type
    default | text-overlay
    Default
    default: default
    Description
    Where the body sits: below the image, or over the bottom of it on a gradient.
  • Name
    title
    Type
    string
    Default
    default: ''
    Description
    Card heading. Rendered unescaped, so inline markup is allowed.
  • Name
    subtitle
    Type
    string
    Default
    default: ''
    Description
    Supporting line under the heading. Rendered unescaped.
  • Name
    heading-level
    Type
    int
    Default
    default: 3
    Description
    Heading element the title renders as, 1 to 6. Pick the level the surrounding document needs.
  • Name
    heading-size
    Type
    display | h1 … h6 | base | xs | sm | lg | xl
    Default
    default: h5
    Description
    Type scale of the title, independent of its level.
  • Name
    meta
    Type
    array
    Default
    default: []
    Description
    Strings rendered as a vertical list between title and subtitle. Use it for dates, locations, categories.
  • Name
    badges
    Type
    array
    Default
    default: []
    Description
    Badges pinned to the top-left of the image. Each entry is a string, or an array with title, url, color and variant.
  • Name
    url
    Type
    string
    Default
    default: #
    Description
    Destination of the stretched link covering the whole card. The URL itself is the link's accessible name.