# 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
- Ordered list
- Custom icon
- Sizes

## Basic usage

    <ds-list>
      <ds-list-item>Layout components</ds-list-item>
      <ds-list-item>Typography components</ds-list-item>
      <ds-list-item>Navigation components</ds-list-item>
    </ds-list>

## Ordered list

Use an ordered list to display a sorted set of items.

    <ds-list ordered>
      <ds-list-item>Layout components</ds-list-item>
      <ds-list-item>Typography components</ds-list-item>
      <ds-list-item>Navigation components</ds-list-item>
    </ds-list>

## Custom icon

Provide a custom icon for the list items.

    <ds-list icon="user">
      <ds-list-item>Layout components</ds-list-item>
      <ds-list-item>Typography components</ds-list-item>
      <ds-list-item>Navigation components</ds-list-item>
    </ds-list>

## Sizes

Use different sizes to create hierarchy.

    <ds-list size="x-large">
      <ds-list-item>Layout components</ds-list-item>
      <ds-list-item>Typography components</ds-list-item>
      <ds-list-item>Navigation components</ds-list-item>
    </ds-list>
    <ds-list size="large">
      <ds-list-item>Layout components</ds-list-item>
      <ds-list-item>Typography components</ds-list-item>
      <ds-list-item>Navigation components</ds-list-item>
    </ds-list>
    <ds-list size="base">
      <ds-list-item>Layout components</ds-list-item>
      <ds-list-item>Typography components</ds-list-item>
      <ds-list-item>Navigation components</ds-list-item>
    </ds-list>
    <ds-list size="small">
      <ds-list-item>Layout components</ds-list-item>
      <ds-list-item>Typography components</ds-list-item>
      <ds-list-item>Navigation components</ds-list-item>
    </ds-list>