Card example:

<Card
  content={<div>Hello</div>}
  footer={<button>World</button>}
></Card>

<Card
  content={<div>Hello</div>}
  footer={<div>Grey footer</div>}
  greyFooter
></Card>

<Card
  header={<h1>Header</h1>}
  content={<div>Content</div>}
  footer={<div>Footer</div>}
></Card>

Inside

const linksForLeftSection = [{
  label: 'Terms and Conditions',
  to: 'https://doodle.com/terms-of-service' 
},{
  label: 'Imprint',
  to: 'https://doodle.com/imprint'
},{
  label: 'Privacy',
  to: 'https://doodle.com/privacy-policy'
}];

<Page>
  <Pattern>
    <Header
      left={[
        <Link to="/" title="Doodle" variant="white"><DoodleLogo /></Link>,
        <Link to="/pricing" title="Pricing" variant="white">Pricing</Link>,
      ]}
      right={[
        <Link to="/account" title="Account" variant="white"><UserAvatar name="Account" /></Link>,
      ]}>
    </Header>
    <Section>
      <Card content={
        <div style={{minHeight: '50vh', height: '50vh', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#c5cdd3'}}>
          <LoadingIcon />
        </div>
      }>
      </Card>
    </Section>
  </Pattern>
  <Footer links={linksForLeftSection}/>
</Page>