Divider

The v-divider component is used to separate sections of lists.

Usage

Full bleed dividers extend the entire content width.


API

v-divider
Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
inset
Default
false
Type
boolean

Adds indentation (72px) for normal dividers, reduces max height for vertical.

Name
light
Default
false
Type
boolean

Applies the light theme variant

New in — v1.1
Name
vertical
Default
false
Type
boolean

Creates a vertical divider

Examples

Light and dark

Dividers have light and dark variants.


Inset dividers

Inset dividers are moved 72px to the right. This will cause them to line up with list items.


Subheaders and dividers

Subheaders can be lined up with inset dividers by using the same prop.


List dividers

Inset dividers and subheaders can help break up content


Dividers in Portrait View

Create custom cards to fit any use-case


Vertical dividersNew in v1.1

Vertical dividers give you even more tools for unique layouts.