Unordered List Slide Designs



To reproduce any of the unordered 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.


Unordered List Slide Design A

Slide Templates Design

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


---

@ul[](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.
@ulend


Unordered 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

@ul[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.
@ulend


Unordered List Slide Design C

Slide Templates Design

This template snippets uses the Theme Template default rendering style for unordered lists with nested items:


---?color=#fef4a9

@ul[](false)
- Lorem ipsum dolor sit amet.
    - Aliquam tincidunt mauris eu risus.
    - Vestibulum auctor dapibus neque.
- Cras ornare tristique elit.
    - Vivamus vestibulum ntulla nec ante.
    - Praesent placerat risus quis eros.
- Integer vitae libero ac risus egestas.
@ulend


Unordered List Slide Design D

Slide Templates Design

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

  • The list-circle-bullets property is used to activate circle bullet points for each list item
  • The list-spaced-bullets property is used to increase the vertical spacing between list items
  • The text-white utility style is used to set a custom color for the list items

---?color=linear-gradient(to bottom, #06beb6, #48b1bf)

@ul[list-circle-bullets list-spaced-bullets text-white](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.
@ulend


Unordered List Slide Design E

Slide Templates Design

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

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

---

@ul[list-square-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.
@ulend


Unordered List Slide Design F

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 text-08 utility style is used to set a custom font size for the list items

---?color=#005f6b

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

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.