# Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

#

April 5, 2026
Less than 1 minute

On This Page

- Basic usage
- Sizes
- Broken Image
- Anonymus
- Online Status

## Basic usage

    <ds-avatar
      name="Hans Alba"
      image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg" />

## Sizes

    <ds-avatar online size="small" name="Hans Peter"></ds-avatar>
    <ds-avatar online size="base" name="Hans Peter"></ds-avatar>
    <ds-avatar online size="large" name="Hans Peter"></ds-avatar>
    <ds-avatar online size="x-large" name="Hans Peter"></ds-avatar>
    <ds-avatar online size="x-large"></ds-avatar>
    <ds-avatar online size="large"></ds-avatar>
    <ds-avatar online size="base"></ds-avatar>
    <ds-avatar online size="small"></ds-avatar>

## Broken Image

    <ds-avatar
      name="Peter Sommerfield"
      image="http://not-valid-image-link.org/image-does-not-exist.jpg"
    />

## Anonymus

    <ds-avatar
      image="http://not-valid-image-link##.org/image-does-not-exist.jpg"
    />

## Online Status

    <ds-avatar
      name="Hans Alba"
      image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg"
      online
    />