Skip to content

Latest commit

 

History

History
229 lines (170 loc) · 4.54 KB

list.md

File metadata and controls

229 lines (170 loc) · 4.54 KB
icon tags
list-unordered
component

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

{.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

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

  • :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

!!! Additional techniques for creating icon and emoji lists are outlined in issues #603 and #370. !!!

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

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

Uppercase letters

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

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

!!! Uppercase letter ordered lists are not broadly supported across all web browsers, so the above sample might render as a lowercase letter list for you. Hopefully, support within the web browsers will improve over time. !!!

Lowercase Roman numerals

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

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

Uppercase Roman numerals

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

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

!!! Uppercase Roman numeral ordered lists are not broadly supported across all web browsers, so the above sample might render as a lowercase Roman numeral list for you. Hopefully, support within the web browsers will improve over time. !!!

Description List

A Description List is a way to display terms along with their corresponding definitions or descriptions.

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
:   Definition 1

Term 2
:   Definition 2

Term 3
:   Definition 3

Term 1 : Definition 1

Term 2 : Definition 2

Term 3 : Definition 3

Include Markdown

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

    - Nested item 1
    - Nested item 2

Term 2
:   Definition 2
    This is a paragraph continuing the definition.

    > This is a blockquote inside the definition.

Term 3
:   Definition 3

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

- Nested item 1
- Nested item 2

Term 2 : Definition 2 This is a paragraph continuing the definition.

> This is a blockquote inside the definition.