t-card

This component displays a box that provides elevation, border radius, border, and padding. It also provides slots before and after the content.

Basic Usage

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
<TCard design="outlined" p>
  ...
</TCard>

Size

Card Content!
<TCard design="flat" size="sm" p>
  ...
</TCard>

Hyper

<TCard design="raised" onClick={() => {}} block p>
  Card Content!
</TCard>

Prepend and Append Slots

Your Account

Welcome back, Mohammed.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

124 orders

<TCard
  design="outlined"
  prepend={() => (
    <>
      <TFlex align="center" justify="between" py="md" px>
        <TText size="re">Your Account</TText>
        <TIcon size="18" icon="mdi:account" />
      </TFlex>
      <TDivider />
    </>
  )}
  append={() => (
    <>
      <TDivider />
      <TFlex align="center" justify="between" py="md" px>
        <TText size="sm">124 orders</TText>
      </TFlex>
    </>
  )}
>
  <TCell p>
    <TText color="primary" size="re" leading="snug" mb="sm">
      Welcome back, Mohammed.
    </TText>
    <TText size="md" leading="snug">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at
      its layout. It is a long established fact that a reader will be distracted by the readable content of a page when
      looking at its layout.
    </TText>
  </TCell>
</TCard>

Aspect Ratio

<TGrid cols="2" colsMd="4" gap="4">
  <TCard
    ratio="1"
    design="flat"
    color="primary"
    size="lg"
    fill //
  >
    <TFlex direction="col" justify="center" align="center" stretch>
      <TIcon size="36" icon="mdi:home" mb="sm" />
      <TText weight="normal">Home</TText>
    </TFlex>
  </TCard>
</TGrid>

Complex Layout

Welcome to my site!

Create an account
<TCard
  design="raised"
  color="primary"
  size="xl"
  prepend={() => (
    <TFlex align="center" justify="between" px="xl" py>
      <TIcon icon="mdi:home" />
      <TText size="md">Welcome to my site!</TText>
    </TFlex>
  )}
  elevated
  rounded
>
  <TCard design="raised" color="surface" p="xl">
    <TFlex mb>
      <TIconButton design="raised" size="lg" color="alert" icon="mdi:trash-can" to="/" />
      <TDivider vertical mx />
      <TButton icon="mdi:account" design="flat" size="lg" color="danger" iconPosition="end" to="/" block>
        Create an account
      </TButton>
    </TFlex>

    <TDivider my="xl" />

    <TInputText mb="lg" label="Email" placeholder="Enter your email" persistentPlaceholder />
    <TInputText mb="lg" label="Password" placeholder="Enter your password" persistentPlaceholder />

    <TButton design="flat" size="lg" icon="mdi:account-circle" onClick={() => {}} centered block>
      Login
    </TButton>
  </TCard>
</TCard>

HTML Rendering

As a Route LinkAs an External Link
As a Box
<TCard
    onClick={() => {}}
>
    As a Button
</TCard>
<TCard
    to={{ name: 'home' }}
>
    As a Route Link
</TCard>
<TCard
    href="https://dija.sa"
    external
>
    As an External Link
</TCard>
<TCard>
    As a Box
</TCard>

API

No options available

Components

t-button-toggle

Components

t-carousel

Table of Contents