Card

<bh-card> | BharatCard

The Card component provides a flexible container for displaying content with customizable styling, images, and layouts.

Open in

BharatUI Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Get StartedMore Info

Payment successful

Thank you for your payment! Your transaction is complete

Go to home page

Basic Usage

Preview

Open in

BharatUI Card

This is a sample card component

Get StartedMore Info

HTML

<bh-card
  imgUrl="<add image url>"
  headertextcolor="#fff"
  pragraphtextcolor="#aaa">
    <h2 slot="card-title">BharatUI Card</h2>
    <p slot="card-description">This is a sample card component</p>
    <div slot="card-button">
      <bh-button size="medium" background="white" color="black" width="">Get Started</bh-button>
        <bh-button size="medium" background="black" color="white" width="">More Info</bh-button>
    </div>
  </bh-card>

React

import React from 'react';
import { BharatCard } from 'bharat-ui/react/components/card';
import { BharatButton } from 'bharat-ui/react/components/button';
function App() {
return (
      <BharatCard
      imgUrl="<add image url>"
      headertextcolor="#fff"
      pragraphtextcolor="#aaa">
        <h2 slot="card-title">BharatUI Card</h2>
        <p slot="card-description">This is a sample card component</p>
        <div slot="card-button">
          <BharatButton size="medium" background="white" color="black" width="">Get Started</BharatButton>
            <BharatButton size="medium" background="black" color="white" width="">More Info</BharatButton>
        </div>
      </BharatCard>
);
}
export default App;

Outlined Style

Preview

Open in

Outlined Card

Outlined Info

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati, iusto accusamus! Dignissimos, provident et omnis tenetur possimus, itaque veniam, excepturi nobis alias vel accusantium quam earum quidem. Veritatis, voluptas perspiciatis!

HTML

<bh-card border-radius="1rem">
<h2 slot="card-title">Outlined Card</h2>
<bh-divider slot="card-divider" variant="horizontal" width="100%" height="1px"marginTop="10px"></bh-divider>
<h4 slot="card-subtitle">Outlined Info</h4>
<p slot="card-description">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati,
</p>
</bh-card>

React

import React from 'react';
import { BharatCard } from 'bharat-ui/react/components/card';
import { BharatDivider } from 'bharat-ui/react/components/divider';
function App() {
return (
       <BharatCard border-radius="1rem">
        <h2 slot="card-title">Outlined Card</h2>
        <BharatDivider slot="card-divider" variant="horizontal" width="100%" height="1px" marginTop="10px"></BharatDivider>
        <h4 slot="card-subtitle">Outlined Info</h4>
        <p slot="card-description">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati,
        iusto accusamus! Dignissimos, provident et omnis tenetur possimus,
        itaque veniam, excepturi nobis alias vel accusantium quam earum
        quidem. Veritatis, voluptas perspiciatis!
      </p>
    </BharatCard>
);
}
export default App;

Named Slots

Slot Name	Description
card-title	Card Title Slot
card-divider	Card Divider Slot
card-subtitle	Card Subtitle Slot
cad-description	Card Description Slot
card-button	Card Button Slot

Properties

Property	Type	Description
imgUrl	string	Image url for card with image
borderRadius	string	Border Radius Styling
backgroundColor	string	Background Color Styling
headerTextColor	string	Header Text Color Styling
paragraphTextColor	string	Paragraph Text Color Styling
variant	string	Variants of card - eg.- classic