React

Catalog 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

Basic without truncated text

PatternFly logo
Certified
Patternfly-React
provided by Red Hat
This is a very long description that is not truncated after 112 characters. To turn off truncation, pass in a maxDescriptionLength of -1. Please note that this has changed from PatternFly 3.

With multiple icon badges

PatternFly logo
CertifiedUSDA Approved
Patternfly-React
provided by Red Hat
This is a very long description that should be truncated after 112 characters. 112 is the default but can be

With text badge

PatternFly logo
Community
Patternfly-React
provided by Red Hat
This is a very long description that should be truncated after 112 characters. 112 is the default but can be

Props

CatalogTile properties
NameTypeRequiredDefaultDescription
idanynull as anyId
classNamestring''Additional css classes
featuredbooleanfalseFlag if the tile is 'featured'
onClick(event: React.SyntheticEvent<HTMLElement>) => voidnull as (event: React.SyntheticEvent<HTMLElement>) => voidCallback for a click on the tile
hrefstringnull as stringhref for the tile if used as a link
iconImgstringnull as stringURL of an image for the item's icon
iconAltstring''Alternate text for the item's icon
iconClassstring''Class for the image when an icon is to be used (exclusive from iconImg)
iconReact.ReactNodenull as React.ReactNodeAlternatively provided JSX for the icon
badgesReact.ReactNode[][] as React.ReactNode[]Array of badges
titlestring | React.ReactNodeTile for the catalog item
vendorstring | React.ReactNodenull as string | React.ReactNodeVendor for the catalog item
descriptionstring | React.ReactNodenull as string | React.ReactNodeDescription of the catalog item
maxDescriptionLengthnumber112Max description length before applying truncation (when description is a string), -1 for no truncation
truncateDescriptionFn(description: string | React.ReactNode, max: number, id?: any) => stringnull as (description: string | React.ReactNode, max: number, id?: any) => stringTruncation function(description, max, id) used to truncate description when necessary (defaults to using ellipses)
footerstring | React.ReactNodenull as string | React.ReactNodeFooter for the tile