Atlas

Social list

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

<x-atlas::social-list> 

<x-atlas::social-list
    :items="[
        ['icon' => 'fab-linkedin', 'url' => 'https://www.linkedin.com'],
        ['icon' => 'fab-facebook', 'url' => 'https://www.facebook.com'],
        ['icon' => 'fab-instagram', 'url' => 'https://www.instagram.com'],
    ]"
/>
Preview follows the site's light/dark mode. Open standalone →
The brand icons come from Font Awesome through blade-fontawesome: fab-linkedin, fab-facebook, fab-instagram and every other free brand mark. A name that does not resolve throws.

Items are skipped when they have no url, and an empty items array renders nothing — no empty list is left behind. Unlike contact-list, the icons here take the surrounding text color and have no color prop of their own.

Accessible names

The link's aria-label falls back to the icon name, so an unlabelled item is announced as "fab-linkedin". Always pass label. The list's own label is what separates a company row in the footer from a personal row on a profile page. 

<x-atlas::social-list
    label="Follow Atlas"
    :items="[
        ['icon' => 'fab-linkedin', 'url' => 'https://www.linkedin.com', 'label' => 'Atlas on LinkedIn'],
        ['icon' => 'fab-facebook', 'url' => 'https://www.facebook.com', 'label' => 'Atlas on Facebook'],
        ['icon' => 'fab-instagram', 'url' => 'https://www.instagram.com', 'label' => 'Atlas on Instagram'],
    ]"
/>
Preview follows the site's light/dark mode. Open standalone →

Visible text

title adds visible text next to the icon. Use it where the row has space and the names help — a footer column — and leave it out where the icons stand on their own. label stays worth setting even then, since it is what assistive technology reads. 

<x-atlas::social-list
    label="Atlas elsewhere"
    :items="[
        ['icon' => 'fab-linkedin', 'url' => 'https://www.linkedin.com', 'label' => 'Atlas on LinkedIn', 'title' => 'LinkedIn'],
        ['icon' => 'fab-instagram', 'url' => 'https://www.instagram.com', 'label' => 'Atlas on Instagram', 'title' => 'Instagram'],
    ]"
/>
Preview follows the site's light/dark mode. Open standalone →

Contact list

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

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.

Icon

Renders an Atlas component icon or a Font Awesome icon, inline and sized against the surrounding text.

Reference

<x-atlas::social-list>

  • Name
    items
    Type
    array
    Default
    default: []
    Description
    The links. Each item needs a url and an icon; label and title are optional. An item without a url is skipped, and an empty array renders nothing.
  • Name
    label
    Type
    string
    Default
    default: Social media
    Description
    aria-label on the list itself, distinguishing one row of profiles from another on the same page.