Divider

A divider is a thin line that groups content in lists and containers.

Divider Types

Dividers can reinforce tapability, such as when used to separate list items or define tappable regions in an accordion. There are two types of dividers namely vertical and horizontal.

List Item

List Item

List Item

List Item

vertical

Basic dialog title

A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.

Center
format_align_left format_align_center format_align_right
format_bold format_italic format_underlined 
              
<!-- divider -->
<hr class="border-gray-200 dark:border-gray-700">

<!-- divider with text -->
<div class="flex justify-between items-center">
  <hr class="w-full border-gray-200 dark:border-gray-700">
  <div class="px-2">Center</div>
  <hr class="w-full border-gray-200 dark:border-gray-700">
</div>

<!-- vertical divider -->
<hr class="self-stretch h-auto border-r border-solid border-gray-200 dark:border-gray-700">

<!-- vertical divider with text -->
<div class="flex flex-col justify-between items-center">
  <hr class="h-full border-r border-solid border-gray-200 dark:border-gray-700">
  <div class="px-2">vertical</div>
  <hr class="h-full border-r border-solid border-gray-200 dark:border-gray-700">
</div>