Divider

This component shows a simple horizontal line to separate different content.

Use cases:

• anywhere a horizontal rule might be useful for separating content

Example

In the example below, the two lines of content are separated by a divider.

First block of content

Second block of content

React

Declaration

<rapid-divider></rapid-divider>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-divider></rapid-divider>
  `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<Divider></Divider>

Usage

import { Divider } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  return (
    <Divider></Divider>
  );
}

Angular

Declaration

  <rapid-divider></rapid-divider>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-divider></rapid-divider>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

Attributes

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Name	Type	Description	Example
orientation	"horizontal" | "vertical"	The orientation of the divider. Default: horizontal	<rapid-divider orientation="vertical">
role	"separator" | "presentation"	Separator - The divider semantically separates content, Presentation - The divider has no semantic value and is for visual presentation only. Default: separator	<rapid-divider orientation="vertical">

Properties

This component doesn't have any properties.

Slots

This component doesn't have any slots.

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.