homepage

Brown Markup Library

Red Dot List

A styled UL with brand colored red dots

Rendered Component

  • one item
  • cat item
  • garden item

HTML

<ul class="red_dot_list">
    <li class="red_dot_list_item">one item</li>
    <li class="red_dot_list_item">cat item</li>
    <li class="red_dot_list_item">garden item</li>
</ul>

CSS

.red_dot_list {
    list-style: none;
}
.red_dot_list_item {
    margin: 10px 0;
}
.red_dot_list_item:before {
    width: 7px;
    height: 7px;
    background: #C00404;
    border-radius: 50%;
    content: "";
    display: block;
    float: left;
    margin: 9px 0 0 -20px;
}

Example from the Brown React Component Library

Brown React Component Library Code