@bolttech/molecules-card v0.2.0

Card Component

The Card component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component

Installation

To use the Card component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-card

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-card

Usage

You can utilize the Card component by importing it and including it in your JSX. Here's an example:

import React, { useState } from 'react';
import { Card } from '@bolttech/molecules-card';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // Adjust the path to your component

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Card disabled={true}>
        <div>Are you sure you want to proceed?</div>
      </Card>
      <Card selected={true}>
        <div>Are you sure you want to proceed?</div>
      </Card>
      <Card>
        <div>Are you sure you want to proceed?</div>
      </Card>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Card component accepts the following props:

Contributions

Contributions to the Card component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.