University of Leeds Design System v1.0.14

In Text Icons

Guidance

The In-text-icon component is a list of svg icons along with associated text. For example a list item may be an svg icon of a dumbell along with the text “on-site gym”. This component can be used in article or document pages.

These icons appear in one column (<768px) or two columns (>=768px) and have a pre-determined icon associated with each pair. Icons use MDI icons and their associated MDI reference label. As an example, the following config example shows how two MDI icons can be included allong with their associated text.

Config example

'context': {
  'items': [
    {
      'icon': 'mdiWifi',
      'text': 'Fast Wi-Fi',
    },
    {
      'icon': 'mdiDumbbell',
      'text': 'On-site gym',
    },

Icon choices

For implementation, any icon listed on the @uol-in-text-icons page can be used. This page shows currently available icons alongside their associated texts.

For content editors

Once a full set of icons are available, these can all be presented with their associated texts as options and should be able to be selected by content editors - this should then display any selected icon/text pairs.

<ul class="in-text-icons">
  {% for item in items %}
  <li class="in-text-icon uol-icon uol-icon--{{ item.icon }}">{{ item.text }}</li>
  {% endfor %}
</ul>
 
<ul class="in-text-icons">

    <li class="in-text-icon uol-icon uol-icon--mdiWifi">Fast Wi-Fi</li>

    <li class="in-text-icon uol-icon uol-icon--mdiDumbbell">On-site gym</li>

    <li class="in-text-icon uol-icon uol-icon--mdiSofaSingleOutline">Common room</li>

    <li class="in-text-icon uol-icon uol-icon--mdiSoccer">University sport</li>

    <li class="in-text-icon uol-icon uol-icon--mdiParking">Parking</li>

    <li class="in-text-icon uol-icon uol-icon--mdiGrill">Outdoor social space</li>

    <li class="in-text-icon uol-icon uol-icon--mdiWashingMachine">Laundry</li>

    <li class="in-text-icon uol-icon uol-icon--mdiStore">Shops nearby</li>

    <li class="in-text-icon uol-icon uol-icon--mdiCoffeeOutline">Cafes nearby</li>

    <li class="in-text-icon uol-icon uol-icon--mdiGlassMugVariant ">Bars nearby</li>

    <li class="in-text-icon uol-icon uol-icon--mdiTennis ">Sports courts</li>

    <li class="in-text-icon uol-icon uol-icon--mdiPaletteOutline">Indoor recreational activities</li>

    <li class="in-text-icon uol-icon uol-icon--mdiMusicNote">Music practice room</li>

    <li class="in-text-icon uol-icon uol-icon--mdiMicrosoftXboxController">Gaming consoles</li>

</ul>
  • Content: 
    .in-text-icons {
  padding: 0 !important;
  
  /*
  grip gap for each view same as gap between other components
  column width 50% - half of grip gap
  */
  @include media(">=uol-media-m") {
    display: grid;
    columns: 2;
    grid-template-columns: calc(50% - #{$spacing-2}) calc(50% - #{$spacing-2});
    grid-gap: 0 $spacing-4;
  }

  @include media(">=uol-media-l") {
    grid-template-columns: calc(50% - #{$spacing-3}) calc(50% - #{$spacing-3});
    grid-gap: 0 $spacing-5;
  }

  @include media(">=uol-media-xl") {
    grid-template-columns: calc(50% - #{$spacing-4}) calc(50% - #{$spacing-4});
    grid-gap: 0 $spacing-6;
  }

}
  
  .in-text-icon {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-gap: $spacing-3;
    align-items: center;
    margin-bottom: 20px !important;
    
    svg {
      display: block;
      height: $spacing-6 !important;
      width: $spacing-6 !important;
      color: $color-brand;
      margin: 0 !important;
    }
    .uol-icon__label {
      @extend %text-size-paragraph;

      line-height: 1.75rem;
      display: block;
      break-inside: avoid-column;
      margin-right: 48px;
    }
  }

.uol-rich-text {
  // important tags because component is ul so uses text list styling
  
  .in-text-icons {
    margin-top: 16px !important;
    margin-bottom: 0px !important;

    @include media(">=uol-media-m") {
      margin-top: 24px !important;
      margin-bottom: -20px !important;
    }

    svg {
      margin-right: $spacing-3;
    }
  }

  p + .in-text-icons {
    // paragraph normally has 32px after it, here we want 24 so take of 8
    margin-top: -8px !important;
    
    @include media(">=uol-media-m") {
      // 32px from paragraph above it so remove negative margin
      margin-top: 0 !important;
    }
  }
}
  • URL: /components/raw/uol-in-text-icons/_in-text-icons.scss
  • Filesystem Path: src/library/02-components/in-text-icons/_in-text-icons.scss
  • Size: 1.8 KB
  • Handle: @uol-in-text-icons
  • Preview:
  • Filesystem Path: src/library/02-components/in-text-icons/in-text-icons.njk 
{
  "items": [
    {
      "icon": "mdiWifi",
      "text": "Fast Wi-Fi"
    },
    {
      "icon": "mdiDumbbell",
      "text": "On-site gym"
    },
    {
      "icon": "mdiSofaSingleOutline",
      "text": "Common room"
    },
    {
      "icon": "mdiSoccer",
      "text": "University sport"
    },
    {
      "icon": "mdiParking",
      "text": "Parking"
    },
    {
      "icon": "mdiGrill",
      "text": "Outdoor social space"
    },
    {
      "icon": "mdiWashingMachine",
      "text": "Laundry"
    },
    {
      "icon": "mdiStore",
      "text": "Shops nearby"
    },
    {
      "icon": "mdiCoffeeOutline",
      "text": "Cafes nearby"
    },
    {
      "icon": "mdiGlassMugVariant ",
      "text": "Bars nearby"
    },
    {
      "icon": "mdiTennis ",
      "text": "Sports courts"
    },
    {
      "icon": "mdiPaletteOutline",
      "text": "Indoor recreational activities"
    },
    {
      "icon": "mdiMusicNote",
      "text": "Music practice room"
    },
    {
      "icon": "mdiMicrosoftXboxController",
      "text": "Gaming consoles"
    }
  ]
}