List

        <coral-list style="max-width:300px">
          <coral-list-item icon="globe">Marketing Cloud Help<br>And more text</coral-list-item>
          <coral-list-divider></coral-list-divider>
          <coral-list-item icon="userGroup">Community</coral-list-item>
          <coral-list-item icon="callCenter">Customer Care</coral-list-item>
          <coral-list-item icon="news">What's new in Coral Spectrum</coral-list-item>
          <coral-list-item icon="servers">Adobe Marketing Cloud Status</coral-list-item>
          <coral-list-item icon="light">Getting Started with Coral Spectrum And Incredible Long Titles That Are Sure To Cause
            Wrapping
          </coral-list-item>
          <coral-list-item icon="disqus" disabled="">Disabled Item</coral-list-item>
          <coral-list-item>No Icon</coral-list-item>
        </coral-list>
      

        <coral-buttonlist style="max-width:300px">
          <button is="coral-buttonlist-item" icon="globe" value="learn">Marketing Cloud Help<br>And more text</button>
          <coral-list-divider></coral-list-divider>
          <button is="coral-buttonlist-item" icon="userGroup" value="community">Community</button>
          <button is="coral-buttonlist-item" icon="callCenter" value="customercare">Customer Care</button>
          <button is="coral-buttonlist-item" icon="news" value="news">What's new in Coral Spectrum</button>
          <button is="coral-buttonlist-item" icon="servers" value="status">Adobe Marketing Cloud Status</button>
          <button is="coral-buttonlist-item" icon="light" value="getstarted">Getting Started with Coral Spectrum And Incredible
            Long Titles That Are Sure To Cause Wrapping
          </button>
          <button is="coral-buttonlist-item" icon="disqus" value="status" disabled="">Disabled Item</button>
          <button is="coral-buttonlist-item" value="noicon">No Icon</button>
        </coral-buttonlist>
      

        <coral-anchorlist style="max-width:300px">
          <a is="coral-anchorlist-item" icon="globe" href="#">Marketing Cloud Help</a>
          <coral-list-divider></coral-list-divider>
          <a is="coral-anchorlist-item" icon="userGroup" href="#">Community</a>
          <a is="coral-anchorlist-item" icon="callCenter" href="#">Customer Care</a>
          <a is="coral-anchorlist-item" icon="news" href="#">What's new in Coral Spectrum</a>
          <a is="coral-anchorlist-item" icon="servers" href="#">Adobe Marketing Cloud Status</a>
          <a is="coral-anchorlist-item" icon="light" href="#">Getting Started with Coral Spectrum And Incredible Long
            Titles That Are Sure To Cause Wrapping</a>
          <a is="coral-anchorlist-item" icon="disqus" href="#" disabled="">Disabled Item</a>
          <a is="coral-anchorlist-item" href="#">No Icon</a>
        </coral-anchorlist>
      

        <coral-selectlist style="max-width:200px">
          <coral-selectlist-item value="1">Option 1</coral-selectlist-item>
          <coral-selectlist-item value="2"><coral-icon icon="add" alt="Add" title="Add"></coral-icon>Option 2 with icon</coral-selectlist-item>
          <coral-selectlist-item value="4" selected="">Option 4 with loooooooooong text wrapping</coral-selectlist-item>
          <coral-selectlist-item value="5">Option 5</coral-selectlist-item>
        </coral-selectlist>
      

        <coral-selectlist id="list" style="max-width:200px">
          <coral-selectlist-item selected="" value="1">Option 1</coral-selectlist-item>
          <coral-selectlist-item value="2">Option 2</coral-selectlist-item>
          <coral-selectlist-item value="3">Option 3</coral-selectlist-item>
        </coral-selectlist>

        <script>
          list.addEventListener('coral-selectlist:beforechange', function(event) {
            // We prevent the selection to change if we're in single selection and the clicked item is deselected
            if (!list.multiple && event.detail.item.selected) {
              event.preventDefault();
            }
          });
        </script>
      

        <coral-selectlist multiple="" style="max-width:200px">
          <coral-selectlist-item value="1">Option 1</coral-selectlist-item>
          <coral-selectlist-item value="2" selected="">Option 2</coral-selectlist-item>
          <coral-selectlist-item value="3" selected="">Option 3</coral-selectlist-item>
        </coral-selectlist>
      

        <coral-selectlist style="max-width:200px">
          <coral-selectlist-group label="Group 1">
            <coral-selectlist-item value="1">Option 1</coral-selectlist-item>
            <coral-selectlist-item value="2" disabled="">Option 2</coral-selectlist-item>
            <coral-selectlist-item value="3">Option 3</coral-selectlist-item>
          </coral-selectlist-group>
          <coral-list-divider></coral-list-divider>
          <coral-selectlist-group label="Group 2">
            <coral-selectlist-item value="1">Option 1</coral-selectlist-item>
            <coral-selectlist-item value="2" disabled="">Option 2</coral-selectlist-item>
            <coral-selectlist-item value="3">Option 3</coral-selectlist-item>
          </coral-selectlist-group>
        </coral-selectlist>
      

        <ul class="coral-List">
          <li class="coral-List-item">Basic List Item 1</li>
          <li class="coral-List-item">Basic List Item 2</li>
          <li class="coral-List-item">Basic List Item 3</li>
        </ul>

        <ul class="coral-List--minimal">
          <li class="coral-List-item">Minimal List Item 1</li>
          <li class="coral-List-item">Minimal List Item 2</li>
          <li class="coral-List-item">Minimal List Item 3</li>
        </ul>

        <ul class="coral-List--condensed">
          <li class="coral-List-item">Condensed List Item 1</li>
          <li class="coral-List-item">Condensed List Item 2</li>
          <li class="coral-List-item">Condensed List Item 3</li>
        </ul>