List

Retype includes broad support for creating lists of items, including unordered, ordered, and description lists.

Unordered lists

Unordered list variations include:

1. - for bullet
2. - [x] for checked item
3. - [ ] for unchecked item

Bullet

- Item 1
- Item 2
- Item 3

• Item 1
• Item 2
• Item 3

Task list

- [x] Item 1
- [x] Item 2
- [ ] Item 3

• Item 1
• Item 2
• Item 3

Icon list

By applying the following {.list-icon} generic attribute, you can convert a bullet list into an icon list.

{.list-icon}
- :icon-check-circle: Item 1
    - :icon-check-circle: This is sub-item 1.1
    - :icon-alert: This is sub-item 1.2
    - :icon-circle-slash: This is sub-item 1.3
- :icon-check-circle: Item 2
    - :icon-check-circle: This is sub-item 2.1
    - :icon-check-circle: This is sub-item 2.2
    - :icon-alert: This is sub-item 2.3
    - :icon-circle-slash: This is sub-item 2.4

• Item 1
  • This is sub-item 1.1
  • This is sub-item 1.2
  • This is sub-item 1.3
• Item 2
  • This is sub-item 2.1
  • This is sub-item 2.2
  • This is sub-item 2.3
  • This is sub-item 2.4

Without the {.list-icon} css class applied, the above sample would render as:

• Item 1
  • This is sub-item 1.1
  • This is sub-item 1.2
  • This is sub-item 1.3
• Item 2
  • This is sub-item 2.1
  • This is sub-item 2.2
  • This is sub-item 2.3
  • This is sub-item 2.4

Ordered lists

Ordered list variations include:

1. 1. for numbers (default)
2. a. for lowercase letters
3. A. for uppercase letters
4. i. for lowercase Roman numerals
5. I. for uppercase Roman numerals

Numbers

1. Item 1
2. Item 2
3. Item 3

1. Item 1
2. Item 2
3. Item 3

Lowercase letters

a. Item 1
b. Item 2
c. Item 3

1. Item 1
2. Item 2
3. Item 3

Uppercase letters

A. Item 1
B. Item 2
C. Item 3

1. Item 1
2. Item 2
3. Item 3

Lowercase Roman numerals

i. Item 1
ii. Item 2
iii. Item 3

1. Item 1
2. Item 2
3. Item 3

Uppercase Roman numerals

I. Item 1
II. Item 2
III. Item 3

1. Item 1
2. Item 2
3. Item 3

Description List

A Description List (<dl>) is a way to display Terms (<dt>) along with their corresponding Details (<dd>).

The Description List is commonly used to create a glossary or dictionary where you have a word and its meaning listed together.

Basic list

Term 1
: Detail 1

Term 2
: Detail 2

Term 3
: Detail 3

Term 1

Detail 1

Term 2

Detail 2

Term 3

Detail 3

Include nested components

Term 1
: Detail 1
  With a paragraph
  > This is a block quote

  - Nested item 1
  - Nested item 2

Term 2
: Detail 2
  This is a paragraph continuing the details.

  > This is a blockquote inside the details.

Term 3
: Detail 3

Term 1

Detail 1 With a paragraph

This is a block quote

• Nested item 1
• Nested item 2

Term 2

Detail 2 This is a paragraph continuing the details.

This is a blockquote inside the details.

Tight vs Loose Lists

Markdown supports two types of list formatting: tight and loose lists. The difference between them is determined by whether list items are separated by blank lines or not.

Tight Lists

Tight lists have no blank lines between list items. They are more compact and are useful for simple, concise lists.

- First item
- Second item
    - Nested item 1
    - Nested item 2
- Third item

Here's what the above tight list will be created as in the generated website:

• First item
• Second item
  • Nested item 1
  • Nested item 2
• Third item

Loose Lists

Loose lists have blank lines between list items. They are useful when list items contain multiple paragraphs or complex content.

- First item with multiple paragraphs.

  This is a second paragraph in the first item.

- Second item with nested content.

    - Nested item 1
    
    - Nested item 2

- Third item with a blockquote.

  > This is a blockquote inside a list item.

Here's what the above loose list will be created as in the generated website:

• First item with multiple paragraphs.

  This is a second paragraph in the first item.

• Second item with nested content.

  • Nested item 1

  • Nested item 2

• Third item with a blockquote.

  This is a blockquote inside a list item.

Generic Attributes

Generic attributes can be applied to list items to customize their appearance, add an id or any other custom attributes.

To add a custom CSS class, add the generic attribute syntax {.class-name} to the end of a list item.

Custom Marker Colors

You can customize the color of list item markers using CSS and generic attributes:

<style>
li.item-green::marker {
    color: green;
}

li.item-yellow::marker {
    color: yellow;
}

li.item-red::marker {
    color: red;
}
</style>

- Item 1 (green) {.item-green}
- Item 2 (yellow) {.item-yellow}
- Item 3 (red) {.item-red}

• Item 1 (green)
• Item 2 (yellow)
• Item 3 (red)

Custom Text Colors

You can also apply a custom color to a list item:

<style>
.item-orange {
    color: orange;
}
</style>

- Item 1
- Item 2 (orange) {.item-orange}
- Item 3

• Item 1
• Item 2 (orange)
• Item 3

Custom id

A custom id can be added to the list item by appending the {#id-name} generic attribute syntax:

- Regular item
- Item with custom ID {#custom-id}
- Another regular item

The above will create one list item with the custom id attribute:

<li>Regular item</li>
<li id="custom-id">Item with custom ID </li>
<li>Another regular item</li>