Ocelot-Social/demo.md at 912ff6f645c75ff756ab04bb50330eb009e4e006

IT4Change/Ocelot-Social

Fork 0

mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00

Grzegorz Leoniec 912ff6f645

Use native tag sizeing

2019-01-17 14:45:57 +01:00

4.9 KiB

Raw Blame History

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>

4.9 KiB Raw Blame History