Storybook showcase

Section

A section is one of the main element of the showcase Layout.

Important!

Section have to contains Box components inside


          <Section> 
              <Box width={1/2}>...</Box>
              <Box width={1/2}>...</Box> 
          </Section>

When to use it ?

Please describe the use

Parameters

background: block is a parameter to modify right border style
{ color: 'extraLightGrey', block: '' }
```
{ color: 'extraLightGrey', block: '' }
```
alignItems: controls the alignment of items on the Cross Axis inside the section (vertical align)
[ center ] - start - end
```
[ center ] - start - end
```
withGradient: add a gradient background (only available with background={{ color: 'light-blue' }}background={{ color: 'light-blue' }}
reverseOnMobile: reverse order of the elements on mobile
<Section reverseOnMobile>
```
<Section reverseOnMobile>
```

Examples

DEFAULT

This is a section

        
          <Section>
          This is a section
        </Section>

With blue background

This is a blue section

        
          <Section background={{ color: 'blue' }}>
          This is a blue section
        </Section>

With a right block style. IMPORTANT! If you want to use block style, don't setup "color" property

This is a right block section

        
          <Section background={{ color: '', block: 'right' }}>
          This is a blue section
        </Section>

With an alignItems set to "start" (vertical align top)

Centralize all of the information on your players, coaches, volunteers, and parents in one place.

Membership management is made easy with Springly’s tennis club management software. Offer online memberships, payment tracking, and automatic follow-up with each member. Create member drives in 2-minutes or less and personalize them for each age group and skill level.

Membership management is made easy with Springly’s tennis club management software. Offer online memberships, payment tracking, and automatic follow-up with each member.

<Section alignItems="start">
          <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Centralize all of the information on your players,
                  coaches, volunteers, and parents in one place.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member. Create member drives in 2-minutes or less and
                  personalize them for each age group and skill level.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member.
                </Text>
              </Card>
            </Box>
          </Section>

        
          <Section alignItems="start">
          <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Centralize all of the information on your players,
                  coaches, volunteers, and parents in one place.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member. Create member drives in 2-minutes or less and
                  personalize them for each age group and skill level.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member.
                </Text>
              </Card>
            </Box>
          </Section>

With an alignItems set to "end" (vertical align bottom)

Centralize all of the information on your players, coaches, volunteers, and parents in one place.

Membership management is made easy with Springly’s tennis club management software. Offer online memberships, payment tracking, and automatic follow-up with each member.

<Section alignItems="end">
          <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Centralize all of the information on your players,
                  coaches, volunteers, and parents in one place.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member. Create member drives in 2-minutes or less and
                  personalize them for each age group and skill level.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member. 
                </Text>
              </Card>
            </Box>
          </Section>

        
          <Section alignItems="end">
          <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Centralize all of the information on your players,
                  coaches, volunteers, and parents in one place.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member. Create member drives in 2-minutes or less and
                  personalize them for each age group and skill level.
                </Text>
              </Card>
            </Box>
            <Box width={1 / 3}>
              <Card>
                <Text align="center">
                  Membership management is made easy with Springly’s tennis
                  club management software. Offer online memberships,
                  payment tracking, and automatic follow-up with each
                  member. 
                </Text>
              </Card>
            </Box>
          </Section>

With an alignItems set to "stretch" (blocks containers inside section use full height)

Centralize all of the information on your players, coaches, volunteers, and parents in one place.

Membership management is made easy with Springly’s tennis club management software. Offer online memberships, payment tracking, and automatic follow-up with each member.

<Section alignItems="stretch">
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Centralize all of the information on your players,
                coaches, volunteers, and parents in one place.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member. Create member drives in 2-minutes or less and
                personalize them for each age group and skill level.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member.
              </Text>
            </Card>
          </Box>
        </Section>

        
          <Section alignItems="stretch">
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Centralize all of the information on your players,
                coaches, volunteers, and parents in one place.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member. Create member drives in 2-minutes or less and
                personalize them for each age group and skill level.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member.
              </Text>
            </Card>
          </Box>
        </Section>

With gradient background

Centralize all of the information on your players, coaches, volunteers, and parents in one place.

Membership management is made easy with Springly’s tennis club management software. Offer online memberships, payment tracking, and automatic follow-up with each member.

<Section background={{ color: 'light-blue' }} withGradient>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Centralize all of the information on your players,
                coaches, volunteers, and parents in one place.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member. Create member drives in 2-minutes or less and
                personalize them for each age group and skill level.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member.
              </Text>
            </Card>
          </Box>
        </Section>

        
          <Section background={{ color: 'light-blue' }} withGradient>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Centralize all of the information on your players,
                coaches, volunteers, and parents in one place.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member. Create member drives in 2-minutes or less and
                personalize them for each age group and skill level.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 3}>
            <Card>
              <Text align="center">
                Membership management is made easy with Springly’s tennis
                club management software. Offer online memberships,
                payment tracking, and automatic follow-up with each
                member.
              </Text>
            </Card>
          </Box>
        </Section>