Components / FeaturedPeopleSection - Featured People, Four Column Grid ⋅ Storybook

Name	Control
elementId
variant
colors
title	The Team
subtitle	This is Subtitle
actions	actions : [ 0 : {...} 4 keys ]
people	people : [ 0 : {...} 5 keys 1 : {...} 5 keys 2 : {...} 5 keys 3 : {...} 5 keys ]
styles	styles : { self : {...} 9 keys title : {...} 1 key subtitle : {...} 1 key actions : {...} 1 key }

type: FeaturedPeopleSection
elementId: ''
variant: variant-a
colors: colors-h
title: The Team
subtitle: This is Subtitle
actions:
  - type: Button
    url: '#'
    label: View More
    style: primary
people:
  - firstName: Desmond
    lastName: Eagle
    role: Product Manager
    bio: Vincent Van Gogh’s most popular painting, The Starry Night.
    image:
      type: ImageBlock
      url: https://assets.stackbit.com/components/images/default/desmond-eagle.jpg
      altText: Photo of Desmond Eagle
  - firstName: Dianne
    lastName: Ameter
    role: Product Manager
    bio: Vincent Van Gogh’s most popular painting, The Starry Night.
    image:
      type: ImageBlock
      url: https://assets.stackbit.com/components/images/default/dianne-ameter.jpg
      altText: Photo of Dianne Ameter
  - firstName: Hilary
    lastName: Ouse
    role: Product Manager
    bio: Vincent Van Gogh’s most popular painting, The Starry Night.
    image:
      type: ImageBlock
      url: https://assets.stackbit.com/components/images/default/hilary-ouse.jpg
      altText: Photo of Hilary Ouse
  - firstName: Hugh
    lastName: Saturation
    role: Product Manager
    bio: Vincent Van Gogh’s most popular painting, The Starry Night.
    image:
      type: ImageBlock
      url: >-
        https://assets.stackbit.com/components/images/default/hugh-saturation.jpg
      altText: Photo of Hugh Saturation
styles:
  self:
    height: auto
    width: wide
    margin:
      - mt-0
      - mb-0
      - ml-0
      - mr-0
    padding:
      - pt-12
      - pb-12
      - pl-4
      - pr-4
    justifyContent: center
    borderRadius: none
    borderWidth: 0
    borderStyle: none
    borderColor: border-dark
  title:
    textAlign: center
  subtitle:
    textAlign: center
  actions:
    justifyContent: center

type: object
name: FeaturedPeopleSection
label: Featured people
labelField: title
thumbnail: https://assets.stackbit.com/components/models/thumbnails/default.png
extends:
  - Section
groups:
  - sectionComponent
fieldGroups:
  - name: styles
    label: Styles
  - name: settings
    label: Settings
fields:
  - type: enum
    name: variant
    group: styles
    label: Arrangement
    options:
      - label: Four column grid
        value: variant-a
      - label: Two column grid
        value: variant-b
      - label: Two column alt grid
        value: variant-c
    default: variant-a
  - name: colors
    default: colors-h
  - type: string
    name: title
    label: Title
    default: About us
  - type: string
    name: subtitle
    label: Subtitle
    default: Featured people section example
  - type: list
    name: actions
    label: Actions
    items:
      type: model
      models:
        - Button
        - Link
  - type: list
    name: people
    label: People
    items:
      type: reference
      models:
        - Person
    default:
      - content/data/team/desmond-eagle.json
      - content/data/team/dianne-ameter.json
      - content/data/team/hilary-ouse.json
  - type: style
    name: styles
    styles:
      self:
        height:
          - auto
          - screen
        width:
          - narrow
          - wide
          - full
        margin:
          - tw0:36
        padding:
          - tw4:36
        justifyContent:
          - flex-start
          - flex-end
          - center
        borderRadius: '*'
        borderWidth:
          - '0:8'
        borderStyle: '*'
        borderColor:
          - value: border-primary
            label: Primary color
            color: $primary
          - value: border-secondary
            label: Secondary color
            color: $secondary
          - value: border-dark
            label: Dark color
            color: $dark
          - value: border-complementary
            label: Complementary color
            color: $complementary
          - value: border-complementary-alt
            label: Complementary alt color
            color: $complementaryAlt
      title:
        fontWeight:
          - '400'
          - '700'
        fontStyle:
          - normal
          - italic
        textAlign:
          - left
          - center
          - right
      subtitle:
        fontWeight:
          - '400'
          - '700'
        fontStyle:
          - normal
          - italic
        textAlign:
          - left
          - center
          - right
      actions:
        justifyContent:
          - flex-start
          - flex-end
          - center
    default:
      self:
        height: auto
        width: wide
        margin:
          - mt-0
          - mb-0
          - ml-0
          - mr-0
        padding:
          - pt-12
          - pb-12
          - pl-4
          - pr-4
        justifyContent: center
        borderRadius: none
        borderWidth: 0
        borderStyle: none
        borderColor: border-dark
      title:
        textAlign: center
      subtitle:
        fontWeight: 400
        fontStyle: normal
        textAlign: center
      actions:
        justifyContent: center