PSI Software SE Design Library

Link

Component: Link

Implementation notes

By calling the function segmentEmailAdresses(), “breaking points” (``) are automatically added to the labels of existing email addresses.

Rules:

  • By default, line breaks can occur after hyphens.
  • Line breaks can occur directly after the @ symbol.
  • Everything after the @ symbol remains unchanged.
  • Everything before the @ symbol can be broken directly after periods if the following applies:
    • The word part after the period is longer than 5 characters.
    • The word part before the period is not at the beginning or longer than 5 characters.

Examples:

name@<wbr>my-domain.com
firstname.<wbr>lastname@<wbr>my-domain.com
f.lastname@<wbr>my-domain.com
firstname.l@<wbr>my-domain.com
firstname.a.<wbr>lastname@<wbr>my-domain.com
<!-- Default -->
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>


<!-- With Target -->
<a href="#" class="link" target="_blank"><span class="link-label" data-annotation="öffnet in neuer Registerkarte">Link</span></a>


<!-- Annotation -->
<a href="#" class="link"><span class="link-label" data-annotation="PDF-Datei">Link mit einer Anmerkung</span></a>


<!-- Download -->
<a href="#" class="link" download><span class="link-label" data-annotation="PDF-Datei herunterladen">Link</span></a>


<!-- External -->
<a href="https://" class="link" rel="external"><span class="link-label">Link zu anderer Website</span></a>


<!-- Email -->
<a href="mailto:firstname.a.lastname@my-domain.com" class="link"><span class="link-label">firstname.a.lastname@my-domain.com</span></a>


<!-- Phone -->
<a href="tel:0123-456789" class="link"><span class="link-label">Link mit Telefonnummer (für Mobiles)</span></a>


<!-- Stand-alone -->
<a href="#" class="link is-stand-alone"><span class="link-label">Alleinstehender Link</span></a>


<!-- With Icon After -->
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
        <use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
    </svg>
</a>


<!-- With Icon Before -->
<a href="#" class="link is-stand-alone"><svg class="icon is-arrow-right">
        <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
    </svg>
    <span class="link-label">Link mit Icon</span></a>


<!-- Icon Only -->
<a href="#" class="link is-stand-alone is-icon-only" title="Link mit ausgebelendetem Text"><svg class="icon is-download-simple">
        <use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
    </svg>
    <span class="link-label">Link mit ausgebelendetem Text</span></a>


<!-- Button -->
<button class="link"><span class="link-label">Button styled as Link</span></button>


<!-- Button Disabled -->
<a class="link"><span class="link-label">Disabled Button</span></a>


