@arnat/styled-card

The bootstrap card component created with styled-components

Usage no npm install needed!

<script type="module">
  import arnatStyledCard from 'https://cdn.skypack.dev/@arnat/styled-card';
</script>

README

styled-card-component

npm Travis branch Codecov branch storybook lerna

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import {
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  CardImageHeader,
  CardText,
  CardTitle,
} from '@arnat/styled-card';

const MyCardWithImageHeaderComponent = props => (
  <Card>
    <CardImageHeader src="my/image/source.jpg" />
    <CardBody>
      <CardText>Card Text</CardText>
      <CardFooter>Card Footer</CardFooter>
    </CardBody>
  </Card>
);

Properties

Properties which can be added to the component to change the visual appearance.

  • noRadius only on Card, CardHeader, CardImageHeader, CardFooter Type: boolean
  • h1 only on CardTitle Type: boolean
  • h2 only on CardTitle Type: boolean
  • h3 only on CardTitle Type: boolean
  • h4 only on CardTitle Type: boolean
  • h5 only on CardTitle Type: boolean
  • h6 only on CardTitle Type: boolean