@carbon/ibm-products
Version:
Carbon for IBM Products
76 lines • 2.47 kB
TypeScript
/**
* Copyright IBM Corp. 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { ReactNode } from 'react';
export interface CardTitleProps {
/**
* Provide the contents of the CardTitle.
*/
children?: ReactNode;
/**
* Provide an optional class to be applied to the containing node.
*/
className?: string;
/**
* Enable text truncation with ellipsis.
* - `true`: Single line truncation
* - `number`: Multi-line truncation (line clamp)
* @default false
*/
titleTruncate?: boolean | number;
/**
* Maximum width for the title.
* @default '100%'
*/
maxWidth?: string;
/**
* Optional leading icon or content to display before the title text.
* Typically used for icons that adapt to title size:
* - Productive density: 16px icon recommended
* - Expressive density: 24px icon recommended
*/
titleStart?: ReactNode;
/**
* Optional trailing icon or content to display after the title text.
* Typically used for icons that adapt to title size:
* - Productive density: 16px icon recommended
* - Expressive density: 24px icon recommended
*/
titleEnd?: ReactNode;
/**
* Optional label rendered above the title text.
* Uses $label-01 typography and $text-secondary color.
*/
label?: ReactNode;
/**
* Enable truncation on the label text.
* - `true`: Single line truncation
* - `number`: Multi-line truncation (line clamp)
* @default false
*/
labelTruncate?: boolean | number;
/**
* Optional description rendered below the title text.
* Uses $label-01 typography and $text-secondary color.
*/
description?: ReactNode;
/**
* Enable truncation on the description text.
* - `true`: Single line truncation
* - `number`: Multi-line truncation (line clamp)
* @default false
*/
descriptionTruncate?: boolean | number;
}
/**
* CardTitle displays the main title text in the card header.
* Typography is controlled via className:
* - Productive: Use $heading-compact-02 (16px/22px)
* - Expressive: Use $heading-03 (20px/28px)
* Color uses $text-primary token.
*/
export declare let CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=CardTitle.d.ts.map