Lists and Tables

Organized lists and structured tables with consistent styling and proper spacing.

Lists and tables are essential for organizing information in a structured, scannable format. Nuxt UI provides enhanced styling for all list types and responsive tables that maintain readability across all devices.

Lists

Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.

Unordered Lists (ul)

Use unordered lists for items without a specific sequence. Start each item with a - symbol.

  • I'm a list item.
  • I'm another list item.
  • I'm the last list item.
- I'm a list item.
- I'm another list item.
- I'm the last list item.

Ordered Lists (ol)

Use ordered lists when item order matters, like steps in a process. Start each item with a number.

  1. I'm a list item.
  2. I'm another list item.
  3. I'm the last list item.
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.

Nested Lists

Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.

  • I'm a list item.
    • I'm a nested list item.
    • I'm another nested list item.
  • I'm another list item.
    • Another nested item
      • Deep nested item
      • Another deep nested item
    • Back to second level
- I'm a list item.
  - I'm a nested list item.
  - I'm another nested list item.
- I'm another list item.
  - Another nested item
    - Deep nested item
    - Another deep nested item
  - Back to second level

Mixed Lists

You can combine ordered and unordered lists for complex hierarchies.

  1. First major step
    • Sub-requirement A
    • Sub-requirement B
  2. Second major step
    • Another sub-item
    • Final sub-item
  3. Final step
1. First major step
   - Sub-requirement A
   - Sub-requirement B
2. Second major step
   - Another sub-item
   - Final sub-item
3. Final step

Tables

Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.

Basic Tables

PropDefaultType
namestring
sizemdstring
colorneutralstring
| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |