Davidson Styleguide

Link 

<!-- Default -->
<a href="http://www.example.com/" class="">Default Link Text</a>


<!-- Underline -->
<a href="http://www.example.com/" class="link--underline">Default Link Text</a>


<!-- Underline Verbose Example -->
<a href="http://www.example.com/" class="link--underline">Underline link that is very long to test how the underline behaves when the link wraps to multiple lines</a>


<!-- Fancy -->
<a href="http://www.example.com/" class="link--fancy">Default Link Text</a>


<!-- Fancy Verbose Example -->
<a href="http://www.example.com/" class="link--fancy">This fancy link is very long with many words and will probably wrap to two lines occasionally</a>


<!-- Fancy Reverse -->
<a href="http://www.example.com/" class="link--fancy-reverse">Default Link Text</a>


<!-- Hover Highlight -->
<a href="http://www.example.com/" class="link--hover-highlight">Default Link Text</a>


<!-- Hover Highlight Verbose Example -->
<a href="http://www.example.com/" class="link--hover-highlight">Hover highlight link that is very long to test how the behavior when the link wraps to multiple lines</a>


<!-- Button Link -->
<a href="http://www.example.com/" class="button button">Default Link Text</a>


<!-- Button Emphasis -->
<a href="http://www.example.com/" class="button button--emphasis">Default Link Text</a>


<!-- Button Utility -->
<a href="http://www.example.com/" class="button button--utility">Default Link Text</a>


<!-- Button Transparent -->
<a href="http://www.example.com/" class="button button--transparent">Default Link Text</a>


<!-- Button Small -->
<a href="http://www.example.com/" class="button button--small">Default Link Text</a>


<!-- Button Large -->
<a href="http://www.example.com/" class="button button--large">Default Link Text</a>


<!-- Button Arrow -->
<a href="http://www.example.com/" class="button button--arrow">Default Link Text</a>


<!-- Email -->
<a href="mailto:example@example.com" class="">example@example.com</a>


<!-- Phone -->
<a href="tel:1235555555" class="">(123) 555-5555</a>


{% if link is not empty %}
<a href="{{ link.url }}" {{ link.attrs|attr_list }} class="{{ link.variant }}">{{ link.title }}</a>
{% endif %}
 
/* Default */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text"
  }
}


/* Underline */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "link--underline"
  }
}


/* Underline Verbose Example */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Underline link that is very long to test how the underline behaves when the link wraps to multiple lines",
    "variant": "link--underline"
  }
}


/* Fancy */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "link--fancy"
  }
}


/* Fancy Verbose Example */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "This fancy link is very long with many words and will probably wrap to two lines occasionally",
    "variant": "link--fancy"
  }
}


/* Fancy Reverse */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "link--fancy-reverse"
  }
}


/* Hover Highlight */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "link--hover-highlight"
  }
}


/* Hover Highlight Verbose Example */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Hover highlight link that is very long to test how the behavior when the link wraps to multiple lines",
    "variant": "link--hover-highlight"
  }
}


/* Button Link */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "button button"
  }
}


/* Button Emphasis */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "button button--emphasis"
  }
}


/* Button Utility */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "button button--utility"
  }
}


/* Button Transparent */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "button button--transparent"
  }
}


/* Button Small */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "button button--small"
  }
}


/* Button Large */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "button button--large"
  }
}


/* Button Arrow */
{
  "link": {
    "url": "http://www.example.com/",
    "title": "Default Link Text",
    "variant": "button button--arrow"
  }
}


/* Email */
{
  "link": {
    "url": "mailto:example@example.com",
    "title": "example@example.com"
  }
}


/* Phone */
{
  "link": {
    "url": "tel:1235555555",
    "title": "(123) 555-5555"
  }
}
  • Content: 
    .link--underline,
.editorial__content a:not(.button) {
  @include underline-link;
  font-weight: 700;
}

.link--fancy-reverse,
.editorial__content .link--fancy-reverse {
  &::after {
    left: .25em;
    content: $icon-angle-left;
  }
}

// We include the editorial link styles here
// because ".editorial a" has styles that implement
// the underline. 
.link--fancy,
.link--fancy-reverse,
.editorial__content .link--fancy,
.editorial__content .link--fancy-reverse {
  @include link-fancy;
}

// Tweak the font size
.editorial__content .link--fancy,
.editorial__content .link--fancy-reverse {
  @include rr-font-compute(l, tight);
}

.link--hover-highlight,
.editorial__content .link--hover-highlight {
  @include link-hover-highlight;
}

// card style markup. This is a placeholder to make
// the drupal styles more attractive
.block-link {
  &:link,
  &:visited {
    color: color(davidson-black);
    text-decoration: none;
  }

  &:hover,
  &:active {
    color: color(davidson-black);
    text-decoration: none;

    .headline-group {
      color: color(dark-teal);
    }
  }
}
  • URL: /components/raw/link/link.scss
  • Filesystem Path: patterns/atoms/text/link/link.scss
  • Size: 1.1 KB

The library provides several link styles for use in different patterns.

The underline style is automatically used in editorial content areas and other places that benefit from this design feature.

The fancy link can be used to call attention to important links within a text region. You can use the fancy link style on a single, standalone link, or on short lists of links.

Use link modifiers judiciously! Too many can make it difficult for users to read the page and find the information they need.