Service card

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.

page-header-icon

PatternFly

Component groups
This is a sample service description

Stacked service card

If you set isStacked property to true, the header layout changes to stacked.

page-header-icon

Example

A basic example
This is a basic ServiceCard Example

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.

Props

ServiceCard

extends CardProps
*required
NameTypeDefaultDescription
descriptionrequiredstringService card description
iconrequiredReact.ReactNodeService card icon
titlerequiredstringService card title
footerReact.ReactElement | nullnullOptional footer
helperTextstringOptional Service card helper text
isFullHeightbooleanfalseOptional flag indicating if the card height fills the available space
isStackedbooleanfalseOptional flag modifying the card header layout
ouiaIdstring | number'ServiceCard'Optional custom OUIA ID
subtitlestringService card subtitle
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.