Card

TkCard component description.

React

import { TkCard } from '@takeoff-ui/react'

Vue

import { TkCard } from '@takeoff-ui/vue'

Angular

import { TkCard } from '@takeoff-ui/angular'

Playground

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis.

Generated Code

<TkCard
  headerType="basic"
  footerType="basic"
  headerPosition="top"
  header="Card Header"
  subheader="Card Subheader"
>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis.
  </p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text" />
    <TkButton label="Submit" variant="primary" />
  </div>
</TkCard>

<TkCard
  headerType="basic"
  footerType="basic"
  headerPosition="top"
  header="Card Header"
  subheader="Card Subheader"
>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis.
  </p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text" />
    <TkButton label="Submit" variant="primary" />
  </div>
</TkCard>

<tk-card
  headerType="basic"
  footerType="basic"
  headerPosition="top"
  header="Card Header"
  subheader="Card Subheader"
>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis.
  </p>
  <div slot="footer-actions">
    <tk-button label="Cancel" variant="neutral" type="text" />
    <tk-button label="Submit" variant="primary" />
  </div>
</tk-card>

Controls

Header Type:

Footer Type:

Header Position:

Header:

Subheader:

Image URL:

Basic

A simple TkCard is created using the header property along with content as children.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code

React

<TkCard header="Card Title">
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
      quas!
  </p>
</TkCard>

Vue

<TkCard header="Card Title">
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
      quas!
  </p>
</TkCard>

Angular

<tk-card header="Card Title">
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
      quas!
  </p>
</tk-card>

Card with Content

Customize the card's content using the content slot to place any desired elements inside the TkCard.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

View Code

React

<TkCard header="Card Title">
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
      quas!
  </p>
</TkCard>

Vue

<TkCard header="Card Title">
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
      quas!
  </p>
</TkCard>

Angular

<tk-card header="Card Title">
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
      quas!
  </p>
</tk-card>

Header Variants

Demonstrates various header types basic, divided, light, dark, primary available via the headerType property.

Basic Header

This card demonstrates different header options.

Divided Header

This card demonstrates different header options.

Light Header

This card demonstrates different header options.

Dark Header

This card demonstrates different header options.

Primary Header

This card demonstrates different header options.

View Code

React

<TkCard header="Basic Header" headerType="basic">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Divided Header" headerType="divided">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Light Header" headerType="light">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Dark Header" headerType="dark">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Primary Header" headerType="primary">
  <p>This card demonstrates different header options.</p>
</TkCard>

Vue

<TkCard header="Basic Header" headerType="basic">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Divided Header" headerType="divided">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Light Header" headerType="light">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Dark Header" headerType="dark">
  <p>This card demonstrates different header options.</p>
</TkCard>

<TkCard header="Primary Header" headerType="primary">
  <p>This card demonstrates different header options.</p>
</TkCard>

Angular

<tk-card header="Basic Header" header-type="basic">
  <p>This card demonstrates different header options.</p>
</tk-card>

<tk-card header="Divided Header" header-type="divided">
  <p>This card demonstrates different header options.</p>
</tk-card>

<tk-card header="Light Header" header-type="light">
  <p>This card demonstrates different header options.</p>
</tk-card>

<tk-card header="Dark Header" header-type="dark">
  <p>This card demonstrates different header options.</p>
</tk-card>

<tk-card header="Primary Header" header-type="primary">
  <p>This card demonstrates different header options.</p>
</tk-card>

Card with Image

Shows how to include images using the image property and configure their display with imageOptions.

Card with top image in windowed mode.

View Code

React

<TkCard
    header="Top Image"
    image="path/to/image.jpg"
    imageOptions={{ position: 'top', windowed: true }}
    containerStyle={{ width: '312px' }}
    showAvatar
    showMenuButton
>
    <p>Card with top image in windowed mode.</p>
    <div slot="footer-actions">
          <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
          <TkButton label="Submit" variant="primary"></TkButton>
    </div>
</TkCard>

Vue

<TkCard 
  header="Top Image" 
  image="path/to/image.jpg" 
  :imageOptions="{ position: 'top', windowed: true }"
  :containerStyle="{ width: '312px' }" 
  showAvatar 
  showMenuButton 
>
  <p>Card with top image in windowed mode.</p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
    <TkButton label="Submit" variant="primary"></TkButton>
  </div>
</TkCard>

Angular

<tk-card
  header="Top Image"
  image="path/to/image.jpg"
  [image-options]="{ position: 'top', windowed: true }"
  [container-style]="{ width: '312px' }"
  show-avatar
  show-menu-button
>
  <p>Card with top image in windowed mode.</p>
  <div slot="footer-actions">
    <tk-button label="Cancel" variant="neutral" type="text"></tk-button>
    <tk-button label="Submit" variant="primary"></tk-button>
  </div>
</tk-card>

Footer

Illustrates how to add a footer using the footer-actions slot or customize it with the footerType property.

Basic Footer

This card demonstrates the use of a footer with action buttons.

Divided Footer

This card demonstrates the use of a footer with action buttons.

Light Footer

