College Design Language System

Unordered List 

<section class="page-text-wrapper">
    <div class="container">
        <div class="row no-mrg">
            <div class="col-xl-col-lg-6 col-md-6 col-sm-12">
                <ul>
                    <li>I am an unordered list</li>
                    <li>Use the HTML &lt;ul&gt; element to define an unordered list</li>
                    <li>Use the HTML type attribute to define the numbering type</li>
                    <li>Use the HTML &lt;li&gt; element to define a list item</li>
                    <li>Lists can be nested
                        <ul>
                            <li>Nested item.</li>
                            <li>Nested item.</li>
                            <li>Nested item.</li>
                        </ul>
                    </li>
                    <li>List items can contain other HTML elements</li>
                </ul>
            </div>
        </div>
    </div>
</section>
  • Content: 
    /* components/01-visual-styling/03-typography/05-unordered-list/unordered-list.scss */
/* BEGIN unordered-list.scss */
.page-text-wrapper ul li, .tab-body-content ul li, .accordion-body-content ul li {
    margin-bottom: 7px;
    width: 100%;
  }

.page-text-wrapper ul > li > ul {
	margin-top: 7px;
  }
  
  .enhanced-ul-list li {
    margin-bottom: 7px;
  }
  
  .enhanced-ul-list li .color-orange {
    margin-right: 10px;
  }

/* END unordered-list.scss */
  • URL: /components/raw/unordered-list/unordered-list.scss
  • Filesystem Path: components/01-visual-styling/01-typography/05-unordered-list/unordered-list.scss
  • Size: 460 Bytes 
<section class="page-text-wrapper">
<div class="container">
    <div class="row no-mrg">
        <div class="col-xl-col-lg-6 col-md-6 col-sm-12">
            <ul>
                <li>{{ text }}</li>
                <li>Use the HTML &lt;ul&gt; element to define an unordered list</li>
                <li>Use the HTML type attribute to define the numbering type</li>
                <li>Use the HTML &lt;li&gt; element to define a list item</li>
                <li>Lists can be nested
                    <ul><li>Nested item.</li>
                        <li>Nested item.</li>
                        <li>Nested item.</li>
                    </ul>
                </li>
                <li>List items can contain other HTML elements</li>
            </ul>
        </div>
    </div>
</div>
</section>