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'

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.

This card demonstrates different header options. Use the controls above to change the header type and toggle avatar and menu button visibility.

View Code

React

Vue

Angular

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>
</TkCard>

Angular

<tk-card
  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>
</tk-card>

Footer

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

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

View Code

React

Vue

Angular

API

Props

Name	Type	Default	Description
	any	{ severity: 'light', background: 'solid', rounded: true, }	TO DO State hata verdiği için buraya alındı, düzeltilecek TkAvatar component properties
	any	null	The style attribute of container element
	any	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?: "top", "left", "right", "background"; }	{ 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.