<li class="vd-domain-item vd-domain-item--small">
    <a href="domaines#this%20is%20the%20title" class="vd-domain-item vd-domain-item--small vd-domain-item__link-container">
        <span class="vd-domain-item__link vd-link-invisible h4">This is the title</span>
        <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>
    </a>
</li>
<li class="vd-domain-item vd-domain-item--small{% if styleModifier %} {{ styleModifier }}{% endif %}">
  <a href="{% if url %}{{ url }}{% else %}domaines#{{ name | lower | urlencode }}{% endif %}"
     class="vd-domain-item vd-domain-item--small{% if styleModifier %} {{ styleModifier }}{% endif %} vd-domain-item__link-container">
    <span class="vd-domain-item__link vd-link-invisible h4">
      {{- name -}}
    </span>
    <span class="vd-domain-item__text">
      <span class="sr-only">(Exemple de contenu: </span>
      {{- description -}}
      <span class="sr-only">)</span>
    </span>
  </a>
</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.