Foehn Design System

Domain Item: Default 

<li class="vd-domain-item vd-domain-item--big">
    <a href="domaines" class="vd-link-invisible vd-domain-item__link h2">This is the title</a>
    <span class="vd-domain-item__text">
        <span class="sr-only">(Exemple de contenu: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="sr-only">)</span>
    </span>
</li>
 
<li class="vd-domain-item vd-domain-item--big{% if styleModifier %} {{ styleModifier }}{% endif %}">
  <a href="{% if url %}{{ url }}{% else %}domaines{% endif %}"
    class="vd-link-invisible vd-domain-item__link h2">
    {{- name -}}
  </a>
  <span class="vd-domain-item__text">
    <span class="sr-only">(Exemple de contenu: </span>
    {{- description -}}
    <span class="sr-only">)</span>
  </span>
</li>
 
{
  "name": "This is the title",
  "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
}
  • Content: 
    @charset 'UTF-8';
@use "sass:math";

/**
 * Teaser links
 *
 * 1. Override heading font-weight
 * 2. Let user click on the whole item
 * 3. Set focus style for the whole item
 * 4. Remove focus style on the link
 */

.vd-domain-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;

  &:focus-within {
    background: $vd-focus; /* [3] */
  }
}

.vd-domain-item__link {
  margin-top: math.div($spacer, 4);
  color: $black;
}

.vd-domain-item--big {
  .vd-domain-item__link {
    font-weight: 300; /* [1] */
  }
}

.vd-domain-item__text {
  color: $gray-500;
}

.vd-domain-item--small {
  .vd-domain-item__link {
    margin-bottom: 0 !important;
  }

  .vd-domain-item__text {
    margin-top: 0;
  }
}

.vd-domain-item__link-container {
  width: 100%;

  &:focus {
    outline: 0; /* [4] */
  }

  &:hover {
    text-decoration: none;

    > .vd-domain-item__link {
      text-decoration: underline;
    }
  }
}
  • URL: /components/raw/domain-item/_domain-item.scss
  • Filesystem Path: src/components/02-molecules/navigation/domain-item/_domain-item.scss
  • Size: 932 Bytes

No notes defined.