# Link

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <section class="demo">
        <p>Dies ist <a href="#!">ein klassischer Text Link</a>.</p>
        <p><a class="link-teaser" href="#">Ein Teaser-Link</a></p>
        <p><a href="#" class="link-unstyled">Unstyled Link</a></p>
        <p><a class="link--muted" href="#">Muted Link</a></p>
        <h1>
            <a href="#">Eine Headline mit Link</a>
        </h1>
    </section>

    <section class="demo demo--inverted">
        <p><a class="link-teaser inverted-interaction-color" href="#">Link Teaser inverted</a></p>
    </section>

    <section class="demo demo--accented">
        <p><a class="link-teaser inverted-text-color" href="#">Link Teaser inverted</a></p>
    </section>

`
`

    <section class="demo">
        <p>Dies ist <a href="#!">ein klassischer Text Link</a>.</p>
        <p><a class="link-teaser" href="#">Ein Teaser-Link</a></p>
        <p><a href="#" class="link-unstyled">Unstyled Link</a></p>
        <p><a class="link--muted" href="#">Muted Link</a></p>
        <h1>
            <a href="#">Eine Headline mit Link</a>
        </h1>
    </section>

    <section class="demo demo--inverted">
        <p><a class="link-teaser inverted-interaction-color" href="#">Link Teaser inverted</a></p>
    </section>

    <section class="demo demo--accented">
        <p><a class="link-teaser inverted-text-color" href="#">Link Teaser inverted</a></p>
    </section>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      //
      // Default Link - used on all class-less link elements
      //

      a:not([class]) {
        color: $link-color;
        text-decoration: none;
        border-bottom: 1px solid $link-color;
        transition: standard-transition(background-color);

        &:focus,
        &:hover {
          background-color: $link-hover-color-light;
          outline: none;
        }

        &[href='mailto'] {
          hyphens: none;
        }
      }

      .link--muted {
        @extend %heading-font-bold;
        @extend %link-unstyled;

        font-size: $font-size-xs;
        color: $brand-muted;
      }

      .link-teaser {
        @extend %heading-font-heavy;
        @extend %link-unstyled;

        padding-bottom: 2px;

        font-size: $font-size-xs;
        color: $link-teaser-text-color;

        border-bottom: 3px solid $link-teaser-border-color;

        transition: standard-transition(background-color);

        &.inverted-text-color {
          color: $link-teaser-inverted-text-text-color;
          border-bottom: 3px solid $link-teaser-inverted-text-border-color;
        }

        &.inverted-interaction-color {
          color: $link-teaser-inverted-interaction-text-color;
          border-bottom: 3px solid $link-teaser-inverted-interaction-border-color;
        }
      }

      a.link-teaser {
        &:focus,
        &:hover {
          background-color: $link-hover-color-light;
        }
      }

      a.link-teaser.inverted-text-color {
        &:focus,
        &:hover {
          background-color: $link-hover-color-secondary;
        }
      }

      a.link-teaser.inverted-interaction-color {
        &:focus,
        &:hover {
          background-color: $link-hover-color-light;
        }
      }

  `
- URL: /components/raw/link/_link.scss
- Filesystem Path: components/05-atoms/text/link/_link.scss
- Size: 1.4 KB

- Handle: @link
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/text/link/link.html

No notes defined.