Atlas

Contact list

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

<x-atlas::contact-list> 

<x-atlas::contact-list
    :items="[
        ['icon' => 'far-envelope', 'email' => '[email protected]'],
        ['icon' => 'fas-phone', 'phone' => '+31 10 123 45 67'],
    ]"
/>
Preview follows the site's light/dark mode. Open standalone →
Every item must carry an icon key. The component reads $item['icon'] without a guard, so an item like ['email' => '[email protected]'] throws an undefined-key error rather than rendering without an icon. email and phone are both optional and both guarded — only the icon is not.

The wrapper is an <address>, so use this for ways to reach a real person or office, not as a generic icon list. An empty items array renders nothing, which means you can pass a possibly-empty collection straight in without wrapping it in a condition.

One value serves as both the link and its label: +31 10 123 45 67 is shown as written and put straight into the tel: URI, spaces included. Browsers strip those when they dial, but if you need a strictly formed URI, store the number without them and accept the plainer label.

Link colors

color repaints the links only. Pick the token that reads against the panel the block sits on; passing an empty string leaves them on the default link color. 

<x-atlas::contact-list
    color="primary"
    :items="[['icon' => 'far-envelope', 'email' => '[email protected]']]"
/>

<x-atlas::contact-list
    color="secondary"
    :items="[['icon' => 'far-envelope', 'email' => '[email protected]']]"
/>

<x-atlas::contact-list
    color="accent"
    :items="[['icon' => 'far-envelope', 'email' => '[email protected]']]"
/>
Preview follows the site's light/dark mode. Open standalone →

Icon color

Icons inherit the surrounding text color by default. Set icon-color when the icon should carry the accent and the link text should stay in the body color. 

<x-atlas::contact-list
    color="accent"
    icon-color="primary"
    :items="[
        ['icon' => 'far-envelope', 'email' => '[email protected]'],
        ['icon' => 'fas-phone', 'phone' => '+31 10 765 43 21'],
    ]"
/>
Preview follows the site's light/dark mode. Open standalone →

Email and phone in one item

One item may hold both keys, which puts both links on a single row behind one icon. That is worth doing for a switchboard that answers on either channel; otherwise give each its own item so the icon matches the link. 

<x-atlas::contact-list
    :items="[
        ['icon' => 'fas-phone', 'phone' => '+31 10 123 45 67', 'email' => '[email protected]'],
    ]"
/>
Preview follows the site's light/dark mode. Open standalone →

Social list

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

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.

List

Bulleted, numbered, icon and inline lists, built either from an array of strings or from item children.

Reference

<x-atlas::contact-list>

  • Name
    items
    Type
    array
    Default
    default: []
    Description
    The entries. Each item needs an icon key plus an email or a phone key. An empty array renders nothing at all.
  • Name
    color
    Type
    primary | secondary | accent
    Default
    default: primary
    Description
    Color token the links draw from. An empty string leaves them on the default link color.
  • Name
    icon-color
    Type
    primary | secondary | accent
    Default
    default: ''
    Description
    Color token for the icons. Empty means they inherit the surrounding text color.