@bdt-component-library/card

Card component

Usage no npm install needed!

<script type="module">
  import bdtComponentLibraryCard from 'https://cdn.skypack.dev/@bdt-component-library/card';
</script>

README

Card Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of cards.

API

prop type required default explanation
variant enum("horizontal", "vertical") no "vertical" Determines the card layout style
featuredImage string no no Optional src for a card image
featuredImageDescription string no "Preview" alt text for optional image src
imageVariant enum("cover", "contain") no "contain" Determines the shape property for the image with respect to its container ("cover" and "contain" act as the css object-fill properties of the same name)
title string no no Card title text
text string no no Card main body text
button boolean no undefined Determines if the card contains a button
buttonText string no no Text for the optional card button