College Design Language System

Ordered List: Default 

<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">
                <div>
                    <ol>
                        <li>I am a ordered list</li>
                        <li>Use the HTML &lt;ol&gt; element to define an ordered 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>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section>
  • Content: 
    /* components/01-visual-styling/03-typography/04-ordered-list/ordered-list.scss */
/* BEGIN ordered-list.scss */
.page-text-wrapper ol li, .tab-body-content ol li, .accordion-body-content ol li {
	margin-bottom: 6px;
	font-weight: 400;
  width: 100%;
  }

.page-text-wrapper ol > li > ul {
	margin-top: 7px;
  }

  .ordered-list .blue-label,
  .enhanced-ordered-list .blue-label {
	margin-bottom: 24px;
  }
  
  .enhanced-ol-list {
	padding-left: 20px;
  }
  
  .enhanced-ol-list li {
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 400;
  }
  
  .enhanced-ol-list li {
	margin-bottom: 10px;
	font-family: "kulturista-web", serif;
  }
  
  .enhanced-ol-list::marker {
	color: #D3430D;
  }

/* END ordered-list.scss */
  • URL: /components/raw/ordered-list/ordered-list.scss
  • Filesystem Path: components/01-visual-styling/01-typography/04-ordered-list/ordered-list.scss
  • Size: 722 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">
            <div>
                <ol>
                    <li>{{ text }}</li>
                    <li>Use the HTML &lt;ol&gt; element to define an ordered 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>
                </ol>
            </div>
        </div>
    </div>
</div>
</section>