ContentDivider

Description:
The ContentDivider component is a versatile divider that allows you to separate content with different styles such as lines, text, and custom components.

Usage

import React from 'react';
import ContentDivider from 'blendx-ui/ContentDivider';

const MyContentDivider = () => (
  <div>
    <ContentDivider type="line" />
    <ContentDivider type="text-divider">OR</ContentDivider>
    <ContentDivider type="text-and-line-divider">Section Title</ContentDivider>
    <ContentDivider type="solid-text-divider">Solid Divider</ContentDivider>
    <ContentDivider type="component">
      <MyCustomComponent />
    </ContentDivider>
  </div>
);

export default MyContentDivider;

Props

Prop Name Type Description Default type string Specifies the type of divider to display. line children node Content to display within the divider, if any. null className string Additional classes for the divider component. ''

Type Values

The type prop can be one of the following:

• line: A simple solid line divider.
• line-spacing: A dashed line divider with spacing.
• text-and-line-divider: A divider with text in the center, flanked by lines on both sides.
• text-divider: A text-only divider.
• solid-text-divider: A solid background with text in the center.
• component: A divider that allows custom components to be placed in the center.

Example

import React from 'react';
import ContentDivider from 'blendx-ui/ContentDivider';

const ExampleDivider = () => (
  <div>
    <ContentDivider type="line" />
    <ContentDivider type="text-and-line-divider">Continue</ContentDivider>
    <ContentDivider type="solid-text-divider">Or Else</ContentDivider>
    <ContentDivider type="component">
      <button>Click Me</button>
    </ContentDivider>
  </div>
);

export default ExampleDivider;

Dependencies

Repository	Usage Count
frontend-app-dashboard	1
frontend-app-authn	1

Detailed usage locations:

frontend-app-dashboard

• src/components/CourseExploreCard.jsx

frontend-app-authn

• src/common-components/ThirdPartyAuth.jsx