link

The basic link element is underlined by default. It also supports the following variants:

  • primary: It's a link (not underlined) with an arrow on the right.
  • integrated: It a link without a background.
  • integrated highlight: It's an integrated link highlighted. It supports sizes from 'S' to '6XL'.
  • look-alike primary button: It's a link which looks and behave like a primary button.
  • look-alike secondary button: It's a link which looks and behave like a secondary button.

Each variant can:

  • have an icon either on the right or on the left
  • have an optional aria-label which needs to be set by the user
  • be disabled
table of content

component variations

inline demo

Open on blank page

Paragraph Text View standard
sit amet, consetetur Link label elitr,
sed diam nonumy eirmod

<p>
  Paragraph Text View standard
  <br />
  sit amet, consetetur
  <a href="/#" target="_self"><span>Link label</span></a>
  elitr,
  <br />
  sed diam nonumy eirmod
</p>

simple label (default with no icons)

Open on blank page
Link Label
<div class="a-link">
  <a
    aria-label="Open simple label (default with no icons) Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link Label</span>
  </a>
</div>

primary label (default with icon right)

Open on blank page
Link Label
<div class="a-link -icon">
  <a
    aria-label="Open primary label (default with icon right) Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
    </span>
  </a>
</div>

primary label with icon left

Open on blank page
Link Label
<div class="a-link -icon">
  <a
    aria-label="Open primary label with icon left Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    <span>Link Label</span>
  </a>
</div>

primary label disabled

Open on blank page
Link Label
<div class="a-link -disabled">
  <a
    aria-label="Open primary label disabled Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link Label</span>
  </a>
</div>

primary label disabled with icon right

Open on blank page
Link Label
<div class="a-link -disabled -icon">
  <a
    aria-label="Open primary label disabled with icon right Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon boschicon-bosch-ic-emoji-super-happy"></i>
    </span>
  </a>
</div>

primary label disabled with icon left

Open on blank page
Link Label
<div class="a-link -disabled -icon">
  <a
    aria-label="Open primary label disabled with icon left Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    <span>Link Label</span>
  </a>
</div>

integrated label

Open on blank page
Link Label
<div class="a-link a-link--integrated">
  <a
    aria-label="Open integrated label Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link Label</span>
  </a>
</div>

integrated label with icon right

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon">
  <a
    aria-label="Open integrated label with icon right Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon boschicon-bosch-ic-emoji-super-happy"></i>
    </span>
  </a>
</div>

integrated label with icon left

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon">
  <a
    aria-label="Open integrated label with icon left Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <i class="a-icon boschicon-bosch-ic-emoji-super-happy"></i>
    <span>Link Label</span>
  </a>
</div>

integrated label highlight with icon right, size S

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-s">
  <a
    aria-label="Open integrated label highlight with icon right, size S Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size M

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-m">
  <a
    aria-label="Open integrated label highlight with icon right, size M Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size L

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-l">
  <a
    aria-label="Open integrated label highlight with icon right, size L Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size XL

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-xl">
  <a
    aria-label="Open integrated label highlight with icon right, size XL Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size 2XL

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-2xl">
  <a
    aria-label="Open integrated label highlight with icon right, size 2XL Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size 3XL

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-3xl">
  <a
    aria-label="Open integrated label highlight with icon right, size 3XL Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size 4XL

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-4xl">
  <a
    aria-label="Open integrated label highlight with icon right, size 4XL Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size 5XL

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-5xl">
  <a
    aria-label="Open integrated label highlight with icon right, size 5XL Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

integrated label highlight with icon right, size 6XL

Open on blank page
Link Label
<div class="a-link a-link--integrated -icon highlight -size-6xl">
  <a
    aria-label="Open integrated label highlight with icon right, size 6XL Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon ui-ic-nosafe-lr-right-bold-small"></i>
    </span>
  </a>
</div>

Look-alike primary button

Open on blank page
Link Label
<div class="a-link a-link--button">
  <a
    aria-label="Open Look-alike primary button Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link Label</span>
  </a>
</div>

Look-alike primary button with icon right

Open on blank page
Link Label
<div class="a-link a-link--button -icon">
  <a
    aria-label="Open Look-alike primary button with icon right Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    </span>
  </a>
</div>

Look-alike primary button with icon left

Open on blank page
Link Label
<div class="a-link a-link--button -icon">
  <a
    aria-label="Open Look-alike primary button with icon left Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    <span>Link Label</span>
  </a>
