Components

Component

Card

Token-styled surface for grouping related content.

ReactReact Native3 props
PreviewReact

Preview is not available for this component.

Imports

import { Card } from "@hozorica/hods-react/card";
import { Card } from "@hozorica/hods-react-native/card";

Props

PropTypeDescription
children *ReactNodeGrouped content rendered inside the card surface.
styleCSSProperties / ViewStyleCustom style merged after the default token surface.
div / View propsHTMLAttributes<HTMLDivElement> / ViewPropsPlatform-native attributes forwarded to the root element.

Platform Support

React

Renders a div with default HODS background, border, radius, color, padding, and forwarded div attributes.

React Native

Renders a View with matching token background, border, radius, and padding.

Usage

<Card><Text textStyle="body">Audit summary ready</Text></Card>

Notes

  • Use Card for repeated items or genuinely framed content, not for wrapping whole page sections.
  • Prefer layout primitives inside Card instead of hand-rolled spacing.
  • Card is available from root exports and focused card subpath exports.