Top Tag Line Component

The TopTagLine component is a React component designed to display a top tag line with a specific content. It can be used to provide a visually distinctive section title or label.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

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

npm install @bolttech/frontend-foundations @bolttech/atoms-top-tag-line

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-top-tag-line

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

Usage

The TopTagLine component provides a simple way to create a top tag line with a specific content. This can be useful for emphasizing a section title or label in your UI.

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

import React from 'react';
import {TopTagLine} from '@bolttech/atoms-top-tag-line';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // You can import your TopTagLine component here

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <TopTagLine content="Featured Section" dataTestId="featured-section"/>
    </BolttechThemeProvider>
  );
}

export default App;

Props

The TopTagLine component accepts the following props:

| Prop | Type | Description | |---------------|------------------|--------------------------------------------------------| | content | string | The text content to display in the top tag line. | | dataTestId | string | The data-testid attribute for testing purposes. |

Example

Here's an example of using the TopTagLine component:

<TopTagLine content="Featured Section" dataTestId="featured-section" />

This will render a top tag line with the text "Featured Section".

Contributing

Contributions to the TopTagLine 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 GitHub repository.