VerticalSeparationLine

How to get VerticalSeparationLine

import { VerticalSeparationLine } from 'fds/components';

Type: Component

Renders a vertical separator, used to distinguish content with a line from top to bottom.

Props

# Name Type Description
1. [colorName] 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.

  Default value
"vertical-separation-line-border"
  Related links
2. [marginSizeLeft] Number | String

The amount of margin-left rendered by the component.

The amount of margin rendered by the component.

This should be a either, A single size value, one of the following values:

  • 0 (zero, no margin at all)

  • 's' (small)

  • 'sm'(between small and medium)

  • 'm' (medium)

  • 'l' (large) to set the marginSize for the top, right, bottom and left side to a single shared value.

  Default value
0
3. [marginSizeRight] Number | String

The amount of margin-right rendered by the component.

The amount of margin rendered by the component.

This should be a either, A single size value, one of the following values:

  • 0 (zero, no margin at all)

  • 's' (small)

  • 'sm'(between small and medium)

  • 'm' (medium)

  • 'l' (large) to set the marginSize for the top, right, bottom and left side to a single shared value.

  Default value
0
4. [size] Number | String

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


  Default value
"auto"
Was this page helpful?