Patterns

Showcase card

Tags: cards

Contents

Default

Showcase card variant

Set [carousel]="true" to have a carousel.

Website Design for a Consumer Shop

$40.00 USD

One concept

3D mockup

Printable file

Title text of the showcase card

$1,000,000.00 USD

Han Solo

@hanSolo

5.0

7.0

89%

United States

Inputs

fileAlt : string

fileSrc : string

iconActionName : string

labelIconAction : string

titlePrice : number

aspectRatioValue ?: AspectRatioValue

Set the aspect ratio of the image on the showcase card

borderRadiusBottom ?: boolean = false

carousel ?: boolean = false

fullWidth ?: boolean = true

imageDesktopSmallHeight ?: string

imageHeight ?: string

imageIntrinsicWidth ?: number

imageLargeHeight ?: string

imageMobileHeight ?: string = '100%'

imageMobileLargeHeight ?: string

imageTabletHeight ?: string

imageXLargeHeight ?: string

imageXXLargeHeight ?: string

imageXXXLargeHeight ?: string

imageXXXXLargeHeight ?: string

Set the height of the image for showcase variant in order to keep the masonry style on showcase work

keepHoverStateShown ?: boolean = false

link ?: string

newTab ?: boolean = false

pictureMetadata ?: PictureMetadata

scaleOnHover ?: boolean = false

showIconAction ?: boolean = false

showLikeAction ?: boolean = false

Shows action icons on the top-right side of the card

variant ?: ShowcaseCardVariant = ShowcaseCardVariant.LANDING_PAGE

Outputs

onClickAction ?: any = new EventEmitter<void>()

onClickLike ?: any = new EventEmitter<void>()