Team

Team grid layout component for Quarto

A quarto shortcode extension to add team layouts for html and revealjs formats
Author

Roy Francis

Published

09-Apr-2026

1 Install

  • Requires Quarto >= 1.4.0
  • In the root of the quarto project, run in terminal:
quarto add royfrancis/quarto-team

This will install the extension under the _extensions subdirectory.

2 Usage

  • Define team contents (name, image, etc …) under yaml keyword team
  • Insert shortcode in the quarto document

Here is the syntax where [text] is replaced as needed.

---
team:
  - [label]:
    - image: [url/path to image]
      name: [text content for name]
      description: [text content for description]
---

{{< team [label] >}}

2.1 Minimal usage

Name and image are mandatory. Other parameters are optional.

---
team:
  - team:
    - name: Preston Donald
      image: https://images.generated.photos/mwPp9cKhJ9MXZ-w8_RUUAOTi7LqElZb7OvQrEb_IVLA/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/ODc5NzcyLmpwZw.jpg
      description: Description
---

{{< team team >}}
Preston Donald
Preston Donald
Description

2.2 Inline content

Multiple inline items are defined using JSON. When no label is supplied, the wrapper id is generated automatically from the inline payload.

{{< team items='[{"name":"Koa Amin","image":"https://images.generated.photos/kBmZ3-ZV_H_siHy0kJoPMXxO90it5palMqarwVB07Xc/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/NTk0MDA0LmpwZw.jpg","description":"President"},{"name":"Albert Parker","image":"https://images.generated.photos/M9uItQDtYe_6yn-aoBV5kVdvil03ECYX-rmnGPBEUDs/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/OTQ5ODAwLmpwZw.jpg","description":"Vice President"}]' >}}
Koa Amin
Koa Amin
President
Albert Parker
Albert Parker
Vice President

2.3 Multiple team blocks

Multiple team block can be included on the same page using different labels.

---
team:
  - team-a:
    - name: Koa Amin
      image: https://images.generated.photos/kBmZ3-ZV_H_siHy0kJoPMXxO90it5palMqarwVB07Xc/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/NTk0MDA0LmpwZw.jpg
      description: President
    - name: Albert Parker
      image: https://images.generated.photos/M9uItQDtYe_6yn-aoBV5kVdvil03ECYX-rmnGPBEUDs/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/OTQ5ODAwLmpwZw.jpg
      description: Vice President
    - name: Nicole Shields
      image: https://images.generated.photos/SX0rvAZr8bz4hiKhk2hH7N7RWPY75sFID6_mso-bTWs/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MjM4NjUxLmpwZw.jpg
      description: Contractor
    - name: Hadassah Mohmamin
      image: https://images.generated.photos/3fwZBGZRhQeeykAJPim6e-cVmzI_fw4E8MmKZqGtfpo/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/NTY1OTU3LmpwZw.jpg
      description: Contractor
    - name: Ariel Pererra
      image: https://images.generated.photos/KpzGCMt0exqdiIQpixMjf_GSeLyvhlsD-0DzDq85QKg/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MjUzNjUxLmpwZw.jpg
      description: Human resources
  - team-b:
    - name: Preston Donald
      image: https://images.generated.photos/mwPp9cKhJ9MXZ-w8_RUUAOTi7LqElZb7OvQrEb_IVLA/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/ODc5NzcyLmpwZw.jpg
      description: Description
    - name: Candice Gallegos
      image: https://images.generated.photos/cdXGyJ8-yGT8WjeCEjvhvcwBNjbVsB6ip8Tdj29jNtI/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MDY0ODIyLmpwZw.jpg
      description: Description
    - name: Raquel Terell
      image: https://images.generated.photos/IgdOCj2Vb_fq44z372xJwGnUTKwD7sZhptol5Ga9yQI/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/Mjc1NDYzLmpwZw.jpg
      description: Description
    - name: Zaria West
      image: https://images.generated.photos/GYbbXppoPDuSml-FZxFJrHiGgQY3ZagpoN0QpZZ7xEY/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MDI4NTY3LmpwZw.jpg
      description: Description
    - name: Niklaus Lugo
      image: https://images.generated.photos/NmE9GJA6meMfgzuYPtkv_7FYrFqV90Cj6-ClqetB5Dk/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/NTI2NTkxLmpwZw.jpg
      description: Description
---