This card demonstrates the use of a footer with action buttons.

View Code

React

<TkCard header="Card with Footer" footerType="basic">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
    <TkButton label="Submit" variant="primary"></TkButton>
  </div>
</TkCard>

<TkCard header="Card with Footer" footerType="divided">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
    <TkButton label="Submit" variant="primary"></TkButton>
  </div>
</TkCard>

<TkCard header="Card with Footer" footerType="light">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
    <TkButton label="Submit" variant="primary"></TkButton>
  </div>
</TkCard>

Vue

<TkCard header="Card with Footer" footerType="basic">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
    <TkButton label="Submit" variant="primary"></TkButton>
  </div>
</TkCard>

<TkCard header="Card with Footer" footerType="divided">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
    <TkButton label="Submit" variant="primary"></TkButton>
  </div>
</TkCard>

<TkCard header="Card with Footer" footerType="light">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <TkButton label="Cancel" variant="neutral" type="text"></TkButton>
    <TkButton label="Submit" variant="primary"></TkButton>
  </div>
</TkCard>

Angular

<tk-card header="Card with Footer" footer-type="basic">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <tk-button label="Cancel" variant="neutral" type="text"></tk-button>
    <tk-button label="Submit" variant="primary"></tk-button>
  </div>
</tk-card>

<tk-card header="Card with Footer" footer-type="divided">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <tk-button label="Cancel" variant="neutral" type="text"></tk-button>
    <tk-button label="Submit" variant="primary"></tk-button>
  </div>
</tk-card>

<tk-card header="Card with Footer" footer-type="light">
  <p>This card demonstrates the use of a footer with action buttons.</p>
  <div slot="footer-actions">
    <tk-button label="Cancel" variant="neutral" type="text"></tk-button>
    <tk-button label="Submit" variant="primary"></tk-button>
  </div>
</tk-card>

Header Action

Shows how to place a custom action on the right side of the card header using the header-action slot.

This card demonstrates the use of a custom action in the header.

View Code

React

<TkCard header="Card with Header Action" subheader="Subheader" headerType="divided">
  <p>This card demonstrates the use of a custom action in the header.</p>
  <div slot="header-action" style={{ display: 'flex', gap: '8px' }}>
    <TkSelect options={[
      { value: 'week', label: 'This Week' },
      { value: 'month', label: 'This Month' },
      { value: 'year', label: 'This Year' },
    ]} placeholder="Select period"></TkSelect>
    <TkButton icon="filter_alt" variant="info" label="Filter"></TkButton>
  </div>
</TkCard>

Vue

<TkCard header="Card with Header Action" subheader="Subheader" headerType="divided">
  <p>This card demonstrates the use of a custom action in the header.</p>
  <div slot="header-action" style="display: flex; gap: 8px">
    <TkSelect :options="[
      { value: 'week', label: 'This Week' },
      { value: 'month', label: 'This Month' },
      { value: 'year', label: 'This Year' },
    ]" placeholder="Select period"></TkSelect>
    <TkButton icon="filter_alt" variant="info" label="Filter"></TkButton>
  </div>
</TkCard>

Angular

<tk-card header="Card with Header Action" subheader="Subheader" header-type="divided">
  <p>This card demonstrates the use of a custom action in the header.</p>
  <div slot="header-action" style="display: flex; gap: 8px">
    <tk-select [options]="[
      { value: 'week', label: 'This Week' },
      { value: 'month', label: 'This Month' },
      { value: 'year', label: 'This Year' },
    ]" placeholder="Select period"></tk-select>
    <tk-button icon="filter_alt" variant="info" label="Filter"></tk-button>
  </div>
</tk-card>

API

Props

Name	Type	Default	Description
	any	{ severity: 'light', background: 'solid', rounded: true, size: 'small', }	TO DO State hata verdiği için buraya alındı, düzeltilecek TkAvatar component properties
	CSSStyleProperties	null	The style attribute of container element
	CSSStyleProperties	null	The style attribute of content element
	boolean	false	Controls whether the card shows a hover shadow effect
	"basic", "divided", "light"	'basic'	The mode of the footer
	string	null	The header text
	"bottom", "top"	'top'	The position of the header
	"basic", "dark", "divided", "light", "primary"	'basic'	The type of the header
	boolean	false	Controls whether the header is hidden
	boolean	false	Controls whether the card is displayed horizontally
	string	null	The image source for the card
	{ badge?: string; badgeIcon?: string; badgeIconPosition?: "left", "right"; windowed?: boolean; background?: boolean; backgroundUrl?: string; position?: "background", "left", "right", "top"; }	{ position: 'top', background: false, windowed: true, }	TO DO Options for the image display
	boolean	false	Controls whether the header avatar is shown
	boolean	false	Controls whether the menu button is shown
	string	null	The subheader text

Slots

Name	Description
avatar	Custom avatar template of card header.
content	Custom content template.
default	Default slot to detect child to inner body.
footer	Custom footer template.
footer-actions	Custom actions template to default footer.
header	Custom header template.
header-action	Custom action template on the right side of the card header.