<!-- Doc Only -->
<div class="doc-section">

    <h2 class="doc-section-title">Link</h2>

    <div class="doc-notes">
        <ul>
            <li><strong>Immer sogenannte <em>sprechende Links</em> verwenden.</strong> D.h. immer das Ziel des Links im Link-Text beschreiben und nie Worte wie <em>„hier klicken“</em>, <em>„mehr“</em> o.ä. als Link-Text benutzen.
                <ul>
                    <li>Richtig: <em>„Hier geht es <a href="#">zur Design Library</a>.“</em></li>
                    <li>Falsch: <em>„Um zu unserer Design Library zu gelangen, klicken Sie <a href="#">hier</a>.“</em></li>
                </ul>
            </li>
            <li>Der Ausdruck <em>„weiterlesen“</em> sollte ebenfalls vermieden werden.
                <ul>
                    <li>Richtig: <em>„<a href="#">Erfahren Sie mehr zum Thema Sprechende Links.</a>“</em></li>
                    <li>Falsch: <em>„<a href="#">Weiterlesen …</a>“</em></li>
                </ul>
            </li>
            <li>Im Link-Text sollten (wenn möglich) die für Suchmaschienen relevanten Schlüsselworte auftauchen:
                <ul>
                    <li>Richtig: <em>„<a href="#">Zum Thema Sprechende Links in der Design Library</a>“</em></li>
                    <li>Falsch: <em>„<a href="#">Mehr dazu in der Design Library</a>“</em></li>
                </ul>
            </li>
        </ul>
    </div>

    <section class="doc-variant">

        <header class="doc-variant-header">
            <h2 class="doc-variant-title">Default</h2>
        </header>

        <p>Biodiesel <a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
            locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh. Bitters <a href="#" class="link" target="_blank"><span class="link-label" data-annotation="öffnet in neuer Registerkarte">Link</span></a>
            sartorial gastropub, hashtag four loko skateboard chillwave deep. <a href="https://" class="link" rel="external"><span class="link-label">Link zu anderer Website</span></a>
            normcore vegan tilde vinyl small batch <a href="#" class="link"><span class="link-label" data-annotation="PDF-Datei">Link mit einer Anmerkung</span></a>
            organic Marfa migas <a href="#" class="link" download><span class="link-label" data-annotation="PDF-Datei herunterladen">Link</span></a>
            Austin Schlitz. Echo Park bespoke tattooed <a href="mailto:firstname.a.lastname@my-domain.com" class="link"><span class="link-label">firstname.a.lastname@my-domain.com</span></a>
            Master cleanse actually.</p>

    </section>

    <section class="doc-variant">

        <header class="doc-variant-header">
            <h2 class="doc-variant-title">In Small Copy</h2>
        </header>

        <p class="copy is-small">Biodiesel <a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
            locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz.</p>

    </section>

    <section class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Stand alone</h2>

            <div class="doc-variant-configuration">
            </div>

        </header>

        <a href="#" class="link is-stand-alone"><span class="link-label">Alleinstehender Link</span></a>

    </section>
    <section class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Icon</h2>

            <div class="doc-variant-configuration">
            </div>

        </header>

        <a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
                <use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
            </svg>
        </a>

    </section>
    <section class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Icon</h2>

            <div class="doc-variant-configuration">
            </div>

        </header>

        <a href="#" class="link is-stand-alone"><svg class="icon is-arrow-right">
                <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
            </svg>
            <span class="link-label">Link mit Icon</span></a>

    </section>
    <section class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Icon only</h2>

            <div class="doc-variant-configuration">
                <ul class="doc-variant-modifiers">
                    <li></li>
                    <li>is-icon-only</li>
                </ul>
            </div>

        </header>

        <a href="#" class="link is-stand-alone is-icon-only" title="Link mit ausgebelendetem Text"><svg class="icon is-download-simple">
                <use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
            </svg>
            <span class="link-label">Link mit ausgebelendetem Text</span></a>

    </section>
    <section class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Button styled as Link</h2>

            <div class="doc-variant-configuration">
                <ul class="doc-variant-modifiers">
                    <li>link</li>
                </ul>
            </div>

        </header>

        <button class="link"><span class="link-label">Button styled as Link</span></button>

        <button class="link" disabled="disabled"><span class="link-label">Disabled Button</span></button>

    </section>
    <section class="doc-variant">

        <header class="doc-variant-header">

            <h2 class="doc-variant-title">Phone</h2>

            <div class="doc-variant-configuration">
            </div>

            <div class="doc-variant-notes">Verlinkte Telefonnummern werden nur in mobilen Viewports ausgezeichnet.</div>

        </header>

        <a href="tel:0123-456789" class="link"><span class="link-label">Link mit Telefonnummer (für Mobiles)</span></a>

    </section>

</div>


