# 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
About 2 min

On This Page

- Common usage
- Space
- Cards with footer
- Centered content
- Icon card
- Color variants
- Hover cards
- Section Footer

## Common usage

Set a header and image for the card and provide some content.

    <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
      <ds-flex-item>
        <ds-card
          header="The header"
          image="https://picsum.photos/400/300?image=1063">
          Look ma! I'm in a card.
        </ds-card>
      </ds-flex-item>
      <ds-flex-item>
        <ds-card
          header="The header"
          image="https://picsum.photos/400/300?image=260">
          Look ma! I'm in a card.
        </ds-card>
      </ds-flex-item>
    </ds-flex>

## Space

Need more or less space top and bottom of the card? Specify with with the `space` prop

    <ds-card space="xx-small">
      xx-small
    </ds-card>

    <ds-card space="xx-large">
      xx-large
    </ds-card>

## Cards with footer

Most commonly the footer will contain some actions connected to the content.

    <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
      <ds-flex-item>
        <ds-card
          header="The header">
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button primary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
      <ds-flex-item>
        <ds-card
          header="The header">
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button primary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
    </ds-flex>

## Centered content

Center the content if it is short and its purpose is to draw attention rather than to share information.

    <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
      <ds-flex-item>
        <ds-card
          centered
          header="The header">
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button primary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
      <ds-flex-item>
        <ds-card
          centered
          header="The header">
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button primary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
    </ds-flex>

## Icon card

A card can contain an icon to emphasize its message.

    <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
      <ds-flex-item>
        <ds-card
          centered
          icon="map"
          header="The header">
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button primary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
      <ds-flex-item>
        <ds-card
          centered
          icon="users"
          header="The header">
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button primary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
    </ds-flex>

## Color variants

Use color variants to highlight content.

    <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
      <ds-flex-item>
        <ds-card
          icon="cubes"
          header="The header"
          primary
          centered>
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
      <ds-flex-item>
        <ds-card
          icon="book"
          header="The header"
          secondary
          centered>
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button secondary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
    </ds-flex>

## Hover cards

Use a hover card to draw additional attention to the its content.

    <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
      <ds-flex-item>
        <ds-card
          icon="cubes"
          header="The header"
          primary
          centered
          hover>
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
      <ds-flex-item>
        <ds-card
          icon="book"
          header="The header"
          secondary
          centered
          hover>
          Look ma! I'm in a card.
          <template slot="footer">
            <ds-button secondary>Read more</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
    </ds-flex>

## Section Footer

Here we apply a section footer without margin

    <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
      <ds-flex-item>
        <ds-card
          icon="cubes"
          header="The header"
          centered
          hover>
          Look ma! I'm in a card.
          <div slot="footer" class="no-margin">
            <ds-icon name="comments" />
            <ds-tag
              style="margin-top: -4px; margin-left: -7px; position: absolute;"
              color="primary"
              size="small"
              round>
              2
            </ds-tag>
          </div>
        </ds-card>
      </ds-flex-item>
      <ds-flex-item>
        <ds-card
          icon="book"
          header="The header"
          centered>
          Look ma! I'm in a card.
          <div slot="footer" class="no-margin">
            <ds-icon name="comments" />
            <ds-tag
              style="margin-top: -4px; margin-left: -7px; position: absolute;"
              color="primary"
              size="small"
              round>
              34
            </ds-tag>
          </div>
        </ds-card>
      </ds-flex-item>
    </ds-flex>