Canvas Docs

Team Members

One team member with a photo, name, role, bio and social links, in a default, overlay, list or hover-reveal layout. It is shown in the block inserter as Team Member and registered as canvas-core/team-card.

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:

Content

  • PhotoDefault0

    Portrait of the team member. Its alt text comes from the media library, or from the name when that is empty.

  • Image SizeDefaultMedium Large

    Which registered size of the photo is loaded.

    ChoicesThumbnailMediumMedium LargeLargeFull

  • NameDefaultJohn Doe

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

  • RoleDefaultCEO

    Job title shown under the name.

  • BioDefaultEmpty

    A short paragraph about the person. Bold, italic, links and line breaks are kept. Leave empty for a card with no copy.

  • Profile LinkDefaultEmpty

    Where the name, and the photo when Link the Photo is on, lead. Leave empty for an unlinked card.

  • Open Profile in New TabDefaultOff

    Opens the profile link in a new browser tab.

    Shown when Profile Link is set

  • Add rel="nofollow"DefaultOff

    Tells search engines not to pass ranking credit through the profile link.

    Shown when Profile Link is set

Layout

  • LayoutDefaultDefault

    Default puts the details under the photo, Description Overlay lays them over it, List sets them beside it, and Hover Reveal slides them in over the photo on hover.

    ChoicesDefaultDescription OverlayListHover Reveal

  • Text AlignmentDefaultEmpty

    Center marks the whole card as centred; Start aligns the details to the start edge.

    ChoicesLayout Default (empty)CenterStart

  • Photo ShapeDefaultRounded

    Corner treatment of the photo. Choose None when your own styling shapes it.

    ChoicesRoundedCircleSquareNone

  • Link the PhotoDefaultOff

    Wraps the photo in the profile link as well.

    Shown when Profile Link is set

  • Name LinkDefaultInside the Heading

    Where the profile link sits relative to the name heading.

    ChoicesInside the HeadingAround the HeadingNo LinkShown when Profile Link is set

  • Name Heading TagDefaultH4

    Heading level of the name, so the card sits correctly in the page outline.

    ChoicesH2H3H4H5H6

  • Role TagDefaultSPAN

    Element the role is written in.

    ChoicesSPANH5H6P

  • Description BackgroundDefaultOff

    Gives the details area its own background and padding.

  • Wrap Bio in a ParagraphDefaultOn

    Off writes the bio straight into its container, with no paragraph element.

    Shown when Bio is set

Social

  • Social Icons PositionDefaultUnder the Details

    On the Photo shows the icons over the portrait when a visitor hovers it. It needs a photo; without one the icons stay under the details.

    ChoicesUnder the DetailsOn the PhotoShown when Layout is "Default" or "List"

  • Social RowDefaultLayout Default

    The element the icons sit in. Layout Default uses the row the layout is designed with; No Row places the icons directly in the card.

    ChoicesLayout DefaultNo RowCustom Classes

  • Social Row ClassesDefaultEmpty

    Classes of the row element around the icons. Leave empty for the layout default.

    Shown when Social Row is "Custom Classes"

  • Photo Overlay ClassesDefaultalign-items-end

    Classes of the layer holding the icons over the photo, such as its vertical alignment.

    Shown when Social Icons Position is "On the Photo"

  • Photo Overlay AnimationDefaultFade In

    How the icons appear when a visitor hovers the photo. None keeps them visible.

    ChoicesNone (empty)BounceFlashPulseRubber BandShake XShake YHead ShakeSwingTadaWobbleJelloand 49 moreShown when Social Icons Position is "On the Photo"

  • Photo Overlay Speed (ms)Default400

    How long the hover animation takes. 0 uses the animation's own speed.

    Shown when Social Icons Position is "On the Photo"

  • Photo Overlay TintDefaultOn

    Darkens the photo behind the icons while they show.

    Shown when Social Icons Position is "On the Photo"

Classes

  • Name ClassesDefaultEmpty

    Classes added to the name heading.

  • Role ClassesDefaultEmpty

    Classes added to the role element.

  • Photo Wrapper ClassesDefaultEmpty

    Classes added to the element around the photo.

  • Details ClassesDefaultEmpty

    Classes added to the element holding the name, role, bio and icons.

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?