@bulma-web/card

A bulma based card webcomponent

Usage no npm install needed!

<script type="module">
  import bulmaWebCard from 'https://cdn.skypack.dev/@bulma-web/card';
</script>

README

card

bw-card is an easy customizable card with css custom properties, styling for bulma is included

Usage

installation

npm i -S @bulma-web/card
# or
yarn add -S @bulma-web/card

import '@bulma-web/card'

Example

<bw-card>
    <div slot="content">
        <h2>
            “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
        </h2>
        <p>Jeff Atwood</p>
    </div>
</bw-card>

API

Slots

slot name Description
content Content to display in card
header-title title ot be placed for card header
header-icon icon to be displayed in the outer right of the card header
image image to be added in the card
footer-item items to be placed in the footer of the card

custom css variables for customization

Variable Description Type
--card-color text color for the card color code
--card-background-color background color of the card color code
--card-shadow card shadow box shadow
--card-header-background-color background color for the card header color code
--card-header-color text color for the card header color code
--card-header-padding padding size for the card header unit size
--card-header-shadow shadow for card header nox shadow notation
--card-header-weight font weight for card header units
--card-content-background-color background color for card color code
--card-content-padding padding for card content unit size
--card-footer-background-color background color for the card footer color code
--card-footer-border-top border top of card footer cdd border shorthand notation
--card-footer-padding padding for card footer unit size
--card-media-margin margin for card media unit size