ACV Divider

Used to group content in horizontal or vertical lists, and also serves as a visual separator between logical blocks within the interface.

Figma mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=123-8541&m=dev

Basic usage

Some content to fill

Some content to fill

Some content to fill

Source code

<script setup>
  import AcvDivider from '@/components/divider/divider.vue';
</script>

<template>
  <p>Some content to fill</p>
  <AcvDivider />
  <p>Some content to fill</p>
  <AcvDivider />
  <p>Some content to fill</p>
</template>

On backgrounds

First row

Second row

First column

Lorem ipsum dolor sit amet, consectetur adipisicing elit and do it. Autem commodi deleniti dolorem dolorum eligendi

Second column

Lorem ipsum dolor sit amet, consectetur adipisicing elit and do it. Autem commodi deleniti dolorem dolorum eligendi

Vertical small

Source code

<script setup>
  import AcvDivider from '@/components/divider/divider.vue';
</script>

<template>
  <div>
    <div class="acv-bg-primary">
      <h3>First row</h3>
      <AcvDivider />
      <h3>Second row</h3>
    </div>
    <div
      class="my-16 acv-grid-row acv-grid--cols-3 acv-bg-primary place-items-center"
    >
      <div>
        <h3>First column</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit and do it. Autem commodi deleniti dolorem dolorum eligendi</p>
      </div>

      <AcvDivider
        class="mr-16"
        vertical
      />
      <div>
        <h3>Second column</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit and do it. Autem commodi deleniti dolorem dolorum eligendi</p>
      </div>
    </div>
    <div
      class="acv-bg-primary"
    >
      <span>Vertical small</span>

      <AcvDivider :vertical="24" />

      <AcvDivider :vertical="48" />

      <AcvDivider :vertical="64" />

      <AcvDivider :vertical="72" />

      <AcvDivider :vertical="96" />
    </div>
  </div>
</template>

Accessibility

Separators must be ignored by the screenreader. To achieve this, use aria-hidden="true" attribute.

It must provide role=separator that indicates the element is a divider that separates and distinguishes sections of content or groups of elements.

Optionally, you can provide aria-orientation attribute to describe the separator direction.

Props

Prop name	Description	Type	Values	Default
vertical	Orientation and height of the Divider	boolean | number	-
textPosition	Position of the text in the Divider	AcvDividerTextPosition	-
margin	Margin of the Divider	string | number	-
color	Color of the Divider	ColorBrand | ColorStatus	'primary', 'secondary', 'neutral', 'success', 'warning', 'danger', 'info'	'brand'

Slots

Name	Description	Bindings
default