Vertical Card Component

The VerticalCard component is a React component designed to display vertical cards with images, titles, and descriptions. It can be used to create visually appealing content sections in your application.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing
• License

Installation

To use the VerticalCard component in your React application, follow these steps:

npm install @bolttech/frontend-foundations @bolttech/atoms-vertical-card

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-vertical-card

Once you have the required dependencies installed, you can start using the VerticalCard component in your React application.

Usage

The VerticalCard component provides an easy way to create vertical cards with images, titles, and descriptions. This can be used to showcase content in a visually appealing manner.

To use the component, import it and include it in your JSX:

import React from 'react';
import {VerticalCard} from '@bolttech/atoms-vertical-card';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // You can import your VerticalCard component here

function App() {
  const imageCard = {
    url: 'image-url.jpg',
    alt: 'Image Alt Text',
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <VerticalCard
        variant="default"
        imageCard={imageCard}
        title="Card Title"
        description="Card Description"
        dataTestId="vertical-card-section"
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The VerticalCard component accepts the following props:

| Prop | Type | Description | |---------------|------------------|--------------------------------------------------------| | variant | string | The variant style of the vertical card. | | imageCard | ImageByUrl or React.ReactElement | The image displayed in the vertical card. | | title | string | The title of the vertical card. | | description | string | The description of the vertical card. | | dataTestId | string | The data-testid attribute for testing purposes. |

The ImageByUrl type is an object with the following properties:

| Property | Type | Description | |---------------|------------------|--------------------------------------------------------| | url | string | The URL of the image. | | alt | string | The alternative text for the image. |

Example

Here's an example of using the VerticalCard component:

<VerticalCard
  variant="default"
  imageCard={{ url: 'image-url.jpg', alt: 'Image Alt Text' }}
  title="Card Title"
  description="Card Description"
  dataTestId="vertical-card-section"
/>

This will render a vertical card with an image, a title, and a description.

Contributing

Contributions to the VerticalCard component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.