Baden-Württemberg Stiftung
Documentation Components
  • Colors
  • Fonts
  • Übersicht
    • Breadcrumb
    • Button
    • CTA-Link
    • Checkbox
    • Filter-Tag
    • Headline
    • Highlight Letter
    • Icon-Button
    • Icon-Link
    • Image
    • Info
    • Input
    • Label
    • Links
    • Logo
    • Meta Info
    • Picture
    • Placeholder
    • Quote
    • Radio
    • Radio-Switch
    • Select
    • Select Multiple
    • Skip to content
    • Sort
    • Tooltip
    • Video
    • Contact-Box
    • Figure
    • Figure-Grid
    • Filter-Tag-Group
    • Form Group
    • Form List Filter
    • Form-Search
    • Gallery
    • Iconbox
    • Iframe
    • Infobox
    • Jumpbox
    • Language-Nav
    • Link Tooltip
    • Link-list
    • List-Item
    • Login
    • Logo Group
    • Mission-Card
    • Navigation Teaser
    • Overlay-Teaser
    • Page Navigation
    • Pagination
    • Picto-Group
    • Tableiste
    • Teaser
    • Teilen
    • Text
    • Textbox
    • To-Top
    • Accordion
    • Article Header
    • Contact-Overview
    • Content-Carousel
    • Content-Detail
    • Databox
    • Detail Tabs
    • Footer
    • Formular
    • Header
    • Link Collection
    • List
    • Mission-Card-Slider
    • Mission-Card-Wrapper
    • Overlay-Teaser-Grid
    • Overview-Teaser
    • Overview-Text & Image
    • QuickInfo
    • Quiz
    • Quote-Slider
    • Related-Items
    • Scope List
    • Stage-Detail
    • Stage-Hero
    • Stage-Mission
    • Story-Module
    • Teaser-Grid
    • Teaser-Slider
    • Text & Image
    • Text & Images
    • image-wall
  1. Styleguide
  2. BW Stipendium
  3. Atoms
  4. Links

Links @link

Approved

Variants

  • Internal textlink
  • External textlink
  • Textlink with arrow
  • Download textlink

#
Internal textlink @link--internal

Vorschau in eignem Tab anzeigen
  • HTML
  • Context
<a class="link" href="#">Internal Link</a>
{
  "link": "#",
  "text": "Internal Link"
}

#
External textlink @link--external

Vorschau in eignem Tab anzeigen
  • HTML
  • Context
<a class="link link--external" href="#" rel="noopener noreferrer" target="_blank">external Link</a>
{
  "external": true,
  "link": "#",
  "text": "external Link"
}

#
Textlink with arrow @link--arrow

Vorschau in eignem Tab anzeigen
  • HTML
  • Context
<a class="link link--arrow" href="#">Arrow Link</a>
{
  "link": "#",
  "text": "Arrow Link",
  "arrow": true
}

#
Download textlink @link--download

Vorschau in eignem Tab anzeigen
  • HTML
  • Context
<a class="link link--download" href="#" target="_blank" download="download.pdf">download-Link (PDF, 12KB)</a>
{
  "download": "download.pdf",
  "link": "#",
  "text": "download-Link (PDF, 12KB)"
}