</div>

Look-alike secondary button

Open on blank page
Link Label
<div class="a-link a-link--button-secondary">
  <a
    aria-label="Open Look-alike secondary button Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link Label</span>
  </a>
</div>

Look-alike secondary button with icon right

Open on blank page
Link Label
<div class="a-link a-link--button-secondary -icon">
  <a
    aria-label="Open Look-alike secondary button with icon right Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    </span>
  </a>
</div>

Look-alike secondary button with icon left

Open on blank page
Link Label
<div class="a-link a-link--button-secondary -icon">
  <a
    aria-label="Open Look-alike secondary button with icon left Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    <span>Link Label</span>
  </a>
</div>

Look-alike integrated button

Open on blank page
Link Label
<div class="a-link a-link--button-integrated">
  <a
    aria-label="Open Look-alike integrated button Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link Label</span>
  </a>
</div>

Look-alike integrated button with icon right

Open on blank page
Link Label
<div class="a-link a-link--button-integrated -icon">
  <a
    aria-label="Open Look-alike integrated button with icon right Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <span>Link</span>
    <span>
      Label
      <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    </span>
  </a>
</div>

Look-alike integrated button with icon left

Open on blank page
Link Label
<div class="a-link a-link--button-integrated -icon">
  <a
    aria-label="Open Look-alike integrated button with icon left Link Label"
    href="https://www.bosch.com"
    target="_self"
  >
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    <span>Link Label</span>
  </a>
</div>

large link demo

Open on blank page
Link label
<div class="-size-3xl">
  <div class="a-link -icon">
    <a href="#" target="_self">
      <span>Link</span>
      <span>
        label
        <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
      </span>
    </a>
  </div>
</div>

line break behavior demo

Open on blank page

Auto width


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
<div style="width:400px;display:flex;flex-wrap:wrap">
  <p style="flex:0 0 100%">Inside fixed-width containers</p>
  <div style="padding-right:1rem;flex:1 0 50%">
    <div class="a-link -icon">
      <a href="#" target="_self">
        <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
        <span>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy
        </span>
      </a>
    </div>
  </div>
  <div style="padding-left:1rem;flex:1 0 50%">
    <div class="a-link -icon">
      <a href="#" target="_self">
        <span>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        </span>
        <span>
          nonumy
          <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
        </span>
      </a>
    </div>
  </div>
</div>
<br />
<p>Auto width</p>
<br />
<div class="a-link -icon">
  <a href="#" target="_self">
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    <span>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    </span>
  </a>
</div>
<br />
<div class="a-link -icon">
  <a href="#" target="_self">
    <span>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </span>
    <span>
      nonumy
      <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    </span>
  </a>
</div>

additional content

styles SCSS

/* stylelint-disable no-descending-specificity */
/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable a11y/line-height-is-vertical-rhythmed */

a,
.a-link {
  span:last-of-type:not(:first-of-type) {
    display: inline-block;
  }

  .a-icon {
    display: inline-block;
    font-size: calc(var(--font-size) * var(--line-height));
    line-height: 1;
    margin-right: calc(var(--font-size) * var(--line-height) / 3);
    vertical-align: bottom;
  }

  span .a-icon {
    margin-left: calc(var(--font-size) * var(--line-height) / 3);
    margin-right: unset;
  }
}

a {
  display: inline;
  color: var(--minor-accent__enabled__front__default);

  span + span {
    // This is needed for inline links to be completly underlined. it will be overwritten for .a-link later on
    text-decoration: underline;
  }

  &:hover {
    color: var(--minor-accent__enabled__front__hovered);
  }

  &:active {
    color: var(--minor-accent__enabled__front__pressed);
  }

  &:focus-visible {
    @include focus-outside;
  }
}

