Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
BrochurePortrait

Portrait

A team member's photo card that straightens, lifts and shows a name tag with a wave when hovered.

<koala-portrait>

A row of the team

Set the cards in a koala-portraits row. Hovering or focusing one straightens it, lifts it forward and pops up a tag with the first name, a wave and the role, while the rest of the row steps back, smaller and faded. Stagger the cards with top margins and alternate the tilt, as the hero of the Legal careers page does. That hero hides the outer two below sm, so a phone shows three. Under reduced motion the card still straightens and shows its tag, but nothing lifts, waves or steps back.

Ashley Tate
Ashley Co-founder & CEO
Charlotte Rowlin
Charlotte Conveyancer
Haris Raza
Haris Product Engineer

The live hero grows each card to xl:w-36 and shows six people, which this box is too narrow to hold.

Size and lean

The card takes its width from the caller's classes and keeps a three-by-four photo at that width. tilt leans it at rest the same way Tilt leans anything else; leave it off for the card in the middle of a row. A card works on its own too, without the step-back of a row. It is focusable, so a keyboard shows the tag as well.

Ashley Tate
Ashley Co-founder & CEO

API

photo resolved image URL
name full name; the alt text, and the first name on the tag
role short job title on the tag
tilt NoneLeftRight (default None)
class width and offsets, merged onto the card
koala-portraits class merged onto the centred row