The React documentation for this component can be read from Storybook (link here)

Meet the Team

Use to convey trust and security to the user about a given project / company and provide an overview of the people behind the scenes.

Description

Consists of a list of team members and a detail panel. The list of team members are arranged in a grid whose column span varies with the width of the viewport (ranging from 5 columns on large devices to 3 on medium sized screens and 2 on small devices).

The detail panel just handles the layout and is expected to be inserted into a modal window.

This component is very closely aligned to the profile component and modal component. The profile component is expected to fill in the grid and provide a bunch of faces, names, and job titles, and the modal is used to display the detail panel for each team member.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include meet-the-team;

Usage

Usage example

Grid

This is the barebones of the "Meet the Team" grid that can be displayed in a page. Instead of the placeholder component, a profile component is expected.



Detail

This is the barebones of the "Meet the Team" detail section. This is expected to live inside a modal. It sets out the grid to be used. It is expected that on the left would be a profile component, and on the right a text block.



Integration Example

Below is an example of the "Meet the Team" component integrated with other components and content, to give an idea of how it should work. The placeholder components in the grid are replaced with profile components. There is also a modal component for each team member which contains the details of each team member. And finally, it's all linked up so that the persons name triggers the modal to open.



Meet our team

Pam Burton

Chief Marketing Officer

Samir Desai CBE

Assistant manager

Sam Hodges

Head of Engineering

Lisa Jacobs

Chief risk officer

Jerome Le Luel

Chief strategy officer

James Meekings

Co-founder, UK Managing Director

Panni Morshedi

General Counsel

Lucy Vernall

Co-founder, US Managing director

David Yu

Human resources manager

Sachin Patel

Chief capital officer

<div class="meet-the-team">
  <div class="meet-the-team__member">
    <div class="placeholder-component"></div>
  </div>
  <!-- more .meet-the-team__member elements... -->
</div>

<!-- detail -->
<div class="meet-the-team__detail">
  <div class="meet-the-team__detail-col">
    <div class="placeholder-component"></div>
  </div>
  <div class="meet-the-team__detail-col">
    <div class="placeholder-component"></div>
  </div>
</div>