Atlas

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.

<x-atlas::card.employee>

Lotte Verhoeven

Lead engineer

<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card.employee
        image="https://picsum.photos/seed/atlas-lotte/360/480"
        title="Lotte Verhoeven"
        subtitle="Lead engineer"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →
The tag is <x-atlas::card.employee> — it lives beside card in the package, but shares none of its props. There is no stretched link here: everything clickable is a real link you place yourself.

Contact details

contact-items is handed to contact-list unchanged, so every item needs an icon alongside its email or phone. Only the envelope and phone icons make sense here. 

<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card.employee
        image="https://picsum.photos/seed/atlas-sander/360/480"
        title="Sander de Wit"
        subtitle="Project manager"
        :contact-items="[
            ['icon' => 'far-envelope', 'email' => '[email protected]'],
            ['icon' => 'fas-phone', 'phone' => '+31 10 123 45 67'],
        ]"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →

Social links

social-items goes to social-list the same way. Give each one a label: without it the accessible name falls back to the raw icon name, which a screen reader will read out in full. 

<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card.employee
        image="https://picsum.photos/seed/atlas-noor/360/480"
        title="Noor Bakker"
        subtitle="Head of research"
        :contact-items="[
            ['icon' => 'far-envelope', 'email' => '[email protected]'],
        ]"
        :social-items="[
            ['icon' => 'fab-linkedin', 'url' => 'https://www.linkedin.com', 'label' => 'Noor on LinkedIn'],
            ['icon' => 'fab-instagram', 'url' => 'https://www.instagram.com', 'label' => 'Noor on Instagram'],
        ]"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →

Text overlay

Use text-overlay for a dense team grid where names matter more than contact details: from 768px up the body moves onto the portrait and the contact panel unfolds on hover. Because that reveal is hover-only, never put anything there a visitor must be able to reach — on a touch screen the panel stays collapsed. 

<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card.employee
        variant="text-overlay"
        image="https://picsum.photos/seed/atlas-jamal/360/480"
        title="Jamal Aziz"
        subtitle="Site supervisor"
        :contact-items="[
            ['icon' => 'far-envelope', 'email' => '[email protected]'],
            ['icon' => 'fas-phone', 'phone' => '+31 10 765 43 21'],
        ]"
        :social-items="[
            ['icon' => 'fab-linkedin', 'url' => 'https://www.linkedin.com', 'label' => 'Jamal on LinkedIn'],
        ]"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →

Linked portrait

href wraps the portrait in a link, but the figure is marked aria-hidden and the link is given tabindex="-1". That is deliberate: the picture is decoration, so put the same destination on the name as well, or keyboard and screen-reader users have no way through. 

<div class="grid gap-8 sm:grid-cols-3">
    <x-atlas::card.employee
        href="/components/employee-card"
        image="https://picsum.photos/seed/atlas-marijke/360/480"
        title='<a href="/components/employee-card">Marijke Anker</a>'
        subtitle="Communications"
        :heading-level="2"
        heading-size="xl"
    />
</div>
Preview follows the site's light/dark mode. Open standalone →
The portrait is always cropped to 3:4 by the stylesheet — this card has no aspect prop. Supply portraits that survive that crop, and use card instead when you need another ratio.

Card

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

Contact list

An address block of email and telephone links, each behind its own icon.

Social list

A row of brand icons linking out to social profiles, labelled for screen readers.

Image

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

Reference

<x-atlas::card.employee>

  • Name
    image
    Type
    string | int
    Default
    default: null
    Description
    Portrait source. A string URL renders through the standard image driver; an integer is treated as a WordPress attachment id. Without it the figure is skipped.
  • Name
    href
    Type
    string
    Default
    default: null
    Description
    Wraps the portrait in a link to the person's own page. The figure is aria-hidden and the link is taken out of the tab order, so pair it with a link in the body.
  • 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. text-overlay moves it over the portrait from 768px up and reveals the footer on hover.
  • Name
    title
    Type
    string
    Default
    default: ''
    Description
    The person's name. Rendered unescaped, and used stripped of tags as the article's aria-label.
  • Name
    subtitle
    Type
    string
    Default
    default: ''
    Description
    Role or department. Rendered unescaped, and omitted entirely when empty.
  • Name
    heading-level
    Type
    int
    Default
    default: 3
    Description
    Heading element the name renders as, 1 to 6.
  • Name
    heading-size
    Type
    display | h1 … h6 | base | xs | sm | lg | xl
    Default
    default: lg
    Description
    Type scale of the name, independent of its level.
  • Name
    contact-items
    Type
    array
    Default
    default: []
    Description
    Passed straight to contact-list. Each item needs an icon plus an email or a phone.
  • Name
    social-items
    Type
    array
    Default
    default: []
    Description
    Passed straight to social-list. Each item needs an icon and a url.