University of Leeds Design System v1.0.13

Navigation Card: Different Text Limits

Guidance

The navigation card is a component that displays text but also acts as a large clickable link to another area.

This component accepts an array of cards. These are indiviudally displayed as single cards, appearing alongside each other in different number of columns dependent on screen size.

Each card consists of:

  • “title” - maximum 44 characters
  • “description” - maximum 245 characters
  • “url” - Address to link to. This link is applied to the whole card

Hovering over the card shows a transitioned shadowed border and an animated red line coming across the bottom of the card, consistent with other design system elements.

Example config

'context': {
  'cards': [
    {
      'title': "Welcome",
      'description': "Welcome to all our new and returning Students. We've put together everything you need to make sure you're prepared and can feel in control",
      'url': "#"
    },
    {
      'title': "Welcome",
<div class="uol-navigation-cards">
  {% for card in navigationCards %}
    <a href="{{ card.url }}" class="uol-navigation-card">
      <h2 class="uol-navigation-card__title">{{ card.title }}</h2>
      <p class="uol-navigation-card__description">{{ card.description }}</p>
    </a>
  {% endfor %}
</div>
 
<div class="uol-navigation-cards">

    <a href="#" class="uol-navigation-card">
        <h2 class="uol-navigation-card__title">Short title and description</h2>
        <p class="uol-navigation-card__description">Advised limits: Title 44 characters. Description 245 characters.</p>
    </a>

    <a href="#" class="uol-navigation-card">
        <h2 class="uol-navigation-card__title">Title spans over two lines, medium description</h2>
        <p class="uol-navigation-card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod. </p>
    </a>

    <a href="#" class="uol-navigation-card">
        <h2 class="uol-navigation-card__title">Title spans over two lines, long description</h2>
        <p class="uol-navigation-card__description">Here the long desription is cut off and terminated via an ellipsis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod.</p>
    </a>

    <a href="#" class="uol-navigation-card">
        <h2 class="uol-navigation-card__title">Where necessary the title could be three or more lines but try to avoid</h2>
        <p class="uol-navigation-card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod.</p>
    </a>

</div>
  • Content: 
    .uol-navigation-cards {
  display: flex;
  flex-wrap: wrap;
  > * {
    text-decoration: none;
  }

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

  @include media(">=uol-media-l") {
    gap: 0 $spacing-5;
  }

  @include media(">=uol-media-xl") {
    gap: 0 $spacing-6;
  }
}

  .uol-navigation-card {
    box-sizing: border-box;
    min-height: 338px;
    
    padding: $spacing-6 $spacing-4;
    flex: 100%;

    background-color: $color-grey--faded;
    // background-color: lightblue;
    position: relative;

    border: 1px solid $color-border--light;

    margin-bottom: $spacing-4;

    @include media(">=uol-media-l") {
      margin-bottom: $spacing-5;
    }
  
    @include media(">=uol-media-xl") {
      margin-bottom: $spacing-6;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      transition: box-shadow 0.25s ease-in-out;
      z-index: 3;
    }
  
    &:hover {
  
      &::before {
        box-shadow:
        0px 13px 15px rgba(0, 0, 0, 0.25);
      }
    }   

    @include media(">=uol-media-m") { 
      flex: calc(50% - 8px);
      max-width: calc(50% - 8px);
    }

    @include media(">=uol-media-l") {
      flex: calc((100% + 24px) / 3 - 24px);
      max-width:  calc((100% + 24px) / 3 - 24px);
    }

    @include media(">=uol-media-xl") {
      flex: calc((100% + 32px) / 4 - 32px);
      max-width:  calc((100% + 32px) / 4 - 32px);
    }
    
    
    &::after {
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: $spacing-2 solid $color-brand;
      transform: scaleX(0);
      transition: transform .3s ease-in-out;
      transform-origin: 0 50%;
    }

    &:hover:after,
    &:focus-within:after {
      transform: scaleX(1);
      outline: none;
    }

    .uol-side-nav-container--populated + .uol-homepage-content & {
      
      @include media(">=uol-media-l") {
        flex: calc((100% + 24px) / 2 - 24px);
        max-width:  calc((100% + 24px) / 2 - 24px);
      }
      
      @include media(">=uol-media-xl") {
        flex: calc((100% + 32px) / 3 - 32px);
        max-width:  calc((100% + 32px) / 3 - 32px);
      }
    } 
  }

    .uol-navigation-card__title {
      @extend .uol-typography-heading-5;
      
      margin: 0 0 $spacing-2;
    }

    .uol-navigation-card__description {
      @include font-size-responsive(1.125rem, 1.25rem, 1.25rem);
      @include line-height-responsive(1.75rem, 1.75rem, 2rem);

      @extend %uol-font-sans-serif;

      margin-top: 0;
      margin-bottom: 0;
      color: $color-font;

      @include media(">=uol-media-m") {
        @include font-size-responsive(1rem, 1rem, 1.125rem);
        @include line-height-responsive(1.5rem, 1.625rem, 1.75rem);
      }

      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  • URL: /components/raw/uol-navigation-cards/_navigation-cards.scss
  • Filesystem Path: src/library/02-components/navigation-cards/_navigation-cards.scss
  • Size: 3 KB 
{
  "navigationCards": [
    {
      "title": "Short title and description",
      "description": "Advised limits: Title 44 characters. Description 245 characters.",
      "url": "#"
    },
    {
      "title": "Title spans over two lines, medium description",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod. ",
      "url": "#"
    },
    {
      "title": "Title spans over two lines, long description",
      "description": "Here the long desription is cut off and terminated via an ellipsis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod.",
      "url": "#"
    },
    {
      "title": "Where necessary the title could be three or more lines but try to avoid",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices fringilla urna, non tincidunt lorem porttitor vel. Morbi laoreet mattis euismod.",
      "url": "#"
    }
  ]
}