University of Leeds Design System v1.0.15

Text Highlight: Default

No notes defined.

<div class="text-highlight">{{ content | safe }}</div>
 
<div class="text-highlight">
    <p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
  • Content: 
    .text-highlight {
  border: 4px solid $color-brand;
  font-weight: $font-weight-medium--sans-serif;
  padding: $spacing-4;
  text-align: center;

  p {
    font-weight: 600;
  }

  @include media(">=uol-media-m") {
    padding: $spacing-4 $spacing-6;
  }

  :first-child {
    margin-top: 0;
  }

  :last-child {
    margin-bottom: 0 !important;
  }
}

.uol-article {
  .text-highlight {
    @include media('>=uol-media-l') {
      max-width: 43rem; // 43 as minus padding
    }
  }
}
  • URL: /components/raw/text-highlight/_text-highlight.scss
  • Filesystem Path: src/library/01-foundations/01-typography/03-typography-components/09-text-highlight/_text-highlight.scss
  • Size: 485 Bytes 
{
  "content": "<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>"
}