Storybook showcase

Card

Create a white container where you can add some text content, images...

When to use it ?

Please describe the use

Parameters

value between [ ] is the default one - no need to specify parameter if wanted

align: align images into the block
[ center ] - left - right
```
[ center ] - left - right
```
theme:
[ white ] - blue
```
[ white ] - blue
```
href: add a link on click
hoverAnimation: add an animation when mouse is hover

Examples

DEFAULT

Have all of your information in one place that is always up-to-date.

        
          <Card>
            <Text>
              Have all of your information in one place that is always
              up-to-date.
            </Text>
          </Card>

With blue theme

Have all of your information in one place that is always up-to-date.

        
          <Card theme="blue">
            <Text>
              Have all of your information in one place that is always
              up-to-date.
            </Text>
          </Card>

With a link on click

Have all of your information in one place that is always up-to-date.

        
          <Card href="/associations/logiciel-club-de-sport/sous-marins/">
            <Text>
              Have all of your information in one place that is always
              up-to-date.
            </Text>
          </Card>

With an hover Animation

Have all of your information in one place that is always up-to-date.

        
          <Card hoverAnimation>
            <Text>
              Have all of your information in one place that is always
              up-to-date.
            </Text>
          </Card>

Align left

        
          <Card align="left">
           <Svg src="common/icon/multicolor/donations" width="125px" />
          </Card>

Align right

        
          <Card align="right">
           <Svg src="common/icon/multicolor/donations" width="125px" />
          </Card>

A complex integration

Leader des logiciels de gestion

Vivamus dictum ut risus ac fermentum. Nullam elementum vehicula eros, et luctus justo egestas sit amet. Proin id massa ut mauris efficitur eleifend. Fusce ut ornare nibh.

Logiciel tout-en-un

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit nunc eget massa vulputate, ac lobortis lorem tristique. Nullam vitae eros enim. Vestibulum nulla lacus, gravida et ultrices eget, mollis nec urna. Duis bibendum est ut est feugiat, non ullamcorper lacus sollicitudin.

<Section background={{ color: 'clearBlue' }} alignItems="stretch">
          <Box width={1 / 2}>
            <Card hoverAnimation>
              <Svg
                src="common/icon/multicolor/sport/triathlon"
                width="125px"
                alt="Leader logiciel de gestion confédération"
              />
<SmallTitle className="pt-small">Leader des logiciels de gestion</SmallTitle>
<Text className="pt-small"
             align="center">
                Vivamus dictum ut risus ac fermentum. Nullam elementum
                vehicula eros, et luctus justo egestas sit amet. Proin id
                massa ut mauris efficitur eleifend. Fusce ut ornare nibh.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 2}>
            <Card hoverAnimation>
              <Svg
                src="common/icon/multicolor/modules-link"
                width="125px"
                alt="Logiciel tout-en-un confédération"
              />
<SmallTitle className="pt-small">Logiciel tout-en-un</SmallTitle>
<Text className="pt-small"
             align="center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nunc suscipit nunc eget massa vulputate, ac lobortis lorem
                tristique. Nullam vitae eros enim. Vestibulum nulla lacus,
                gravida et ultrices eget, mollis nec urna. Duis bibendum
                est ut est feugiat, non ullamcorper lacus sollicitudin.
              </Text>
            </Card>
          </Box>
        </Section>

        
          <Section background={{ color: 'clearBlue' }} alignItems="stretch">
          <Box width={1 / 2}>
            <Card hoverAnimation>
              <Svg
                src="common/icon/multicolor/sport/triathlon"
                width="125px"
                alt="Leader logiciel de gestion confédération"
              />
<SmallTitle className="pt-small">Leader des logiciels de gestion</SmallTitle>
<Text className="pt-small"
             align="center">
                Vivamus dictum ut risus ac fermentum. Nullam elementum
                vehicula eros, et luctus justo egestas sit amet. Proin id
                massa ut mauris efficitur eleifend. Fusce ut ornare nibh.
              </Text>
            </Card>
          </Box>
          <Box width={1 / 2}>
            <Card hoverAnimation>
              <Svg
                src="common/icon/multicolor/modules-link"
                width="125px"
                alt="Logiciel tout-en-un confédération"
              />
<SmallTitle className="pt-small">Logiciel tout-en-un</SmallTitle>
<Text className="pt-small"
             align="center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nunc suscipit nunc eget massa vulputate, ac lobortis lorem
                tristique. Nullam vitae eros enim. Vestibulum nulla lacus,
                gravida et ultrices eget, mollis nec urna. Duis bibendum
                est ut est feugiat, non ullamcorper lacus sollicitudin.
              </Text>
            </Card>
          </Box>
        </Section>