Design system
  • Design
  • Components
  • Patterns
  • Utilities
  • Get started

Utilities

  • 0Overview
  • 1Badge
  • 2Border
  • 3Breadcrumb
  • 4Button
  • 5Center utility classes
  • 6Checkbox
  • 7Chip
  • 8Disabled
  • 9Dropdown
  • 10Error
  • 11Expander
  • 12Form
  • 13Icon
  • 14Input
  • 15Link
    • 15.1Basic links
    • 15.2Basic links
    • 15.3Default Link
    • 15.4Default and secondary links:
    • 15.5Section nav links
    • 15.6Navigation links
    • 15.6Navigation links:
    • 15.7Section nav links
    • 15.8Toolbar links
    • 15.8Toolbar links:
  • 16List
  • 17Loader
  • 18Notification
  • 19Radio
  • 20Row
  • 21Row-grid
  • 22Row-single
  • 23Select
  • 24Spacing
  • 25Status
  • 26Tabstrip
  • 27Text
  • 28Tooltip
  • 29Typography
  • 30Visibility
  • 31Width

15 #Link Link

15.1 #Link.basic Basic links

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Categories and tags
Html
    <span tabindex="0" class="sf-link -basic">Categories and tags</span><br>

15.2 #Link.basic-links Basic links

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Categories and tags
Html
   <span tabindex="0" class="sf-link -basic">Categories and tags</span><br>

15.3 #Link.default Default Link

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Default and secondary links

Default link
Secondary link
Html
 <a href="#">Default link</a><br>
 <a class="-secondary">Secondary link</a>

15.4 #Link.default-secondary Default and secondary links:

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Default link
Secondary link
Html
    <span tabindex="0" class="sf-link">Default link</span><br>
    <span tabindex="0" class="sf-link -secondary">Secondary link</span>

15.5 #Link.nav-links Section nav links

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Categories and tags
Search engine optimi...
Social media
Html
    <span tabindex="0" class="sf-link -side-secondary">Categories and tags</span><br>
    <span tabindex="0" class="sf-link -side-secondary -active">Search engine optimi...</span><br>
    <span tabindex="0" class="sf-link -side-secondary">Social media</span><br>

15.6 #Link.navigation Navigation links

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Navigation link
Settings link
Html
    <span tabindex="0" class="sf-link -side">Navigation link</span><br>
    <span tabindex="0" class="sf-link -side -active">Settings link</span>

15.6 #Link.navigation Navigation links:

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Navigation link
Settings link
Html
    <span tabindex="0" class="sf-link -side">Navigation link</span><br>
    <span tabindex="0" class="sf-link -side -active">Settings link</span>

15.7 #Link.section-nav-links Section nav links

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Categories and tags
Search engine optimi...
Social media
Html
   <a class="-side-secondary" href="#">Categories and tags</a><br>
   <a class="-side-secondary -active">Search engine optimi...</a><br>
   <a class="-side-secondary" href="#">Social media</a><br>

15.8 #Link.toolbar-links Toolbar links

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Categories and tags
Categories and tags
Html
    <div class="sf-top-toolbar" style="position: static;">
      <span tabindex="0" class="sf-link -top-toolbar">Categories and tags</span><br>
      <span tabindex="0" class="sf-link -top-toolbar -active">Categories and tags</span><br>
    </div>

15.8 #Link.toolbar-links Toolbar links:

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Categories and tags
Categories and tags
Html
    <div class="sf-top-toolbar" style="position: static;">
      <span tabindex="0" class="sf-link -top-toolbar">Categories and tags</span><br>
      <span tabindex="0" class="sf-link -top-toolbar -active">Categories and tags</span><br>
    </div>