<!-- Default -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- With Target -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Annotation -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Download -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- External -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Email -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Phone -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Stand-alone -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- With Icon After -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- With Icon Before -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Icon Only -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Button -->
<button class="link{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-disabled}} disabled="disabled"{{/if~}}
    {{~#onclick}} onclick="{{.}}"{{/onclick~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#label}}<span class="link-label">{{{.}}}</span>{{/label~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</button>

<!-- Button Disabled -->
<a {{#url}}href="{{.}}"{{/url~}}
    class="link{{#if is-stand-alone}} is-stand-alone{{/if}}{{#if is-icon-only}} is-icon-only{{/if}}{{#modifier}} {{{.}}}{{/modifier}}"
    {{~#target}} target="{{.}}"{{/target~}}
    {{~#if is-download}} download{{/if~}}
    {{~#if is-icon-only}} title="{{label}}"{{/if~}}
    {{~#if is-external}} rel="external"{{/if~}}
>
    {{~#if icon.is-before}}{{#icon~}}
        {{~render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/if~}}
    {{~#if label}}<span class="link-label"{{#annotation}} data-annotation="{{.}}"{{/annotation}}>{{{label}}}</span>{{/if~}}
    {{~#unless icon.is-before}}{{#icon~}}
        {{render '@icon' (contextData '@link' this) merge=true~}}
    {{~/icon}}{{/unless~}}
</a>

<!-- Doc Only -->
<div class="doc-section">

    <h2 class="doc-section-title">Link</h2>

    <div class="doc-notes">
{{#markdown}}

+ **Immer sogenannte *sprechende Links* verwenden.** D.h. immer das Ziel des Links im Link-Text beschreiben und nie Worte wie *„hier klicken“*, *„mehr“* o.ä. als Link-Text benutzen.
    + Richtig: *„Hier geht es [zur Design Library](#).“*
    + Falsch: *„Um zu unserer Design Library zu gelangen, klicken Sie [hier](#).“*
+ Der Ausdruck *„weiterlesen“* sollte ebenfalls vermieden werden.
    + Richtig: *„[Erfahren Sie mehr zum Thema Sprechende Links.](#)“*
    + Falsch: *„[Weiterlesen …](#)“*
+ Im Link-Text sollten (wenn möglich) die für Suchmaschienen relevanten Schlüsselworte auftauchen:
    + Richtig: *„[Zum Thema Sprechende Links in der Design Library](#)“*
    + Falsch: *„[Mehr dazu in der Design Library](#)“*
{{/markdown}}
    </div>

    <section class="doc-variant">

        <header class="doc-variant-header">
            <h2 class="doc-variant-title">Default</h2>
        </header>

        <p>Biodiesel {{render '@link'}} locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh. Bitters {{render '@link--with-target'}} sartorial gastropub, hashtag four loko skateboard chillwave deep. {{render '@link--external'}} normcore vegan tilde vinyl small batch {{render '@link--annotation'}} organic Marfa migas {{render '@link--download'}} Austin Schlitz. Echo Park bespoke tattooed {{render '@link--email'}} Master cleanse actually.</p>

    </section>

    <section class="doc-variant">

        <header class="doc-variant-header">
            <h2 class="doc-variant-title">In Small Copy</h2>
        </header>

        <p class="copy is-small">Biodiesel {{render '@link'}} locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz.</p>

    </section>

        {{#variants}}
    <section class="doc-variant">

        <header class="doc-variant-header">

                {{#title}}
            <h2 class="doc-variant-title">{{{.}}}</h2>
                {{/title}}

            <div class="doc-variant-configuration">
                    {{#if modifiers}}
                <ul class="doc-variant-modifiers">
                        {{#modifiers}}
                    <li>{{{.}}}</li>
                        {{/modifiers}}
                </ul>
                    {{/if}}
            </div>

                {{#annotations}}
            <div class="doc-variant-notes">{{{.}}}</div>
                {{/annotations}}

        </header>

        {{#samples}}
            {{#if url}}
                {{render '@link' (contextData '@link' this) merge=true}}
            {{/if}}
            {{#unless url}}
                {{render '@link--button' (contextData '@link' this) merge=true}}
            {{/unless}}
        {{/samples}}

    </section>
        {{/variants}}

</div>
 
/* Default */
{
  "label": "sprechender Link im Text",
  "url": "#"
}


/* With Target */
{
  "label": "Link",
  "url": "#",
  "target": "_blank",
  "annotation": "öffnet in neuer Registerkarte"
}


/* Annotation */
{
  "label": "Link mit einer Anmerkung",
  "url": "#",
  "annotation": "PDF-Datei"
}


/* Download */
{
  "label": "Link",
  "url": "#",
  "annotation": "PDF-Datei herunterladen",
  "is-download": true
}


/* External */
{
  "label": "Link zu anderer Website",
  "url": "https://",
  "is-external": true
}


/* Email */
{
  "label": "firstname.a.lastname@my-domain.com",
  "url": "mailto:firstname.a.lastname@my-domain.com"
}


/* Phone */
{
  "label": "Link mit Telefonnummer (für Mobiles)",
  "url": "tel:0123-456789"
}


/* Stand-alone */
{
  "label": "Alleinstehender Link",
  "url": "#",
  "is-stand-alone": true
}


/* With Icon After */
{
  "label": "Link mit Icon",
  "url": "#",
  "is-stand-alone": true,
  "icon": {
    "id": "download-simple",
    "weight": "bold"
  }
}


/* With Icon Before */
{
  "label": "Link mit Icon",
  "url": "#",
  "is-stand-alone": true,
  "icon": {
    "is-before": true,
    "id": "arrow-right",
    "weight": "bold"
  }
}


/* Icon Only */
{
  "label": "Link mit ausgebelendetem Text",
  "url": "#",
  "is-stand-alone": true,
  "is-icon-only": true,
  "icon": {
    "is-before": true,
    "id": "download-simple",
    "weight": "bold"
  }
}


/* Button */
{
  "label": "Button styled as Link",
  "url": null
}


/* Button Disabled */
{
  "label": "Disabled Button",
  "url": null,
  "is-disabled": true
}


/* Doc Only */
{
  "label": "sprechender Link im Text",
  "url": "#",
  "variants": [
    {
      "title": "Stand alone",
      "modifiers": null,
      "samples": {
        "label": "Alleinstehender Link",
        "url": "#",
        "is-stand-alone": true
      }
    },
    {
      "title": "Icon",
      "modifiers": null,
      "samples": {
        "label": "Link mit Icon",
        "url": "#",
        "is-stand-alone": true,
        "icon": {
          "id": "download-simple",
          "weight": "bold"
        }
      }
    },
    {
      "title": "Icon",
      "modifiers": null,
      "samples": {
        "label": "Link mit Icon",
        "url": "#",
        "is-stand-alone": true,
        "icon": {
          "is-before": true,
          "id": "arrow-right",
          "weight": "bold"
        }
      }
    },
    {
      "title": "Icon only",
      "modifiers": [
        null,
        "is-icon-only"
      ],
      "samples": {
        "label": "Link mit ausgebelendetem Text",
        "url": "#",
        "is-stand-alone": true,
        "is-icon-only": true,
        "icon": {
          "is-before": true,
          "id": "download-simple",
          "weight": "bold"
        }
      }
    },
    {
      "title": "Button styled as Link",
      "modifiers": "link",
      "samples": [
        {
          "label": "Button styled as Link",
          "url": null
        },
        {
          "label": "Disabled Button",
          "url": null,
          "is-disabled": true
        }
      ]
    },
    {
      "title": "Phone",
      "annotations": "Verlinkte Telefonnummern werden nur in mobilen Viewports ausgezeichnet.",
      "samples": {
        "label": "Link mit Telefonnummer (für Mobiles)",
        "url": "tel:0123-456789"
      }
    }
  ]
}
  • Content: 
    import { renderEmailAdresses, segmentEmailAdresses } from "./_link.script";

renderEmailAdresses();
segmentEmailAdresses();
  • URL: /components/raw/link/_link.js
  • Filesystem Path: components/02-elements/link/_link.js
  • Size: 124 Bytes
  • Content: 
    function renderEmailAdresses () {

    /*
     * Replaces masked email addresses
     * Scheme for addresses "[name (at) domain (punkt) de]"
     */

    let defaults = {
        selectors: {
            email: ".epost",
        }
    }

        // Email adresses

    let getEmail = function(text) {

        let email = {
            label: text,
            href: ""
        };

        if (typeof text !== "string" || text === "") {
            return email;
        }

        email.label = email.label.replace(/ ?\(at\) ?/, "@");
        email.label = email.label.replace(/ ?\(punkt\) ?/, ".");

        email.href = email.label;

            // Email address in brackets

        if (email.label.search(/\[.*\]/) !== -1) {

            let results = email.label.match(/(.*?) ?\[(.*)\]/);

            email.href = results[2] ? results[2] : email.label;
            email.label = results[1] ? results[1] : email.label;

        }

        email.href = "mailto:" + email.href;

        return email;

    }

    let elements = document.querySelectorAll(defaults.selectors.email);

    for (let i = 0; i < elements.length; i++) {

        let element = elements[i],
            email = getEmail(element.innerText);

        element.innerText = email.label;

        if (element.title !== "") {
            email.href += "?subject=" + element.title;
        }

        if (email.href) {

            let link =  document.createElement('a');

            link.setAttribute("href", email.href);
            link.innerText = email.label;

            element.innerText = "";
            element.appendChild(link);

        }

    }

}

function segmentEmailAdresses() {

    let addresses = document.querySelectorAll('a[href^="mailto:"]');

    addresses.forEach((address) => {

        let label = address.innerHTML;

        if (! label.match(/@/)) {
            return;
        }

        let [name, domain] = label.split(/@/);

        // Add word breaks to chunks beginning with period and greater than 5 characters
        name = name.replace(/\.(\w{5,})/g, ".<wbr>$1");

        // Remove word breaks to chunks at start smaller than 5 characters
        name = name.replace(/^([^>]*>)?(\w{1,4})\.<wbr>/g, "$1$2.");

        address.innerHTML = `${name}@<wbr>${domain}`;

    });

}

export {
    renderEmailAdresses,
    segmentEmailAdresses,
};
  • URL: /components/raw/link/_link.script.js
  • Filesystem Path: components/02-elements/link/_link.script.js
  • Size: 2.4 KB
  • Content: 
    $link_text-decoration-width: 2px !default;
$link_text-decoration-offset: 3px !default;

@import "_link.settings";
@import "_link.styles";

$link_states--standalone: (
    default: (
        background: linear-gradient(to left, $link_text-decoration-color, $link_text-decoration-color 50%, $link_text-decoration-color--hover 50%, $link_text-decoration-color--hover) no-repeat,
        background-size: 200% $link_text-decoration-width,
        background-position: 100% 100%,
        transition-property: background-position,
        transition-duration: $_transition-duration,
        text-decoration: none,
    ),
    hover: (
        transition-duration: $_transition-duration--in,
        background-position: 0 100%,
    ),
    focus: (
        background-image: linear-gradient(to left, transparent, transparent),
    ),
    active: (
        transition-duration: $_transition-duration--in,
        background-position: 0 100%,
    ),
    disabled: (
        background: linear-gradient(to left, $_action-accent-color--disabled, $_action-accent-color--disabled) no-repeat,
        background-position: 0 100%,
        background-size: 100% $link_text-decoration-width,
    ),
);

%link {

    @include not-on-desktop(){

        &:link {
            text-decoration-thickness: 1.5px;
        }

    }

}

%link--stand-alone {
    $inset-inline: .1em;

    font-weight: $_font-weight--bold;

    text-decoration: none !important;
    box-shadow: none;

    display: block;
    margin-inline: (-1 * $inset-inline);

    > span {
        @include state-styles($link_states--standalone, default);

        display: inline;
        padding-inline: $inset-inline;

        background-color: transparent;
    }

    > span + .icon {
        margin-left: .25em;
    }

    > .icon + span {
        margin-right: .25em;
    }

    @include action-states($link-states--standalone, $descendant: "> span");

    &:not([disabled]):not([aria-disabled=true]):focus-visible {
        $focus-inset: map.get(map.get($link-states, focus), margin-inline);
        margin-inline: calc(#{$focus-inset} - #{$inset-inline});
    }

    @include not-on-mobile(){

        &[href^="tel:"] > span {
            background: transparent !important;
            cursor: default !important;
        }

    }

}
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/02-elements/link/_link.scss
  • Size: 2.3 KB
  • Content: 
    $link-color: $_action-color !default;
$link-color--hover: $_action-color--hover !default;
$link-color--active: $_action-color--active !default;
$link-color--visited: $link-color !default; // Regard: rgba()-colors don’t work on :visited

$link_text-decoration-color: $_action-text-decoration-color !default;
$link_text-decoration-color--hover: $_action-text-decoration-color--hover !default;
$link_text-decoration-color--active: $_action-text-decoration-color--active !default;
$link_text-decoration-color--visited: $link_text-decoration-color !default;

$link_text-decoration-width: inherit !default;
$link_text-decoration-offset: inherit !default;

$link-states: (
    default: (
        color: $link-color,
        text-decoration: underline,
        text-decoration-color: $link_text-decoration-color,
        text-decoration-skip-ink: auto,
        text-decoration-thickness: $link_text-decoration-width,
        text-underline-offset: $link_text-decoration-offset,
        transition-property: (color, text-decoration-color),
        transition-duration: $_transition-duration--out,
    ),
    visited: ( // Please regard: Not all properties can be used for styling visited links
        color: $link-color--visited,
        text-decoration-color: $link_text-decoration-color--visited,
    ),
    hover: (
        color: $link-color--hover,
        text-decoration-color: $link_text-decoration-color--hover,
        transition-duration: $_transition-duration--in,
    ),
    focus: map.merge(
        (
            text-decoration-color: transparent,
            padding-inline: .2em,
            margin-inline: -.2em,
        ),
        $_focus_styles,
    ),
    active: (
        color: $link-color--active,
        text-decoration-color: $link_text-decoration-color--active,
    )
) !default;
  • URL: /components/raw/link/_link.settings.scss
  • Filesystem Path: components/02-elements/link/_link.settings.scss
  • Size: 1.8 KB
  • Content: 
    %link {
    display: inline;
    align-items: center;
    column-gap: .25em;

    &:link,
    &:visited {
        @include state-styles($link-states, default);
    }

    @if map.get($link-states, visited) {

        &:visited:not([href^="#"]) {
            @include state-styles($link-states, visited);
        }

    }

    @include action-states($link-states);

    &-label {

        &[data-annotation] {

            &::after {
                content: " (" attr(data-annotation) ")";
            }

        }

    }

    .is-icon-only > &-label {
        @extend %visually-hidden;
    }

    &[href^="tel:"] {
        white-space: nowrap;
    }

    @include not-on-mobile(){

        &[href^="tel:"]:not(:focus-visible) {
            background-color: transparent !important;
            color: $_text-color !important;
            box-shadow: none !important;
            text-decoration: none !important;
            cursor: default !important;
        }

    }

}

button:not([disabled]) {

    &.link {
        @include state-styles($link-states, default);
    }

}

%link--stand-alone {
    @extend %link;

    @include stack-spacing();

    display: flex;
    width: max-content;
    max-width: 100%;

    text-wrap: pretty;

    p > &::before {
        margin-top: 0;
    }

}

%link--external {

    %link-label:not([data-annotation]) {

        &::after {
            content: "\00a0\2197";
        }

    }

}

.link {
    @extend %link;

    &-label {
        @extend %link-label;
    }

    &[rel~="external"] {
        @extend %link--external;
    }

}

%link.is-stand-alone {
    @extend %link--stand-alone
}

button.link {
    @extend %link--stand-alone;
}
  • URL: /components/raw/link/_link.styles.scss
  • Filesystem Path: components/02-elements/link/_link.styles.scss
  • Size: 1.7 KB