Card

Cards contain content and actions about a single subject.

Install	`yarn add @diallink-corp/convergo-react-layout`
Version	4.1.2
Usage	import {Card} from '@diallink-corp/convergo-react-layout'

Example

Cards are using the slots API to dynamically style a header, content and footer area.

<Card>
  <Header>
    <Heading>Payment details</Heading>
    <Description>
      Update your billing information. Please note that updating your location
      could affect your tax rates.
    </Description>
  </Header>
  <Content>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum.
    </Paragraph>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum.
    </Paragraph>
  </Content>
  <Footer>
    <Button>Click me</Button>
  </Footer>
</Card>

<Card>
  <Header>
    <Heading>Payment details</Heading>
    <Description>
      Update your billing information. Please note that
      updating your location could affect your tax rates.
    </Description>
  </Header>
  <Content>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore
      eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum.
    </Paragraph>
    <Paragraph>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore
      eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum.
    </Paragraph>
  </Content>
  <Footer>
    <Button>Click me</Button>
  </Footer>
</Card>

<Card>
  <Header>
    <Heading>
      Payment details
    </Heading>
    <Description>
      Update your
      billing
      information.
      Please note that
      updating your
      location could
      affect your tax
      rates.
    </Description>
  </Header>
  <Content>
    <Paragraph>
      Lorem ipsum dolor
      sit amet,
      consectetur
      adipiscing elit,
      sed do eiusmod
      tempor incididunt
      ut labore et
      dolore magna
      aliqua. Ut enim
      ad minim veniam,
      quis nostrud
      exercitation
      ullamco laboris
      nisi ut aliquip
      ex ea commodo
      consequat. Duis
      aute irure dolor
      in reprehenderit
      in voluptate
      velit esse cillum
      dolore eu fugiat
      nulla pariatur.
      Excepteur sint
      occaecat
      cupidatat non
      proident, sunt in
      culpa qui officia
      deserunt mollit
      anim id est
      laborum.
    </Paragraph>
    <Paragraph>
      Lorem ipsum dolor
      sit amet,
      consectetur
      adipiscing elit,
      sed do eiusmod
      tempor incididunt
      ut labore et
      dolore magna
      aliqua. Ut enim
      ad minim veniam,
      quis nostrud
      exercitation
      ullamco laboris
      nisi ut aliquip
      ex ea commodo
      consequat. Duis
      aute irure dolor
      in reprehenderit
      in voluptate
      velit esse cillum
      dolore eu fugiat
      nulla pariatur.
      Excepteur sint
      occaecat
      cupidatat non
      proident, sunt in
      culpa qui officia
      deserunt mollit
      anim id est
      laborum.
    </Paragraph>
  </Content>
  <Footer>
    <Button>
      Click me
    </Button>
  </Footer>
</Card>