Websites York - Template23

Template Menu

Styling Lists in Markdown

Design Notes

From Joe's Foundation demo project page - Awesome Lists.

N.B. Set List Styles in Site Styles to No bullets else you get bullets before each item as well.

To access glyphs on a Mac, position the cursor in the content area and then press control, command and the spacebar simultaneously. Thats how I got the apple.

The Fontawesome 5 icons are using the numeric equivalent as seen on the Font Awesome page.

Example 1

This 'check' item is an svg so it can be created in Logoist 5 in any colour to suit

  • Ordered and Unordered Lists.
  • Simple Links: Stacks can use Markdown Syntax too.
  • Simple formatting: Bold and Italic.
  • Code snippets: 10 PRINT "HELLO WORLD"

Example 2

This icon is a Font Awesome 5 icon using the numeric equivalent shown on the FA page.

  • Ordered and Unordered Lists.
  • Simple Links: Stacks can use Markdown Syntax too.
  • Simple formatting: Bold and Italic.
  • Code snippets: 10 PRINT "HELLO WORLD"

Example 3

This can be a glyph or any character on a mac keyboard in quotes.

  • Ordered and Unordered Lists.
  • Simple Links: Stacks can use Markdown Syntax too.
  • Simple formatting: Bold and Italic.
  • Code snippets: 10 PRINT "HELLO WORLD"

Example 4

Writing in Markdown format is a simple and fast way to add styled text to your web pages.

  • Ordered and Unordered Lists.
  • Simple Links: Stacks can use Markdown Syntax too.
  • Simple formatting: Bold and Italic.
  • Code snippets: 10 PRINT "HELLO WORLD"

Example 5

There is a page of bullets and arrows on the glyph screens (control/command/space)

This content is controlled by the CMS.

  • This is an item
  • This is another item
  • This is item three
  • This is item four

Example 6

Using a Bootsie created asterisk output as an SVG file and held in resources.

  • Ordered and Unordered Lists.
  • Simple Links: Stacks can use Markdown Syntax too.
  • Simple formatting: Bold and Italic.
  • Code snippets: 10 PRINT "HELLO WORLD"

Lighthouse Scores

Animated SVG from Loaf

Performance enhancing web design