@gitlab/ui/dist/components/base/avatar_link/avatar_link.documentation.js

GitLab UI Components

import examples from './examples';

var description = "## Avatar link\n\n`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same properties as the `<gl-link>` component and it works in the same way too. The main purpose of this component is to apply visual enhancements that makes evident that the user can interact with the avatar.\n\n**Using the component**\n\nWhen wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens\nthe border that surrounds the avatar image or fallback text when hovering over it.\n\n~~~vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar\n    :size=\"32\"\n    :src=\"avatarUrl\"\n  />\n</gl-avatar-link>\n~~~\n\nWhen wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines\nthe label and sub-label text when hovering over the avatar. It also applies the\nsame effects described in the first example.\n\n~~~vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar-labeled\n    :size=\"32\"\n    entity-name=\"GitLab\"\n    label=\"GitLab User\"\n    sub-label=\"@gitlab\"\n  />\n</gl-avatar-link>\n\n~~~\n";

var avatar_link_documentation = {
  followsDesignSystem: true,
  description: description,
  examples: examples
};

export default avatar_link_documentation;