# 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

- Heading tag
- Heading sizes
- Heading variants
- No Margin
- Text Align

## Heading tag

Use different heading tags to create structure (defaults to h1).

    <ds-heading>The quick brown fox</ds-heading>
    <ds-heading tag="h2">The quick brown fox</ds-heading>
    <ds-heading tag="h3">The quick brown fox</ds-heading>
    <ds-heading tag="h4">The quick brown fox</ds-heading>
    <ds-heading tag="h5">The quick brown fox</ds-heading>
    <ds-heading tag="h6">The quick brown fox</ds-heading>

## Heading sizes

In case you need a different size you can set it independently from the heading tag.

    <ds-heading size="h1">The quick brown fox</ds-heading>
    <ds-heading size="h2">The quick brown fox</ds-heading>
    <ds-heading size="h3">The quick brown fox</ds-heading>
    <ds-heading size="h4">The quick brown fox</ds-heading>
    <ds-heading size="h5">The quick brown fox</ds-heading>
    <ds-heading size="h6">The quick brown fox</ds-heading>

## Heading variants

Use primary headings for important headlines, like a page title. Use soft headings for less important headlines.

    <ds-heading primary>The quick brown fox</ds-heading>
    <ds-heading soft>The quick brown fox</ds-heading>

## No Margin

You can remove the margin easily

    <ds-heading no-margin>The quick brown fox</ds-heading>
    <ds-heading no-margin>The quick brown fox</ds-heading>

## Text Align

Align text

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