Skip to main content

Cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae auctor mauris, eu hendrerit enim. Duis quis venenatis turpis. Cras condimentum, nisi id dictum eleifend, ligula ligula facilisis mauris, id tempus dui ante vitae metus. Etiam dignissim ipsum sed mauris facilisis cursus. Sed sed mauris massa. Donec tincidunt lobortis est, eget varius quam vestibulum vel.

Inner cards#

Whenever a Card is inside of another Card, then the inside Card should be an inner Card, which can be toggled via the inner optional boolean property on the Card component.

import { Box, Card, Text } from '@springtree/eva-suite-ui';
const Example = (  <Card>    <Box>      <Box p={0} mb="20px">        <Card inner>          <Box>            <Text>              Lorem ipsum dolor sit amet, consectetur adipiscing elit.              Duis vitae auctor mauris, eu hendrerit enim.              Duis quis venenatis turpis.              Cras condimentum, nisi id dictum eleifend,              ligula ligula facilisis mauris.            </Text>          </Box>        </Card>      </Box>      <Box p={0} mb="20px">        <Card inner>          <Box>            <Text>              Lorem ipsum dolor sit amet, consectetur adipiscing elit.              Duis vitae auctor mauris, eu hendrerit enim.              Duis quis venenatis turpis.              Cras condimentum, nisi id dictum eleifend,              ligula ligula facilisis mauris.            </Text>          </Box>        </Card>      </Box>      <Box p={0} mb="20px">        <Card inner>          <Box>            <Text>              Lorem ipsum dolor sit amet, consectetur adipiscing elit.              Duis vitae auctor mauris, eu hendrerit enim.              Duis quis venenatis turpis.              Cras condimentum, nisi id dictum eleifend,              ligula ligula facilisis mauris.            </Text>          </Box>        </Card>      </Box>    </Box>  </Card>);

Card headers#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae auctor mauris, eu hendrerit enim. Duis quis venenatis turpis. Cras condimentum, nisi id dictum eleifend, ligula ligula facilisis mauris, id tempus dui ante vitae metus. Etiam dignissim ipsum sed mauris facilisis cursus. Sed sed mauris massa. Donec tincidunt lobortis est, eget varius quam vestibulum vel.