links

Links

Links have basic styling for :hover :active and :visited by default. There's also a couple of classes you can use to make links more universally useful.

<div class="p1">
  <p> <a href="#">Standard link</a> </p>
  <p class="link"> Style something else to look like a link </p>
  <p> <a href="#" class="u">Use .u to force an underline</a> </p>
</div>
<div class="p1" style="background-color: #666;">
  <p> <a href="#" class="light">"Light" link for dark backgrounds</a> </p>
  <p> <a href="#" class="link-white">Forced white text link</a> </p>
</div>

Customizing links

Overwrite these variables in _custom_variables.scss to change these defaults.

$link-color:               $base-blue !default;
$link-hover-color:         $base-blue-soft !default;
$link-active-color:        $base-blue !default;
$link-visited-color:       $base-blue !default;
$link-light-color:         $base-blue-soft !default;
$link-light-hover-color:   $base-blue-light !default;
$link-light-active-color:  $base-blue-soft !default;
$link-light-visited-color: $base-blue-soft !default;

$link-transition-speed:    $transition-speed-base !default;

--- Optional customizations ---
$link-underline-option:        false !default;
$link-border-underline-option: false !default;
$link-transition-option:       true !default;
$link-underline-hover-option:  false !default;