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
  • 16List
  • 17Loader
  • 18Notification
  • 19Radio
  • 20Row
  • 21Row-grid
  • 22Row-single
  • 23Select
  • 24Spacing
  • 25Status
  • 26Tabstrip
  • 27Text
  • 28Tooltip
  • 29Typography
  • 30Visibility
  • 31Width

18.8 #Notification.toolset-for-link Notification as toolset for link

Toggle example guides Toggle HTML markup

.sf-notification.-toolset.-black.-down

https://drive.google.com/drive/folders/
Html
    <div class="sf-notification -black -toolset -down">
         <div class="sf-notification__content">
             <span class="sf-notification__tool-link" title="Open link: https://drive.google.com/drive/folders/">https://drive.google.com/drive/folders/</span>
             <span class="sf-notification__tool-button"><i class="sf-icon -color-inherit -size-xs sf-fa sf-fa-external-link"></i></span>
             <span class="sf-notification__tool-separator"></span>
             <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-pencil"></i></span>
             <span class="sf-notification__tool-separator"></span>
             <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-unlink"></i></span>
         </div>
     </div>