dxw style

Lists 

<div class="grid-container">
    <div class="column-two-thirds">
        <h5 class="h5">Bulleted list</h5>
        <ul class="list list-bullet">
            <li>Have you called or emailed to say payment is now overdue?</li>
            <li>Have you reminded the company that you can charge interest?</li>
            <li>Have you let them know you will take further action?</li>
        </ul>

        <h5 class="h5">Numbered list</h5>
        <ol class="list list-number">
            <li>Have you called or emailed to say payment is now overdue?</li>
            <li>Have you reminded the company that you can charge interest?</li>
            <li>Have you let them know you will take further action?</li>
        </ol>
    </div>
</div>
 
<div class="grid-container">
  <div class="column-two-thirds">
    <h5 class="h5">Bulleted list</h5>
    <ul class="list list-bullet">
    <li>Have you called or emailed to say payment is now overdue?</li>
    <li>Have you reminded the company that you can charge interest?</li>
    <li>Have you let them know you will take further action?</li>
    </ul>

    <h5 class="h5">Numbered list</h5>
    <ol class="list list-number">
    <li>Have you called or emailed to say payment is now overdue?</li>
    <li>Have you reminded the company that you can charge interest?</li>
    <li>Have you let them know you will take further action?</li>
    </ol>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    ul,
ol {
  list-style-type: none;
}

.list {
  padding: 0;
  margin-top: 5px;
  margin-bottom: $gutter;
}

.list li {
  margin-bottom: 5px;
}

// Bulleted lists
.list-bullet {
  list-style-type: disc;
  padding-left: $gutter;
}

// Numbered lists
.list-number {
  list-style-type: decimal;
  padding-left: $gutter;
}
  • URL: /components/raw/lists/lists.scss
  • Filesystem Path: components/typography/lists/lists.scss
  • Size: 317 Bytes

There are no notes for this item.