.a-link {
  position: relative;
  display: block;
  width: fit-content;
  color: var(--minor-accent__enabled__front__default);

  /*
    The next block is needed for multi-line-links to have the correct padding.
    It should only apply to links with an icon and iconPosition = left.
    */
  > a {
    > i {
      position: absolute;

      + span {
        display: inline-block;

        /*
          This calculation is needed to get the correct spacing between the icon and the text.
          Since the icon is positioned 'absolute' in this case, we need to add the icon's width
          to the default spacing between the icon and the link.
        */
        --icon-size: calc(1em * var(--line-height));
        --default-spacing: calc(1em * var(--line-height) / 3);

        padding-left: calc(var(--icon-size) + var(--default-spacing));
      }
    }
  }

  &:not(.-icon, .a-link--button, .a-link--button-secondary, .a-link--integrated, .-disabled) a {
    text-decoration: underline;
  }

  a {
    display: inline-block;
    color: currentColor;
    text-decoration: none;

    span,
    &:visited {
      text-decoration: none;
    }
  }

  &:hover {
    color: var(--minor-accent__enabled__front__hovered);

    a {
      text-decoration: underline;

      span:last-of-type:not(:first-of-type) {
        text-decoration: underline;
      }

      > i + span {
        text-decoration: underline;
      }
    }
  }

  &:active {
    color: var(--minor-accent__enabled__front__pressed);
  }

  &.-disabled,
  &.-disabled a {
    pointer-events: none;
    color: var(--minor-accent__disabled__front__default);
  }
}

.a-link--integrated {
  a {
    color: var(--integrated__enabled__front__default);

    &:hover {
      color: var(--integrated__enabled__front__hovered);
    }

    &:active {
      color: var(--integrated__enabled__front__pressed);
    }
  }

  &.-disabled,
  &.-disabled a {
    pointer-events: none;
    color: var(--integrated__disabled__front__default);
  }

  &.highlight:hover {
    a,
    span:last-of-type:not(:first-of-type) {
      text-decoration: none;
    }
  }
}

.a-link--button,
%a-link--button {
  background-color: var(--major-accent__enabled__fill__default);
  color: var(--major-accent__enabled__front__default);
  cursor: pointer;

  a {
    color: currentColor;
    padding: 0.75rem 1rem;
  }

  &:hover {
    background-color: var(--major-accent__enabled__fill__hovered);
    color: var(--major-accent__enabled__front__default);

    a {
      color: currentColor;
      text-decoration: none;

      span,
      > i + span,
      span:last-of-type:not(:first-of-type) {
        text-decoration: none;
      }
    }
  }

  &:active {
    background-color: var(--major-accent__enabled__fill__pressed);
  }

  &.-disabled {
    background-color: var(--major-accent__disabled__fill__default);
    color: var(--major-accent__disabled__front__default);

    a {
      color: currentColor;
    }
  }
}

.a-link--button-secondary {

  @extend %a-link--button;

  background-color: var(--minor-accent__enabled__fill__default);
  color: var(--minor-accent__enabled__front__default);
  border: 1px solid var(--minor-accent__enabled__front__default);

  &:hover {
    background-color: var(--minor-accent__enabled__fill__hovered);
    color: var(--minor-accent__enabled__front__hovered);
    border-color: var(--minor-accent__enabled__front__hovered);

    a {
      span,
      > i + span,
      span:last-of-type:not(:first-of-type) {
        text-decoration: none;
      }
    }
  }

  &:active {
    background-color: var(--minor-accent__enabled__fill__pressed);
    color: var(--minor-accent__enabled__front__pressed);
    border-color: var(--minor-accent__enabled__front__pressed);
  }

  a:focus-visible {
    --focus-offset-inner: 1px;
    --focus-offset-outer: 4px;
  }

  &.-disabled {
    background-color: var(--minor-accent__disabled__fill__default);
    color: var(--minor-accent__disabled__front__default);
    border-color: var(--minor-accent__disabled__front__default);
  }
}

.a-link--button-integrated {

  @extend %a-link--button;

  a:focus-visible {
    @include focus-inside;
  }

  // we need here for some reasons a very specific override
  &.a-link a {
    text-decoration: none;
  }

  &.a-link {
    a {
      padding: 0.75rem;
    }

    span:first-of-type:last-of-type {
      .a-icon:first-of-type:last-of-type {
        margin: 0;
      }
    }
  }

  color: var(--integrated__enabled__front__default);
  background-color: var(--integrated__enabled__fill__default);

  &:hover {
    color: var(--integrated__enabled__front__hovered);
    background-color: var(--integrated__enabled__fill__hovered);

    a {
      span,
      > i + span,
      span:last-of-type:not(:first-of-type) {
        text-decoration: none;
      }
    }
  }

  &:active {
    color: var(--integrated__enabled__front__pressed);
    background-color: var(--integrated__enabled__fill__pressed);
  }

  &.-disabled {
    color: var(--integrated__disabled__front__default);
    background-color: var(--integrated__disabled__fill__default);
  }
}