University of Leeds Design System v1.0.14.2

Font face

No notes defined.

<pre>%uol-font-sans-serif</pre>
<p class="uol-font-sans-serif">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores consequatur voluptatum nemo fugiat a eos similique? Doloremque voluptatibus, non fuga nihil aspernatur quisquam, hic tenetur totam voluptatem repellendus soluta architecto!</p>
<pre>%uol-font-sans-serif--bold</pre>
<p class="uol-font-sans-serif--bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. In temporibus voluptatibus saepe non esse eligendi aut, distinctio eaque maiores corrupti laboriosam tempora quis necessitatibus magni eius quibusdam autem. Facere, illo!</p>
<pre>%uol-font-sans-serif--italic</pre>
<p class="uol-font-sans-serif--italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. In temporibus voluptatibus saepe non esse eligendi aut, distinctio eaque maiores corrupti laboriosam tempora quis necessitatibus magni eius quibusdam autem. Facere, illo!</p>
<pre>%uol-font-serif</pre>
<p class="uol-font-serif">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores consequatur voluptatum nemo fugiat a eos similique? Doloremque voluptatibus, non fuga nihil aspernatur quisquam, hic tenetur totam voluptatem repellendus soluta architecto!</p>
<pre>%uol-font-serif--bold</pre>
<p class="uol-font-serif--bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. In temporibus voluptatibus saepe non esse eligendi aut, distinctio eaque maiores corrupti laboriosam tempora quis necessitatibus magni eius quibusdam autem. Facere, illo!</p>
 
<pre>%uol-font-sans-serif</pre>
<p class="uol-font-sans-serif">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores consequatur voluptatum nemo fugiat a eos similique? Doloremque voluptatibus, non fuga nihil aspernatur quisquam, hic tenetur totam voluptatem repellendus soluta architecto!</p>
<pre>%uol-font-sans-serif--bold</pre>
<p class="uol-font-sans-serif--bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. In temporibus voluptatibus saepe non esse eligendi aut, distinctio eaque maiores corrupti laboriosam tempora quis necessitatibus magni eius quibusdam autem. Facere, illo!</p>
<pre>%uol-font-sans-serif--italic</pre>
<p class="uol-font-sans-serif--italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. In temporibus voluptatibus saepe non esse eligendi aut, distinctio eaque maiores corrupti laboriosam tempora quis necessitatibus magni eius quibusdam autem. Facere, illo!</p>
<pre>%uol-font-serif</pre>
<p class="uol-font-serif">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores consequatur voluptatum nemo fugiat a eos similique? Doloremque voluptatibus, non fuga nihil aspernatur quisquam, hic tenetur totam voluptatem repellendus soluta architecto!</p>
<pre>%uol-font-serif--bold</pre>
<p class="uol-font-serif--bold">Lorem ipsum dolor sit amet consectetur adipisicing elit. In temporibus voluptatibus saepe non esse eligendi aut, distinctio eaque maiores corrupti laboriosam tempora quis necessitatibus magni eius quibusdam autem. Facere, illo!</p>
  • Content: 
    %uol-font-sans-serif {
  font-family: $font-family-sans-serif;
  font-weight: $font-weight-regular--sans-serif;
  font-style: normal;
  font-variant-numeric: lining-nums;

  @include media(">=uol-media-m") {
      font-family: $font-family-sans-serif--desktop;
  }
}

%uol-font-sans-serif--bold {
  @extend %uol-font-sans-serif;

  font-weight: $font-weight-bold--sans-serif;
}

%uol-font-sans-serif--italic {
  @extend %uol-font-sans-serif;

  font-style: italic;
}

%uol-font-serif {
  font-family: $font-family-serif;
  font-weight: $font-weight-regular--serif;

  @include media(">=uol-media-m") {
    font-family: $font-family-serif--desktop;
    font-style: normal;
  }
}

%uol-font-serif--bold {
  font-family: $font-family-serif;
  font-weight: $font-weight-bold--serif;

  @include media(">=uol-media-m") {
    font-family: $font-family-serif--desktop;
    font-style: normal;
  }
}

body {
  @extend %uol-font-sans-serif;
}

.uol-font-sans-serif {
  @extend %uol-font-sans-serif;
}

.uol-font-sans-serif--bold {
  @extend %uol-font-sans-serif--bold;
}

.uol-font-sans-serif--italic {
  @extend %uol-font-sans-serif--italic;
}

.uol-font-serif {
  @extend %uol-font-serif;
}

.uol-font-serif--bold {
  @extend %uol-font-serif--bold;
}

.Prose {
  font-feature-settings: normal;
}
  • URL: /components/raw/uol-typography-font-face/_typography-font.scss
  • Filesystem Path: src/library/01-foundations/01-typography/02-typography-font/_typography-font.scss
  • Size: 1.3 KB
  • Handle: @uol-typography-font-face
  • Preview:
  • Filesystem Path: src/library/01-foundations/01-typography/02-typography-font/typography-font.njk 
/* No context defined. */