styled-card-component

The bootstrap card component created with styled-components

Usage no npm install needed!

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

README

styled-card-component

npm Travis branch Codecov branch storybook lerna

The bootstrap card component made with styled-components.

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.

Installation

Note: this component has a peer dependency on styled-components > v4. To use this component you also need to npm i styled-components -S.

npm install --save styled-card-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies

Usage

For detailed information take a look at the documentation.

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

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

License

MIT © Lukas Aichbauer