Canvas Docs

Team Members

Team member cards with grid, overlay, and list layouts. Supports photos, bio, profile links, and social icon links. It is shown in the block inserter as Canvas Team Member and registered as canvas-core/team-member.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Team Members settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Members

  • Team MembersDefaultEmpty

    The people shown in this set, one card each.

    Each row of Team Members takes:

    • PhotoDefault0

      Portrait shown at the top of the card.

    • NameDefaultEmpty

      The person's name, shown as the card heading.

    • Designation / RoleDefaultEmpty

      Job title shown under the name.

    • BioDefaultEmpty

      A short paragraph about the person. Leave empty for a card with no copy.

    • Profile URLDefaultEmpty

      Where the name and photograph lead, such as a full profile page. Leave empty for an unlinked card.

    • Social Links (JSON)DefaultEmpty

      This person's social profiles, up to five, each with an icon and an address.

    • Social Row ClassesDefaultEmpty

      Overrides the block-level social row classes for this card.

Layout

  • LayoutDefaultGrid

    How the cards are arranged: a grid of portraits, portraits with the details laid over them, a stacked list, or a carousel the visitor slides through.

    ChoicesGridOverlayListCarousel

  • Carousel Card LayoutDefaultGrid Card

    Which card markup the slides use. A carousel is a way of ARRANGING cards, not a card design of its own.

    ChoicesGrid CardList CardOverlay CardShown when Layout is "Carousel"

  • Wrapper ClassesDefaultEmpty

    Replaces the default wrapper class, so the list root can be the design's own grid row. Enter "none" for an unclassed root.

  • Column ClassesDefaultEmpty

    Wraps every card in a grid column. Leave empty for no column wrapper.

  • Social Row ClassesDefaultEmpty

    Replaces the per-layout default on the row of social icons.

    Shown when Show Social Links is on and Wrap Social Icons in a Row is on

  • Wrap Social Icons in a RowDefaultOn

    Off places the icons directly in the card body, with no row element of their own.

    Shown when Show Social Links is on

  • Image SizeDefaultmedium_large

    Registered image size each photo is requested at.

  • Image ShapeDefaultRounded

    Corner treatment of each portrait. Choose None when your own styling shapes the photograph.

    ChoicesRoundedCircleSquareNone

  • Name Heading TagDefaultH4

    Which heading level each name uses, so the set sits correctly in the page outline for search engines and screen readers.

    ChoicesH2H3H4H5H6

Social

  • Show Social LinksDefaultOn

    Show each person's social icons on their card.

  • Social Icon StyleDefaultLight Background

    How the social icons are drawn at rest: outlined, on a pale background, or in each network's own brand colour.

    ChoicesDefaultLight BackgroundColoredShown when Show Social Links is on

  • Social Icon ShapeDefaultCircle

    Corner treatment of each social icon.

    ChoicesCircleDefaultSquareShown when Show Social Links is on

  • Social Icon SizeDefaultSmall

    How large the social icons are drawn on the card.

    ChoicesSmallDefaultLargeShown when Show Social Links is on

  • Extra Social Icon ClassesDefaultEmpty

    Added to every social icon, on top of the style, shape and size choices.

    Shown when Show Social Links is on

  • Items (base)Default0

    Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

    Shown when Layout is "Carousel"

  • Items (XS)Default1

    Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

    Shown when Layout is "Carousel"

  • Items (SM)Default2

    Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Items (MD)Default3

    Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Items (LG)Default4

    Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Items (XL)Default4

    Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Item Gap (px)Default20

    Space between one slide and the next, in pixels.

    Shown when Layout is "Carousel"

  • Show ArrowsDefaultOn

    Show the previous and next arrows beside the slides.

    Shown when Layout is "Carousel"

  • Arrows Always VisibleDefaultOff

    Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

    Shown when Layout is "Carousel"

  • Show DotsDefaultOn

    Show the row of dots below the slides, one per page.

    Shown when Layout is "Carousel"

  • Autoplay (ms)Default0

    Milliseconds between slides. 0 disables autoplay.

    Shown when Layout is "Carousel"

  • LoopDefaultOff

    Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

    Shown when Layout is "Carousel"

  • Transition SpeedDefault250

    Milliseconds per slide transition.

    Shown when Layout is "Carousel"

  • Centre Active SlideDefaultOff

    Keeps the active slide in the middle of the stage.

    Shown when Layout is "Carousel"

  • Stage PaddingDefault0

    Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

    Shown when Layout is "Carousel"

  • Animate InDefaultEmpty

    Animation class applied to the incoming slide. Empty uses a plain slide.

    Shown when Layout is "Carousel"

  • Animate OutDefaultEmpty

    Animation class applied to the outgoing slide. Empty uses a plain slide.

    Shown when Layout is "Carousel"

Style tab

  • Name Color

    A style control in the Name group of the Style tab.

  • Name Font Size

    A style control in the Name group of the Style tab.

  • Designation Typography

    A style control in the Designation group of the Style tab.

  • Designation Color

    A style control in the Designation group of the Style tab.

  • Description Background

    A style control in the Content group of the Style tab.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Canvas: Alerts, Buttons, Code Highlight, Counters, Dividers, Dropcaps.

Was this page helpful?