```
const { Card, Icon, SectionTitle, SectionBody, Banner, SectionFooter, Section } = Cards;
  <Cards horizontal>
    <Card colorVariant="white" size="sm" withoutBorder>
      <Banner
        type="image"
        ratio={1.5}
        src="https://partners.sigfox.com/assets/media-for/562e4f44cfe5648925fe5abd"
        flexContainer
      >
        <TextIcon name="device" size="sm">Device</TextIcon>
      </Banner>
      <Section>
        <SectionTitle level={4} withoutMargeTop>SMILIO connected buttons, 4 smileys</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
        <SectionFooter left separator>Made by: Skiplynazy</SectionFooter>
      </Section>
    </Card>
    <Card colorVariant="white" size="sm" withoutBorder>
      <Banner
        type="image"
        ratio={1.5}
        src="https://partners.sigfox.com/assets/media-for/562e4f44cfe5648925fe5abd"
        flexContainer
        cover
      >
        <TextIcon name="device" size="sm">Device</TextIcon>
      </Banner>
      <Section>
        <SectionTitle level={4} withoutMargeTop>SMILIO connected buttons, 4 smileys</SectionTitle>
        <SectionBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non
          dignissim sit amet. Ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus dolor ipsum, auctor non sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non
          dignissim sit amet. Ipsum dolor sit amet, consectetur adipiscing elit.
        </SectionBody>
        <SectionFooter left separator>Made by: Skiplynazy</SectionFooter>
      </Section>
    </Card>
    <Card colorVariant="white" size="sm" withoutBorder>
      <Banner
        type="image"
        ratio={1.5}
        src="https://partners.sigfox.com/assets/media-for/562e4f44cfe5648925fe5abd"
        cover
      >
        <TextIcon name="device" size="sm">Device</TextIcon>
      </Banner>
      <Section>
        <SectionTitle level={4} withoutMargeTop>SMILIO connected buttons, 4 smileys</SectionTitle>
        <SectionBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non
          dignissim sit amet. Ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus dolor ipsum, auctor non sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non
          dignissim sit amet. Ipsum dolor sit amet, consectetur adipiscing elit.
        </SectionBody>
        <SectionFooter left separator>Made by: Skiplynazy</SectionFooter>
      </Section>
    </Card>
    <Card colorVariant="white" size="sm" withoutBorder>
      <Banner
        type="image"
        ratio={1.5}
        src="https://partners.sigfox.com/assets/medias/iyebj5v7.jpeg"
      />
      <Section>
        <SectionTitle level={4} withoutMargeTop>SMILIO connected buttons, 4 smileys</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
      </Section>
    </Card>
    <Card colorVariant="white" size="md" withoutBorder>
      <Banner
        type="image"
        ratio={1.5}
        src="https://partners.sigfox.com/assets/medias/iyebj5v7.jpeg"
      />
      <Section>
        <SectionTitle level={4} withoutMargeTop>SMILIO connected buttons, 4 smileys</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
      </Section>
    </Card>
    <Card colorVariant="white" size="lg" withoutBorder>
      <Banner
        type="image"
        ratio={1.5}
        src="https://partners.sigfox.com/assets/medias/iyebj5v7.jpeg"
      />
      <Section>
        <SectionTitle level={4}>SMILIO connected buttons, 4 smileys</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
      </Section>
    </Card>
  </Cards>
```

```
const { Card, Icon, SectionTitle, SectionBody, Banner, SectionFooter, Section } = Cards;
<div>
  <p>Items per row auto (max 4) : result 2</p>
  <Cards>
    <Card>
      <Icon src="/pic-pig.svg"/>
      <Section>
        <SectionTitle center>Lorem ipsum dolor</SectionTitle>
        <SectionBody src="/pic-pig.svg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et.
        </SectionBody>
        <SectionFooter>
          Lorem ipsum dolor sit amet Lorem ipsum dolor sit.
        </SectionFooter>
      </Section>
    </Card>
    <Card colorVariant="white">
      <Banner src="http://media.rtl.fr/cache/rGFoG3N32J0OTqKOhyjU8Q/880v587-0/online/image/2017/0412/7788094382_un-ecureuil-curieux-plonge-sa-tete-dans-une-fleur.jpg" ratio={4 / 3} />
      <Section>
        <SectionTitle center>Consectetur adipiscing elit</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et. Sed sit amet metus elit. Cras quis ullamcorper dolor, vel congue justo. Morbi consectetur orci non leo congue, ut tincidunt arcu dapibus.
        </SectionBody>
        <SectionFooter>
          2 weeks 1 day
        </SectionFooter>
      </Section>
    </Card>
  </Cards>
</div>
```

