Foehn Design System

Button Tiles 

<ul class="vd-btn-tiles mb-3">
    <li class="vd-btn-tiles__item">
        <a href="#" class="vd-btn-tiles__link">Le portail IAM (Identity and Access Management) permet de se connecter de manière sécurisée aux différentes ressources de l&#39;Etat de Vaud</a>
    </li>
    <li class="vd-btn-tiles__item">
        <a href="#" class="vd-btn-tiles__link">Button 2</a>
    </li>
    <li class="vd-btn-tiles__item">
        <a href="#" class="vd-btn-tiles__link">Button 3</a>
    </li>
</ul>
 
<ul class="vd-btn-tiles mb-3">
  {% for item in items -%}
    <li class="vd-btn-tiles__item">
      <a href="{{ item.url }}" class="vd-btn-tiles__link">{{ item.item }}</a>
    </li>
  {%- endfor %}
</ul>
 
{
  "items": [
    {
      "item": "Le portail IAM (Identity and Access Management) permet de se connecter de manière sécurisée aux différentes ressources de l'Etat de Vaud",
      "url": "#"
    },
    {
      "item": "Button 2",
      "url": "#"
    },
    {
      "item": "Button 3",
      "url": "#"
    }
  ]
}
  • Content: 
    @charset ':UTF-8';
@use "sass:math";

/**
 * Button tiles
 *
 * 1. Remove list styles
 * 2. Make button the same height if there's is a lot of text in one of them.
 * 3. Max width of an element is 33% on desktop.
 */
.vd-btn-tiles {
  padding-left: 0; /* [1] */
  list-style: none; /* [1] */
  display: flex;
  flex-flow: column wrap;

  @include media-breakpoint-up(sm) {
    flex-direction: row;
    margin-right: - math.div($spacer, 2);
    margin-left: - math.div($spacer, 2);
  }

  &__item {
    flex: 1;
    margin-bottom: $spacer;
    align-self: stretch; /* [2] */

    @include media-breakpoint-up(sm) {
      flex: 1 0 30%; /* [3] */
      margin-right: math.div($spacer, 2);
      margin-left: math.div($spacer, 2);
      max-width: calc(33% - #{$spacer}); /* [3] */
    }
  }

  &__link {
    display: block;
    height: 100%; /* [2] */
    padding: math.div($spacer, 2);
    font-weight: $btn-font-weight;
    color: $black;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 0 $black;

    @include transition($btn-transition);
    @include vd-pattern-dotted($pattern-dotted-green);

    &:hover {
      background-color: rgba($vd-primary-dark, 0.15);
      text-decoration: none;
    }

    &:focus {
      @include box-shadow($input-btn-focus-box-shadow);
    }

    &:active {
      top: 2px;
      left: 2px;
      box-shadow: 0 0 0 0 $black;
    }

    &:visited {
      color: currentcolor !important;
    }
  }
}
  • URL: /components/raw/button-tiles/_button-tiles.scss
  • Filesystem Path: src/components/02-molecules/button-tiles/_button-tiles.scss
  • Size: 1.5 KB

No notes defined.