<Card title="Alex Rivera" subtitle="Senior Product Designer">
  <Columns>
    <div>
      <Avatar name="Alex Rivera" src="https://i.pravatar.cc/150?img=12" />
      <Badge tone="info">Design Team</Badge>
    </div>
    <div>
      <KeyValue title="Details">
        | Label | Value |
        |---|---|
        | Role | Senior Product Designer |
        | Team | Product Design |
        | Location | San Francisco, CA |
        | Email | alex.rivera@company.com |
      </KeyValue>
    </div>
  </Columns>
</Card>

<Card title="About Alex">
  <p>Alex is a product designer with 8 years of experience crafting intuitive digital experiences. They specialize in design systems, accessibility, and user research. Alex has led design for our mobile app and checkout flow, and they're passionate about making complex problems feel simple.</p>
  <p>Outside of work, Alex enjoys hiking, photography, and experimenting with sourdough baking.</p>
</Card>

<Card title="Contact">
  <Form name="contact-form">
    <TextArea label="Message" name="message" placeholder="Type your message to Alex…" rows="4" required="true" hint="Messages are delivered to Alex's inbox" />
    <Button variant="primary">Send message</Button>
  </Form>
</Card>