Card

Cards are surfaces that display content and actions on a single topic.

import {Card} from '@streamelements/frontend-ui';

export function MyCard() {
  return <Card.Root>Content Here</Card.Root>
}

Simple Usage

Simple

Complex

Cards can have multiple variations, which include: header, cover, styled text and such.

POPULAR

StreamElements TwitchCon2019 T-Shirt

$10.5

API

The Badge component exposes the following props for style changes:

Root

Property	Value	Default	Description
hoverable	boolean	false	Display shadow when hovering
clickable	boolean	false	Display pointer cursor when hovering
onClick	func		on click event handler
className	string		classNames string to be added to the root component
radius	'sm' | 'md' | 'lg'		border-radius of the corners
padding	'compact' | 'regular' | 'generous'		inner padding

Header

Property	Value	Default	Description
className	string		classNames string to be added to the root component

Cover

Property	Value	Default	Description
image	string		URL for the image (src)
title	string		Text to be displayed on tooltip (accessibility purposes)
className	string		classNames string to be added to the root component

Meta

Property	Value	Default	Description
title	string		Card title (displayed as h6)
className	string		classNames string to be added to the root component

Body

Property	Value	Default	Description
className	string		classNames string to be added to the root component