360Giving Design System - Components

Alert Tag: Anchor 

<a class="alert-tag alert-tag--anchor" href="#">
    <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
        </svg>
    </span>
    <span class="alert-tag__content">Learn more about the filters</span>
</a>
 
<a class="alert-tag alert-tag--anchor" href="#">
  <span class="alert-tag__icon">{% include '@info-icon' %}</span>
  <span class="alert-tag__content">Learn more about the filters</span>
</a>
 
{
  "label": "Learn more about this"
}
  • Content: 
    .alert-tag {
  display: block;
  border-radius: 6px;
  padding: 6px 10px;
  background: $yellow-tint;
  font-size: 13px;
  font-weight: 400;
  text-align: left;

  &__icon {
    display: inline-block;
    margin-right: 4px;
    margin-top: 3px;
    margin-bottom: -3px;
    vertical-align: middle;
  }

  a {
    text-decoration: underline;
    text-underline-offset: 1px;
    color: $black;

    &:hover {
      color: $black;
      text-decoration-style: dashed;
    }
  }

  // This is necessary to avoid underlining the icon
  &--anchor {
    &:hover {
      background: $yellow;
    }

    &:focus {
      outline-offset: -2px;
    }

    .alert-tag__content {
      text-underline-offset: 1px;
      color: $black;
    }

    &:hover {
      .alert-tag__content {
        color: $black;
        text-decoration: underline;
        text-decoration-style: dashed;
      }
    }
  }
}
  • URL: /components/raw/alert-tag/alert-tag.scss
  • Filesystem Path: src/components/02-elements/alert-tag/alert-tag.scss
  • Size: 888 Bytes

Use the –anchor variant if you want the whole tag to be clickable.

I’ve included the icons as NJK templates as well as SVGs as assets, so you can see the code of the SVG instead of it being obscured in a <img> tag.

The --general variant can take a custom label in its context.