UIDS - UI Design System

There are no notes for this item.

Lists
WIP

Output (HTML)
Assets
Info


        
        <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.
        <ul>
            <li>Cursus Nibh Ornare
                <ul>
                    <li>Adipiscing Mollis Porta</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<ul>
    <li>Lorem ipsum dolor sit.
        <ol>
            <li>Ordered list item inside of Unordered list</li>
        </ol>
    </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.
        <ol>
            <li>Maecenas faucibus mollis interdum.
                <ol>
                    <li>Amet Magna Justo</li>
                </ol>
            </li>
        </ol>
    </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>

File:

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 {
  line-height: 1.7; }

ul ul {
  list-style-type: circle; }

ul ul ul {
  list-style-type: square; }

ol ol, ol ul, ul ol, ul ul {
  margin-top: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  margin-bottom: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0; }

.element--list-none {
  list-style: none; }
  .element--list-none li {
    list-style: none; }

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", "Antonio-fallback", 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.8 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 {
  line-height: 1.7;
}

ul ul {
  list-style-type: circle;
  //@include margin($top: $xsm);
}

ul ul ul {
  list-style-type: square;
}

ol ol, ol ul, ul ol, ul ul {
  margin-top: 0;
  margin-block-start: 0;
  margin-bottom: 0;
  margin-block-end: 0;
}

.element--list-none {
  list-style: none;
  li {
    list-style: none;
  }
}

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.2 KB

Handle: @lists
Preview:
- With layout
- Component only
Filesystem Path: src/components/typography/lists/lists.twig

Lists WIP

Lists
WIP