SCard

<SCard> is a basic card component that can display variety of contents.

@globalbrain/sefirot/lib/components/SCard.vue

Header title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Usage

<SCard> comes with various SCard and SControl components that you can use to build your card. For example, basic card with header, body, and footer can be built like this:

<script setup lang="ts">
import SCard from '@globalbrain/sefirot/lib/components/SCard.vue'
import SCardBlock from '@globalbrain/sefirot/lib/components/SCardBlock.vue'
import SControl from '@globalbrain/sefirot/lib/components/SControl.vue'
import SControlActionBar from '@globalbrain/sefirot/lib/components/SControlActionBar.vue'
import SControlActionBarClose from '@globalbrain/sefirot/lib/components/SControlActionBarClose.vue'
import SControlButton from '@globalbrain/sefirot/lib/components/SControlButton.vue'
import SControlLeft from '@globalbrain/sefirot/lib/components/SControlLeft.vue'
import SControlRight from '@globalbrain/sefirot/lib/components/SControlRight.vue'
import SControlText from '@globalbrain/sefirot/lib/components/SControlText.vue'
</script>

<template>
  <SCard>
    <SCardBlock size="small" class="s-pl-24 s-pr-16">
      <SControl>
        <SControlLeft>
          <SControlText class="s-font-w-600">
            Header title
          </SControlText>
        </SControlLeft>
        <SControlRight>
          <SControlActionBar>
            <SControlActionBarClose />
          </SControlActionBar>
        </SControlRight>
      </SControl>
    </SCardBlock>
    <SCardBlock class="s-px-24 s-py-8">
      <p class="s-text-14">Lorem ipsum...</p>
    </SCardBlock>
    <SCardBlock size="small" class="s-px-24">
      <SControl>
        <SControlRight>
          <SControlButton label="Cancel" />
          <SControlButton mode="info" label="Submit" />
        </SControlRight>
      </SControl>
    </SCardBlock>
  </SCard>
</template>

Learn more about each child component's usage in the following sections.

Root

The <SCard> is the root component of the card. All child components must be placed under this component.

<SCard>
  <SCardBlock>...</SCardBlock>
  <SCardBlock>...</SCardBlock>
  <SCardBlock>...</SCardBlock>
</SCard>

Props

:mode

You may define :mode to change the appearance of the card. Usually, this is most used when creating "dangerous" cards, such as a card that displays a warning message before deleting something.

interface Props {
  /**
   * @default 'neutral'
   */
  mode?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
}

<SCard mode="danger">
  ...
</SCard>

:size

You may define :size to change the size of the card. This prop is required if you are rendering the card inside a <SModal> component. It has no effect when the card is rendered as a standalone component.

interface Props {
  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
}

<SCard size="small">
  ...
</SCard>

Block

Use <SCardBlock> to display generic block element. This component can be used to create the header, body, or footer of the card.

<SCard>
  <SCardBlock>
    <p>Lorem ipsum...</p>
  </SCardBlock>
</SCard>

Props

:size

You need to define :size to specify the size of the block. This prop is required. You might need to add some padding to the block to make it look good.

interface Props {
  size: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
}

<SCard>
  <SCardBlock size="small" class="s-px-24 s-py-8">
    <p>Lorem ipsum...</p>
  </SCardBlock>
</SCard>

:bg

You may define :bg to change the background color of the block. This prop is useful when you want to emphasize the block.

interface Props {
  /**
   * @default 'elv-3'
   */
  bg?: 'elv-1' | 'elv-2' | 'elv-3' | 'elv-4' | 'none'
}

<SCard>
  <SCardBlock bg="elv-1">
    <p>Lorem ipsum...</p>
  </SCardBlock>
</SCard>