Mural's Divider package

Table of contents

1. Installation
2. Component usage
3. Divider mixin

Installation

Review the design system's global usage guidelines to learn how to install components. This package's name is @muraldevkit/ds-component-divider.

Component usage

Review individual component READMEs for available properties.

1. Divider

Divider mixin

Used to apply a separation between two elements without adding an additional element to the DOM. This is typically used for things like menus where we don't want to add the DOM elements for accessibility considerations for screen reader users. For use cases where the vertical divider is expected, review our accessibility guidance on using the component.

| Parameter | Description | Available Options | Default | | ----------| ------------| ------------------| ------- | | $max-width | Use when the divider should not span the full-width of the container, for example dividers between stacked Icon Buttons in a toolbar. | Set to any valid CSS width value. | none | | $orientation | Defines the orientation of the divider. | "horizontal" | "horizontal" |

Example:

@use "~@muraldevkit/ds-component-divider/src/styles/_mixins" as *;

.my-component {
    // Generates the default horizontal divider that spans the full width of the container
    @include mrl-divider;
}

.my-other-component {
    // Generates a separate that is only 2rems wide and centers it between the overall container's width
    @include mrl-divider($max-width: 2rem);
}