Skip to Content
Patternfly Logo

Catalog view tile

IntroductionExamplesProps

Introduction

Note: Catalog tile lives in its own package at @patternfly/react-catalog-view-extension!

This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.

Examples

With multiple icon badges

PatternFly logo
CertifiedUSDA Approved
Patternfly-React
provided by Red Hat
This is a very, very long description that should be truncated after three lines. Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. This has changed from PatternFly 3.

With text badge

PatternFly logo
Community
Patternfly-React
provided by Red Hat
This is a very, very long description that should be truncated after three lines. Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. This has changed from PatternFly 3.

Props

CatalogTile properties
NameTypeRequiredDefaultDescription
idanyNonullId
classNamestringNo''Additional css classes
featuredbooleanNofalseFlag if the tile is 'featured'
onClick(event: React.SyntheticEvent<HTMLElement>) => voidNonullCallback for a click on the tile
hrefstringNonullhref for the tile if used as a link
iconImgstringNonullURL of an image for the item's icon
iconAltstringNo''Alternate text for the item's icon
iconClassstringNo''Class for the image when an icon is to be used (exclusive from iconImg)
iconReact.ReactNodeNonullAlternatively provided JSX for the icon
badgesReact.ReactNode[]No[]Array of badges
titlestring | React.ReactNodeYesTile for the catalog item
vendorstring | React.ReactNodeNonullVendor for the catalog item
descriptionstring | React.ReactNodeNonullDescription of the catalog item
maxDescriptionLengthnumberNo112Max description length before applying truncation (when description is a string), -1 for no truncation
truncateDescriptionFn(description: string | React.ReactNode, max: number, id?: any) => stringNonullTruncation function(description, max, id) used to truncate description when necessary (defaults to using ellipses)
footerstring | React.ReactNodeNonullFooter for the tile