There are no notes for this item.

<ul>
    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
    <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
    <li>Ut non enim metus.</li>
</ul>

<ul class="element--circle-list ">
    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
    <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
    <li>Ut non enim metus.</li>
</ul>

<ol>
    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
    <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
    <li>Ut non enim metus.</li>
</ol>

<ol class="element--circle-list ">
    <li>Complete
        <a href="https://admissions.uiowa.edu/academics-undergraduate-programs-undergraduate/minimum-high-school-course-requirements">high school course requirements</a>.&nbsp;&nbsp;</li>
    <li>Achieve the minimum required score on the
        <a href="https://admissions.uiowa.edu/rai">Regents Admissions Index (RAI)</a>.&nbsp;</li>
    <li>Meet
        <a href="https://admissions.uiowa.edu/academics/first-year-admission">admissions requirements</a>
        for your college of choice.&nbsp;&nbsp;</li>
    <li>Submit your
        <a href="https://financialaid.uiowa.edu/apply">FAFSA</a>
        by October 1st and explore financial aid.&nbsp;&nbsp;</li>
    <li>Complete an online application.&nbsp;&nbsp;</li>
    <li>
        <p>This paragraph is nested inside an article. It contains many different, sometimes useful,
            <a href="https://www.w3schools.com/tags/">HTML5 tags</a>. Of course there are classics like
            <em>emphasis</em>,
            <strong>strong</strong>, and
            <small>small</small>
            but there are many others as well. Hover the following text for abbreviation tag:
            <abbr title="abbreviation">abbr</abbr>. Similarly, you can use acronym tag like this:
            <acronym title="For The Win">ftw</acronym>. You can define
            <del>deleted text</del>
            which often gets replaced with
            <ins>inserted</ins>
            text.</p>
        <p>You can also use
            <kbd>keyboard text</kbd>, which sometimes is styled similarly to the
            <code>&lt;code&gt;</code>
            or
            <samp>samp</samp>
            tags. Even more specifically, there is a tag just for
            <var>variables</var>. Not to be mistaken with blockquotes
            below, the quote tag lets you denote something as
            <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags.
        </p>
    </li>
</ol>

<dl>
    <dt>Definition List Title</dt>
    <dd>Definition list division.</dd>
    <dt>Kitchen Sink</dt>
    <dd>Used in expressions to describe work in which all conceivable (and some
        inconceivable) sources have been mined. In this case, a bunch of markup.
    </dd>
    <dt>aside</dt>
    <dd>Defines content aside from the page content</dd>
    <dt>blockquote</dt>
    <dd>Defines a section that is quoted from another source</dd>
