Ctrlk
Buy LicenseDownload Trial
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Styling Lists

Adding styling for lists (ul and ol) in Elements CMS

If you’re using lists in your Markdown documents, it’s worth adding some styling. You can either apply Tailwind classes directly to your Typography component, or add a small block of custom CSS to your project template.

Here are some example Tailwind classes you can drop into the Typography CSS Classes field:

[&_ul]:list-disc
[&_ul]:pl-4
[&_ul]:mt-3
[&_ul]:mb-3
[&_ul_li]:my-1
[&_ul_li]:marker:text-gray-500

Or:

For ordered lists:

And if you want tighter spacing:

Alternatively you can add the following vanilla CSS to your project template’s <head> section, but we highly recommend using Tailwind.

Styling links in lists

Tailwind’s arbitrary variants let you chain selectors togther, the following is an example of styling an ordered list containing links.

That [&_ol_li_a] selector is doing:

  • _ol → the ordered list

  • _li → list items inside it

  • _a → links inside the list items

If you want hover styles as well:

Or if you want something a bit more refined:

PreviousFrontmatterNextEmbedding Media

Last updated

Was this helpful?