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. */