# 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

- Text sizes
- Text colors
- Text align
- Text uppercase
- Nesting styles

## Text sizes

Use different sizes to create hierarchy.

    <ds-text size="x-large">The quick brown fox (x-large)</ds-text>
    <ds-text size="large">The quick brown fox (large)</ds-text>
    <ds-text size="base">The quick brown fox (base)</ds-text>
    <ds-text size="small">The quick brown fox (small)</ds-text>

## Text colors

Use colors to highlight or deemphasize.

    <ds-text>The quick brown fox</ds-text>
    <ds-text color="soft">The quick brown fox</ds-text>
    <ds-text color="softer">The quick brown fox</ds-text>
    <ds-text color="primary">The quick brown fox</ds-text>
    <ds-text color="success">The quick brown fox</ds-text>
    <ds-text color="danger">The quick brown fox</ds-text>
    <ds-text color="warning">The quick brown fox</ds-text>

## Text align

Align text to left, center or right.

    <ds-text>The quick brown fox</ds-text>
    <ds-text align="center">The quick brown fox</ds-text>
    <ds-text align="right">The quick brown fox</ds-text>

## Text uppercase

Display text in uppercase.

    <ds-text uppercase>The quick brown fox</ds-text>

## Nesting styles

Nested text components use their parents format by default.

    <ds-text color="primary" size="large">
      The quick <ds-text bold>brown</ds-text> fox
    </ds-text>