The service card component displays a card representing a service with an icon, title, description, and an optional customized footer
Examples
Basic service card
This shows a basic service card with an icon, title, description, and optional footer passed in. You can also pass all props of the card component.
PatternFly
Component groupsThis is a sample service description
Stacked service card
If you set isStacked property to true, the header layout changes to stacked.
Example
A basic exampleThis is a basic ServiceCard Example
Service card in a gallery
This shows how cards can look side by side in a gallery layout. If you set isFullHeight property to true, the card height will fill the available space.
Example1
A basic exampleThis is a basic ServiceCard example
Example2
A second exampleThis is another basic ServiceCard example
Props
ServiceCard
| Name | Type | Default | Description |
|---|---|---|---|
| descriptionrequired | string | Service card description | |
| iconrequired | React.ReactNode | Service card icon | |
| titlerequired | string | Service card title | |
| footer | React.ReactElement | null | null | Optional footer |
| helperText | string | Optional Service card helper text | |
| isFullHeight | boolean | false | Optional flag indicating if the card height fills the available space |
| isStacked | boolean | false | Optional flag modifying the card header layout |
| ouiaId | string | number | 'ServiceCard' | Optional custom OUIA ID |
| subtitle | string | Service card subtitle |
