Ordered List Slide Designs



To reproduce any of the ordered list slide designs shown in this guide simply copy-and-paste the corresponding markdown snippet directly into the PITCHME.md for your GitPitch slide deck.

Click the small icon in the top-right corner of any markdown block below to copy the markdown snippet.

All of the markdown snippets that follow in this guide make use of GitPitch markdown list syntax. This syntax lets you activate built-in Theme Template properties and custom CSS styles on list content. Note, list item fragments are disabled by default in each of the sample markdown snippets in this guide.


Ordered List Slide Design A

Slide Templates Design

This template snippet uses the Theme Template default rendering style for ordered list content:


---

@ol[](false)
1. Lorem ipsum dolor sit amet.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
4. Nunc dignissim risus id metus.
5. Cras ornare tristique elit.
6. Vivamus vestibulum ntulla nec ante.
@olend


Ordered List Slide Design B

Slide Templates Design

This template snippets uses the following Theme Template built-in properties:

  • The list-spaced-bullets property is used to increase the vertical spacing between list items

---?color=#005f6b

@ol[list-spaced-bullets](false)
1. Lorem ipsum dolor sit amet.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
4. Nunc dignissim risus id metus.
5. Cras ornare tristique elit.
6. Vivamus vestibulum ntulla nec ante.
@olend


Ordered List Slide Design C

Slide Templates Design

This template snippets uses the following Theme Template built-in properties:

  • The list-boxed-bullets property is used to activate boxed bullet points for ordered list items

---

@ol[list-boxed-bullets](false)
1. Lorem ipsum dolor sit amet.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
4. Nunc dignissim risus id metus.
5. Cras ornare tristique elit.
6. Vivamus vestibulum ntulla nec ante.
@olend

The default color scheme for list-boxed-bullets is determined by the active Theme Template properties used by your slide deck. See the next slide design template for a demonstration of a custom color scheme.


Ordered List Slide Design D

Slide Templates Design

This template snippets uses the following Theme Template built-in properties and Custom CSS Styles:

  • The list-spaced-bullets property is used to increase the vertical spacing between list items
  • The list-boxed-bullets property is used to activate boxed bullet points for ordered list items
  • The custom-boxed-orange style is used to set a custom color scheme for boxed bullet points

---?color=black

@ol[list-spaced-bullets list-boxed-bullets custom-boxed-orange](false)
1. Lorem ipsum dolor sit amet.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
4. Nunc dignissim risus id metus.
5. Cras ornare tristique elit.
6. Vivamus vestibulum ntulla nec ante.
@olend

The Custom CSS Style custom-boxed-orange for this template snippet is defined as follows:


.custom-boxed-orange li::before {
  color: #fff;
  background-color: #E27924;
}

To activate a custom color scheme for list-boxed-bullets for your own lists, create and register a style rule that specifies any combination of color and background-color property values within the style rule.


Ordered List Slide Design E

Slide Templates Design

This template snippets uses the following Theme Template built-in properties, Custom CSS Styles, and CSS Utility Styles:

  • The list-boxed-bullets property is used to activate boxed bullet points for ordered list items
  • The custom-boxed-white style is used to set a custom color scheme for boxed bullet points
  • The text-white utility style is used to set a custom color for the list items

---?color=linear-gradient(to top left, #BE5869, #403A3E)

@ol[list-boxed-bullets custom-boxed-white text-white](false)
1. Lorem ipsum dolor sit amet.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
4. Nunc dignissim risus id metus.
5. Cras ornare tristique elit.
6. Vivamus vestibulum ntulla nec ante.
@olend

The Custom CSS Style custom-boxed-white for this template snippet is defined as follows:


.custom-boxed-white li::before {
  color: #BE5869;
  background-color: #FFF;
}

To activate a custom color scheme for list-boxed-bullets for your own lists, create and register a style rule that specifies any combination of color and background-color property values within the style rule.


Ordered List Slide Design F

Slide Templates Design

This template snippets uses the following Theme Template built-in properties:

  • The list-alpha-bullets property is used to activate upper-alpha bullet points for each list item
  • The list-spaced-bullets property is used to increase the vertical spacing between list items

---?color=#fef4a9

@ol[list-alpha-bullets list-spaced-bullets](false)
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
- Vivamus vestibulum ntulla nec ante.
@olend


Ordered List Slide Design G

Slide Templates Design

This template snippets uses the following Theme Template built-in properties:

  • The list-roman-bullets property is used to activate lower-roman bullet points for each list item

---

@ol[list-roman-bullets](false)
1. Lorem ipsum dolor sit amet.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
4. Nunc dignissim risus id metus.
5. Cras ornare tristique elit.
6. Vivamus vestibulum ntulla nec ante.
@olend


Ordered List Slide Design H

Slide Templates Design

This template snippets uses the following Theme Template built-in properties and CSS Utility Styles to improve the legibility of verbose list items on your slide:

  • The list-spaced-bullets property is used to increase the vertical spacing between list items
  • The list-boxed-bullets property is used to activate boxed bullet points for ordered list items
  • The text-08 utility style is used to set a custom font size for the list items

---

@ol[list-spaced-bullets list-boxed-bullets text-08](false)
1. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam.
2. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
3. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
@olend

To help you understand the benefits of this template look at the following side-by-side screenshots:

Slide Templates Design

The screenshot shown on the left takes advantage of this template to reduce the weight of content on the slide. In some use cases, this approach can greatly improve the legibility and overall effectiveness of the slide. The screenshot on the right shows the default rendering of this same list content.

In practice, you will need to activate a text-xx value appropriate to the specific content within your list.