HorizontalSeparationLine

Type: React component

How to get HorizontalSeparationLine?

JavaScript

import { HorizontalSeparationLine } from 'fds/components';

Renders a horizontal separator, used to distinguish content with a line from left to right.

Props

  1. colorName

    (Optional)

    Type: String

    The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.

    When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.

    The possible values can be found in the example.

    Related links

    Default value

  2. marginSizeTop

    (Optional)

    The amount of margin-top rendered by the component.

    Default value

  3. marginSizeBottom

    (Optional)

    The amount of margin-bottom rendered by the component.

    Default value

  4. size

    (Optional)

    Type: Number | String

    The width of the horizontal separation line, can be any valid CSS value for the "width" property.

    Default value