</dl>
  • Content:
    ol {
      list-style-position: outside;
      font-size: 1.2rem;
      margin-top: 1.05rem;
      margin-bottom: 1.05rem;
      margin-left: 1.875rem; }
    
    ol:not([type]) {
      list-style-type: decimal; }
    
    ol:not([type]).is-lower-alpha {
      list-style-type: lower-alpha; }
    
    ol:not([type]).is-lower-roman {
      list-style-type: lower-roman; }
    
    ol:not([type]).is-upper-alpha {
      list-style-type: upper-alpha; }
    
    ol:not([type]).is-upper-roman {
      list-style-type: upper-roman; }
    
    ol li {
      line-height: 1.7; }
    
    ul {
      list-style: disc outside;
      font-size: 1.2rem;
      margin-top: 1.05rem;
      margin-bottom: 1.05rem;
      margin-left: 1.875rem; }
    
    ul li {
      list-style: disc outside;
      line-height: 1.7; }
    
    ul ul {
      list-style-type: circle; }
    
    ul ul ul {
      list-style-type: square; }
    
    dd {
      margin-left: 1.875rem; }
    
    .uids-component--circle-list,
    .element--circle-list {
      margin: 0 0 0 -13px;
      padding-left: 0;
      list-style: none;
      counter-reset: circle-counter; }
      .uids-component--circle-list li li,
      .element--circle-list li li {
        list-style-type: disc;
        display: list-item; }
      .uids-component--circle-list > li,
      .element--circle-list > li {
        position: relative;
        min-height: 90px;
        margin-bottom: 0.25rem;
        list-style: none;
        counter-increment: circle-counter;
        line-height: 1.7;
        display: flex;
        align-items: center; }
        @media (min-width: 768px) {
          .uids-component--circle-list > li,
          .element--circle-list > li {
            margin-left: 115px; } }
        .uids-component--circle-list > li a,
        .element--circle-list > li a {
          display: contents; }
        .uids-component--circle-list > li:before,
        .element--circle-list > li:before {
          display: block;
          margin: 0 auto;
          top: 0px;
          left: -100px;
          width: 5rem;
          height: 5rem;
          padding-top: 39px;
          content: counter(circle-counter);
          text-align: center;
          text-transform: uppercase;
          color: black;
          border: 1px solid #FFCD00;
          border-radius: 50%;
          background-color: #FFCD00;
          box-shadow: inset 0px 0px 0px 10px white;
          text-transform: uppercase;
          font-family: "Antonio", sans-serif;
          -webkit-font-smoothing: auto;
          -moz-osx-font-smoothing: auto;
          font-weight: bold;
          font-size: 2.4rem;
          line-height: 0; }
          @media (min-width: 768px) {
            .uids-component--circle-list > li:before,
            .element--circle-list > li:before {
              position: absolute;
              display: inline-block;
              margin: 0 0.5rem 0; } }
          .uids-component--gray .uids-component--circle-list > li:before,
          .bg--gray .uids-component--circle-list > li:before, .uids-component--gray
          .element--circle-list > li:before,
          .bg--gray
          .element--circle-list > li:before {
            box-shadow: inset 0px 0px 0px 10px #f3f3f3; }
    
    .element--circle-list > li,
    .uids-component--circle-list > li {
      display: block;
      align-items: start;
      padding-top: 1.275rem; }
    
    .element--circle-list h2,
    .uids-component--circle-list h2,
    .element--circle-list h3,
    .uids-component--circle-list h3,
    .element--circle-list h4,
    .uids-component--circle-list h4,
    .element--circle-list h5,
    .uids-component--circle-list h5,
    .element--circle-list h6,
    .uids-component--circle-list h6 {
      margin-bottom: 1.2rem; }
    
    .element--circle-list li a.bttn,
    .uids-component--circle-list li a.bttn {
      display: inline-block; }
    
    /*
    @-moz-document url-prefix() {
    
      .uids-component--circle-list li::before,
      .element--circle-list li::before {
        line-height: .2;
      }
    }
    */
    
  • URL: /components/raw/lists/lists.css
  • Filesystem Path: src/components/typography/lists/lists.css
  • Size: 3.5 KB
  • Content:
    @import '../../../assets/scss/variables';
    @import '../../../assets/scss/utilities';
    
    ol {
      list-style-position: outside;
      font-size: $content-font-size;
      @include margin($top: $md, $left: $lg, $bottom: $md);
    }
    
    ol:not([type]) {
      list-style-type: decimal;
    }
    
    ol:not([type]).is-lower-alpha {
      list-style-type: lower-alpha;
    }
    
    ol:not([type]).is-lower-roman {
      list-style-type: lower-roman;
    }
    
    ol:not([type]).is-upper-alpha {
      list-style-type: upper-alpha;
    }
    
    ol:not([type]).is-upper-roman {
      list-style-type: upper-roman;
    }
    
    ol li {
      line-height: 1.7;
    }
    
    ul {
      list-style: disc outside;
      font-size: $content-font-size;
      margin-top: 1.05rem;
      margin-bottom: 1.05rem;
      margin-left: 1.875rem;
    }
    
    ul li {
      list-style: disc outside;
      line-height: 1.7;
    }
    
    ul ul {
      list-style-type: circle;
      //@include margin($top: $xsm);
    }
    
    ul ul ul {
      list-style-type: square;
    }
    
    dd {
      @include margin($left: $lg);
    }
    
    
    .uids-component--circle-list,
    .element--circle-list {
      margin: 0 0 0 -13px;
      padding-left: 0;
      list-style: none;
      counter-reset: circle-counter;
    
      li li {
        list-style-type: disc;
        display: list-item;
      }
    
      >li {
        position: relative;
        min-height: 90px;
        margin-bottom: 0.25rem;
        list-style: none;
        counter-increment: circle-counter;
        line-height: 1.7;
        @include center(vertical);
    
        @include breakpoint(sm) {
          margin-left: 115px;
        }
    
        a {
          display: contents;
        }
    
        &:before {
          display: block;
          margin: 0 auto;
          top: 0px;
          left: -100px;
          width: 5rem;
          height: 5rem;
          padding-top: 39px;
          content: counter(circle-counter);
          text-align: center;
          text-transform: uppercase;
          color: black;
          border: 1px solid $primary;
          border-radius: 50%;
          background-color: $primary;
          box-shadow: inset 0px 0px 0px 10px white;
          text-transform: uppercase;
          font-family: $font-family-caps;
          -webkit-font-smoothing: auto;
          -moz-osx-font-smoothing: auto;
          font-weight: bold;
          font-size: 2.4rem;
          line-height: 0;
    
          @include breakpoint(sm) {
            position: absolute;
            display: inline-block;
            margin: 0 0.5rem 0;
          }
    
          .uids-component--gray &,
          .bg--gray & {
            box-shadow: inset 0px 0px 0px 10px $light;
          }
        }
      }
    }
    
    .element--circle-list>li,
    .uids-component--circle-list>li {
      display: block;
      align-items: start;
      padding-top: 1.275rem;
    }
    
    .element--circle-list h2,
    .uids-component--circle-list h2,
    .element--circle-list h3,
    .uids-component--circle-list h3,
    .element--circle-list h4,
    .uids-component--circle-list h4,
    .element--circle-list h5,
    .uids-component--circle-list h5,
    .element--circle-list h6,
    .uids-component--circle-list h6 {
      margin-bottom: 1.2rem;
    }
    
    .element--circle-list li a.bttn,
    .uids-component--circle-list li a.bttn {
      display: inline-block;
    }
    /*
    @-moz-document url-prefix() {
    
      .uids-component--circle-list li::before,
      .element--circle-list li::before {
        line-height: .2;
      }
    }
    */
    
  • URL: /components/raw/lists/lists.scss
  • Filesystem Path: src/components/typography/lists/lists.scss
  • Size: 3 KB