University of Leeds Design System v1.0.15

Link Button: 2 Buttons

Guidance

This component is to be used where a button is to be displayed, similay to uol-button, but where the button is to act as a hyperlink.

Developer guidance

This button should be used sparingly, other options may be more applicable to linking to other pages.

Each button consists of two required terms:

  • ‘content’ - The text content of the button
  • ‘url’ - The linked URL
  • ‘style’ (optional) - The button style (see @uol-button)

Further options as per the uol-button linked above (eg. icon, icon_after etc) can also be added

'context': {
  'links': [
    {
      'style': 'secondary',
      'content': 'Clear all filters',
      'url': '/url',
      'icon': 'mdiArrowRight',
      'icon_after': true
    }
  ]
}


<div class="uol-link-button-container">
  {% for link in links %}
    <a class="uol-button uol-link-button uol-button--{{ link.style }}
    {% if link.icon %}
      uol-icon uol-icon--{{ link.icon }}
      {{ 'uol-icon--position-after' if link.icon_after }}
      {{ 'uol-icon--icon-only' if link.icon_only }}
      {{ 'uol-icon--icon-only--large' if link.large_icon }}
    {% endif %}"
    href="{{ link.url }}">{{ link.content }}</a>
  {% endfor %}
</div>
 
<div class="uol-link-button-container">

    <a class="uol-button uol-link-button uol-button--primary
    " href="/url">Contact</a>

    <a class="uol-button uol-link-button uol-button--
    " href="/url">Apply</a>

</div>
  • Content: 
    .uol-link-button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
  @include media(">=uol-media-m") {
    flex-direction: row;
  }
}
.uol-link-button {
  display: inline-block;
  min-width: 0;
  margin-right: $spacing-5;
  margin-bottom: $spacing-6;

  @include media(">=uol-media-m") {
    margin-right: $spacing-5;
    margin-bottom: $spacing-7;
  }

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

  &:first-child {
    margin-bottom: $spacing-6;
    @include media(">=uol-media-m") {
      margin-bottom: 0;
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
}
  • URL: /components/raw/uol-link-button/_link-button.scss
  • Filesystem Path: src/library/02-components/link-button/_link-button.scss
  • Size: 627 Bytes 
{
  "links": [
    {
      "style": "primary",
      "content": "Contact",
      "url": "/url"
    },
    {
      "content": "Apply",
      "url": "/url"
    }
  ]
}