homepage

Brown Markup Library

Red Number List

A styled OL with brand colored red numbers

Rendered Component

  1. one item
  2. cat item
  3. garden item

HTML

<ol class="red_number_list">
    <li class="red_number_list_item">one item</li>
    <li class="red_number_list_item">cat item</li>
    <li class="red_number_list_item">garden item</li>
</ol>

CSS

.red_number_list {
    list-style: none;
    counter-reset: list;
}
.red_number_list_item {
    counter-increment: list;
}
.red_number_list_item:before {
    font-weight: 700;
    color: #C00404;
    content: counter(list) ". ";
    float: left;
    margin: 0 0 0 -20px;
}

Example from the Brown React Component Library

Brown React Component Library Code