Skip to content

Use alert / notification and/or unordered list styles instead of hard line breaks in ordered lists

The hard line breaks inside of ordered lists do not scale well.

See:

Screen_Shot_2018-03-28_at_13.51.35

We could use alerts and/or badges to better differentiate this content from the ordered list item above.

What to do

Create an .alert style based off the Bootstrap styles.

Create two modifications on the alert:

A .warning styles for "Note" sections with the following styles:

color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;

An .info styles for "Tip" sections with the following styles:

color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
Edited by Ire Aderinokun