Reactive Graph - Design System

List Box: Circle Arrow Right Selective Yellow 

<section class="rg-list-box circle-arrow-right selective-yellow">
    <div class="container">
        <ul class="rg-list circle-arrow-right selective-yellow">
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
            <li>Line 5</li>
            <li>Line 6
                <ul class="rg-list circle-arrow-right selective-yellow">
                    <li>Line 1</li>
                    <li>Line 2</li>
                    <li>Line 3</li>
                    <li>Line 4</li>
                    <li>Line 5</li>
                </ul>
            </li>
            <li>Line 7</li>
        </ul>
    </div>
</section>
 
<section class="rg-list-box {{#if modifier}}{{modifier}}{{/if}} {{#if color}}{{color}}{{/if}}">
  <div class="container">
    <ul class="rg-list {{#if modifier}}{{modifier}}{{/if}} {{#if color}}{{color}}{{/if}}">
      <li>Line 1</li>
      <li>Line 2</li>
      <li>Line 3</li>
      <li>Line 4</li>
      <li>Line 5</li>
      <li>Line 6
        <ul class="rg-list {{#if modifier}}{{modifier}}{{/if}} {{#if color}}{{color}}{{/if}}">
          <li>Line 1</li>
          <li>Line 2</li>
          <li>Line 3</li>
          <li>Line 4</li>
          <li>Line 5</li>
        </ul>
      </li>
      <li>Line 7</li>
    </ul>
  </div>
</section>
 
{
  "color": "selective-yellow",
  "modifier": "circle-arrow-right"
}
  • Handle: @list-box--circle-arrow-right--selective-yellow
  • Preview:
  • Filesystem Path: components/02-molecules/list-box/list-box.hbs

No notes defined.