**Team A**

{{< team team-a >}}

**Team B**

{{< team team-b >}}

Team A

Koa Amin
Koa Amin
President
Albert Parker
Albert Parker
Vice President
Nicole Shields
Nicole Shields
Contractor
Hadassah Mohmamin
Hadassah Mohmamin
Contractor
Ariel Pererra
Ariel Pererra
Human resources

Team B

Preston Donald
Preston Donald
Description
Candice Gallegos
Candice Gallegos
Description
Raquel Terell
Raquel Terell
Description
Zaria West
Zaria West
Description
Niklaus Lugo
Niklaus Lugo
Description

2.5 CSS styling

To target all team components on a page, target the class .quarto-team. To target specific team blocks, use the id. For example;

---
team:
  - team-d:
    - name: Preston Donald
      image: https://images.generated.photos/mwPp9cKhJ9MXZ-w8_RUUAOTi7LqElZb7OvQrEb_IVLA/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/ODc5NzcyLmpwZw.jpg
      description: Description
    - name: Candice Gallegos
      image: https://images.generated.photos/cdXGyJ8-yGT8WjeCEjvhvcwBNjbVsB6ip8Tdj29jNtI/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MDY0ODIyLmpwZw.jpg
      description: Description
    - name: Raquel Terell
      image: https://images.generated.photos/IgdOCj2Vb_fq44z372xJwGnUTKwD7sZhptol5Ga9yQI/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/Mjc1NDYzLmpwZw.jpg
      description: Description
    - name: Zaria West
      image: https://images.generated.photos/GYbbXppoPDuSml-FZxFJrHiGgQY3ZagpoN0QpZZ7xEY/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/MDI4NTY3LmpwZw.jpg
      description: Description
    - name: Niklaus Lugo
      image: https://images.generated.photos/NmE9GJA6meMfgzuYPtkv_7FYrFqV90Cj6-ClqetB5Dk/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/NTI2NTkxLmpwZw.jpg
      description: Description
format:
  html:
    css: styles.css
---

{{< team team-d >}}

And here is the css file. Note that we use #quarto-team-team-d, ie; #quarto-team- followed by the team component label.

Background pattern has been added, the grid is center aligned and the name color is changed to blue.

/*-- scss:rules --*/

/* background pattern */
#quarto-team-team-d {
  background-image: radial-gradient(#517699 0.5px, #dbe9f6 0.5px);
  background-size: 10px 10px;
  padding: 1em;
  border-radius: 15px;
}


#quarto-team-team-d .team-parent {
  justify-content: center; /* center aligned */
}

#quarto-team-team-d .name {
  color: steelblue;
}
Preston Donald
Preston Donald
Description
Candice Gallegos
Candice Gallegos
Description
Raquel Terell
Raquel Terell
Description
Zaria West
Zaria West
Description
Niklaus Lugo
Niklaus Lugo
Description

2.6 Custom element classes

Use name_class, image_class, and description_class shortcode arguments to add one or more CSS classes directly to the name element, image element, and description element respectively. Multiple classes are separated by spaces.

{{< team team-a name_class="fst-italic" image_class="rounded shadow-sm border" description_class="text-decoration-line-through" >}}

The classes are appended to the existing built-in classes (team-name, and team-description), so you can use them alongside targeting the default classes in CSS.

Koa Amin
Koa Amin
President
Albert Parker
Albert Parker
Vice President
Nicole Shields
Nicole Shields
Contractor
Hadassah Mohmamin
Hadassah Mohmamin
Contractor
Ariel Pererra
Ariel Pererra
Human resources

The classes in this example come from Bootstrap, but you can add your own as well.

2.7 Item IDs

Each team item gets a deterministic id automatically. You can override it with id when you need a stable selector.

---
team:
  - explicit-id:
    - id: koa-amin
      name: Koa Amin
      image: https://images.generated.photos/kBmZ3-ZV_H_siHy0kJoPMXxO90it5palMqarwVB07Xc/rs:fit:256:256/czM6Ly9pY29uczgu/Z3Bob3Rvcy1wcm9k/LnBob3Rvcy92M18w/NTk0MDA0LmpwZw.jpg
      description: President
---

{{< team explicit-id >}}
Koa Amin
Koa Amin
President

2.8 Other output formats

The team content is supported in html and revealjs. Other output formats ignore the shortcode.