@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
92 lines (91 loc) • 2.13 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { cardType, cardOrientation } from './Enums.js';
export interface CardProps {
/**
* Sets the Card child elements.
*
* @example
* ```jsx
* <Card>
* <CardBody>Content</CardBody>
* </Card>
* ```
*/
children?: React.ReactNode;
/**
* Sets the [dir](https://www.w3schools.com/tags/att_global_dir.asp) of the Card.
*
* @example
* ```jsx
* <Card dir="rtl">Content</Card>
* ```
*/
dir?: string;
/**
* Sets additional CSS styles to the Card.
*
* @example
* ```jsx
* <Card style={{ backgroundColor: 'blue' }}>Content</Card>
* ```
*/
style?: React.CSSProperties;
/**
* Sets additional classes to the Card.
*
* @example
* ```jsx
* <Card className="custom-class">Content</Card>
* ```
*/
className?: string;
/**
* Sets the Card type.
*
* The supported values are:
* * `default`
* * `primary`
* * `info`
* * `success`
* * `warning`
* * `error`
*
* @default default
*
* @example
* ```jsx
* <Card type="primary">Content</Card>
* ```
*/
type?: cardType | string;
/**
* Sets the Card orientation.
*
* The supported values are:
* * `horizontal` - Default
* * `vertical`
*
* @default horizontal
*
* @example
* ```jsx
* <Card orientation="vertical">Content</Card>
* ```
*/
orientation?: cardOrientation | string;
/**
* Sets a custom property to the component DOM element.
*
* @example
* ```jsx
* <Card data-custom="value">Content</Card>
* ```
*/
[customProp: string]: any;
}