Biofarma | Bind UI

Card

Cards group information into flexible containers to let users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Rabbit

PROMOTION

11 AM - 1 PM • Start your first trip in the outlined zone.

Usage

import { Card } from 'bio-bind-ui';

<Card
  action='REMIND ME'
  heading='Rabbit'
  id='card'
  mode='light'
  paragraph='11 AM - 1 PM • Start your first trip in the outlined zone.'
  subheading='PROMOTION'
  thumbnailImage={{
    alt: 'thumbnail',
    src: 'https://picsum.photos/id/11/400/200',
  }}
  type='stacked'
  variant='elevated'
/>

Examples

Variant

Variant of the card: outline, filled, and stacked

Rabbit

PROMOTION

11 AM - 1 PM • Start your first trip in the outlined zone.

Rabbit

PROMOTION

11 AM - 1 PM • Start your first trip in the outlined zone.

Rabbit

PROMOTION

11 AM - 1 PM • Start your first trip in the outlined zone.

Type

Type of the card: stacked and horizontal

Rabbit

PROMOTION

11 AM - 1 PM • Start your first trip in the outlined zone.

Mode (Optional)

Change color mode light or dark

11 AM - 1 PM • Start your first trip in the outlined zone.

Props

Props	Required	Default	Type	description
type	false	`horizontal`	`horizontal` `stacked`	Type of the card: `stacked` and `horizontal`.
variant	false	`elevated`	`outlined` `filled` `elevated`	Variant of the card: `outline`, `filled`, and `stacked`.
id	true	`card`	`string`	ID for the card.
mode	false	`light`	`light` `dark`	Change color mode `light` or `dark`.
heading	true	`heading`	`string`	Heading of the card.
subheading	true	`subheading`	`string`	Subheading of the card.
paragraph	true	`paragraph`	`string`	Paragraph of the card.
action	true	`action`	`string`	Paragraph of the card.
thumbnailImage	true	-	`thumbnailImage`	Paragraph of the card.
header	true	-	`string`	Header of the card.
body	true	-	`string`	Body of the card.
footer	true	-	`string`	Footer of the card.
onClickAction	true	-	`() => void`	Funtion onclick action.
radius	true	`xs`	`none` `xs` `sm` `md` `lg` `xl`	For set the border radius.
style	true	-	`CSS Property`	For styling costum css.

Breadcrumbs Carousel