SCard

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

@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 as follows:

<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

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

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

Props

:mode

You may define :mode to change the appearance of the card. This is primarily used for creating "danger-zone" cards, such as those displaying a warning message before deleting something.

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

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

:size

Applies the size of the card. This prop is required if you are rendering the card inside the <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

Specifies the size of the block. This prop is required. You may also 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

Changes 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>