Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add team-member

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::team-member> goes inside team-section.

Basic Usage

  • AL

    Ada Lovelace

    Engineering

    Wrote the first algorithm intended for a machine.

  • GH

    Grace Hopper

    Compilers

    Found the first bug, and named the practice.

<x-aura::team-section :columns="2">
    <x-aura::team-member name="Ada Lovelace" role="Engineering" bio="Wrote the first algorithm intended for a machine.">
        <x-slot:links>
            <a href="#" class="text-sm text-aura-surface-600 hover:text-aura-surface-900">GitHub</a>
            <a href="#" class="text-sm text-aura-surface-600 hover:text-aura-surface-900">Website</a>
        </x-slot:links>
    </x-aura::team-member>

    <x-aura::team-member name="Grace Hopper" role="Compilers" align="left" bio="Found the first bug, and named the practice." />
</x-aura::team-section>

Props

Prop Type Default Description
name string '' Also the photo's alt text.
role string|null null Job title.
bio string|null null A line or two.
avatar string|null null Photo URL, sanitised. Falls back to an avatar with initials.
initials string|null null Overrides the initials the avatar would derive.
align string 'center' center or left.

Slots

Slot Description
default Extra content under the bio.
links Social or contact links. Rendered as a <nav> named after the person.

Accessibility

  • The photo's alt text is the person's name. A decorative empty alt would leave a screen-reader user with a role and a biography belonging to nobody.
  • The links group is named after the member. A page of ten people otherwise produces ten identical "Social links" groups with no way to tell whose is whose.
  • The role uses a -700 accent in light and a -400 in dark: accents do not invert with the surfaces, so one shade cannot serve both.