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 |