Source: dist/css/virtual_boot.css, line 7874

13.6.1 Simple Credit Dots

When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.

Sub.Credits

Sub Components in Design:

Example

Default styling

CME
CNE
COP
MOCII

NOTE:

This pattern requires the inclusion of the credit color stylesheets.

<ul class=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
  <li class="inline-flex items_center lh_0">
      <span class="bg_CME br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CME
  </li>  <li class="inline-flex items_center lh_0">
      <span class="bg_CNE br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CNE
  </li>  <li class="inline-flex items_center lh_0">
      <span class="bg_COP br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> COP
  </li>  <li class="inline-flex items_center lh_0">
      <span class="bg_MOCII br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
  </li></ul>

<ul class=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
  <li class="inline-flex items_center lh_0">
      <span class="bg_CME br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CME
  </li>  <li class="inline-flex items_center lh_0">
      <span class="bg_CNE br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CNE
  </li>  <li class="inline-flex items_center lh_0">
      <span class="bg_COP br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> COP
  </li>  <li class="inline-flex items_center lh_0">
      <span class="bg_MOCII br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
  </li></ul>

Code Sample

Copy Code