```
const { Card, Icon, SectionTitle, SectionBody, Banner, SectionFooter, Section } = Cards;
<div>
  <p>Items per row auto (max 4) : result 4</p>
  <Cards>
    <Card>
      <Icon src="/pic-battery.svg"/>
      <Section>
        <SectionTitle center>Lorem ipsum dolor</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
      </Section>
    </Card>
    <Card colorVariant="white">
      <Icon src="/pic-pig.svg"/>
      <Section>
        <SectionTitle center>Proin sit amet facilisis</SectionTitle>
        <SectionBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl
        </SectionBody>
      </Section>
    </Card>
    <Card>
      <Banner src="https://www.chassimages.com/mag/wp-content/uploads/2017/03/ImageJour2903.jpg" ratio={4 / 3}/>
      <Section>
        <SectionTitle center>Lorem ipsum dolor</SectionTitle>
        <SectionBody>dignissim sit amet, euismod in neque. Proin sit amet facilisis odio</SectionBody>
        <SectionFooter>consectetur adipiscing elit</SectionFooter>
      </Section>
    </Card>
    <Card>
      <Icon src="/pic-battery.svg"/>
      <Section>
        <SectionTitle center>Lorem ipsum dolor</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
      </Section>
    </Card>
  </Cards>
</div>
```

```
const { Card, Icon, SectionTitle, SectionBody, Banner, SectionFooter, Section } = Cards;
<div>
  <Cards horizontal>
    <Card colorVariant="white" size="lg">
      <Banner
        type="image"
        src="http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-autruche.jpg"
        cover
        flexContainer
      />
      <Section>
        <SectionTitle>LOREM IPSUM DOLOR</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
      </Section>
      <Section>
        <SectionTitle>LOREM IPSUM DOLOR</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
      </Section>
    </Card>
    <Card size="lg">
      <Banner
        ratio={4 / 3}
        type="image"
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiClD4gHJhCmAW-Kjz6XnTUooJW44moQ9sTondD2J9IvCPH8yNeQ"
        cover
        flexContainer
      />
      <Section>
        <SectionTitle center>LOREM IPSUM DOLOR</SectionTitle>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit. consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet</SectionBody>
        <SectionFooter><TextIcon name="doc" size="sm">1 month 1 week</TextIcon></SectionFooter>
      </Section>
    </Card>
  </Cards>
</div>
```

```
const { Card, Icon, SectionTitle, SectionBody, Banner, SectionFooter, Section } = Cards;
<div>
  <Cards itemsPerRow={3}>
    <Card title="hello" icon="/pic-battery.svg">
      <Icon src="/pic-pig.svg"/>
      <Section>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
      </Section>
    </Card>
    <Card title="hello world" icon="/pic-pig.svg">
      <Icon src="/pic-battery.svg"/>
      <Section>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
      </Section>
    </Card>
    <Card title="hello le monde" icon="/pic-pig.svg">
      <Icon src="/pic-pig.svg"/>
      <Section>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et.</SectionBody>
      </Section>
    </Card>
    <Card title="hello le monde" icon="/pic-pig.svg">
      <Icon src="/pic-battery.svg"/>
      <Section>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
      </Section>
    </Card>
    <Card title="hello world" icon="/pic-pig.svg">
      <Icon src="/pic-pig.svg"/>
      <Section>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl,</SectionBody>
      </Section>
    </Card>
    <Card title="hello le monde" icon="/pic-pig.svg">
      <Icon src="/pic-battery.svg"/>
      <Section>
        <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl, ac efficitur metus eleifend et.</SectionBody>
      </Section>
    </Card>
  </Cards>
</div>
```

```
const { Card, Icon, SectionTitle, SectionBody, Banner, SectionFooter, Section } = Cards;
const CustomCard1 = () => (
 <Card title="hello" itemsPerRow={3} icon="/pic-battery.svg">
   <Icon src="/pic-pig.svg"/>
   <Section>
     <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
   </Section>
 </Card>
);
const CustomCard2 = () => (
  <Card title="hello world" itemsPerRow={3} icon="/pic-pig.svg">
    <Icon src="/pic-battery.svg"/>
    <Section>
      <SectionBody>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dolor ipsum, auctor non dignissim sit amet, euismod in neque. Proin sit amet facilisis odio, auctor condimentum est. Sed malesuada ipsum nisl</SectionBody>
    </Section>
  </Card>
 );
<div>
  <p>Custom children</p>
  <Cards>
    <CustomCard1 />
    <CustomCard2 />
    <CustomCard1 />
    <CustomCard2 />
    <CustomCard1 />
    <CustomCard2 />
  </Cards>
</div>
```