limestone/CardSports

Edit on GitHub

Provides a Limestone styled sports Card and a HoC that adds a sports match overlay to limestone/Cardlimestone/Card.Card. All props of Card are supported.

Loading Live Preview

Members

CardSports Component

A Limestone-styled sports Card.

Supports all props of limestone/Cardlimestone/Card.Card, plus leftTeam and rightTeam for the sports match layout. src is optional; when omitted, the image area uses the team colors as a diagonal gradient.

Usage:

<CardSports
  captionImageIconsSrc={[src, src, src, src]}
  hasContainer
  leftTeam={{backgroundColor: '#1b2a4a', logo: <Image src={teamLogoSrc} />, score: '0/0'}}
  rightTeam={{backgroundColor: '#e31c23', logo: <Image src={teamLogoSrc} />, score: '0/0'}}
  label="A secondary caption"
>
 The primary caption
</CardSports>

Extends: limestone/CardSportslimestone/CardSports.CardSportsBase
Extends: limestone/Cardlimestone/Card.Card
Wrapped with: limestone/CardSportslimestone/CardSports.CardSportsDecorator

CardSportsBase Component

A Limestone styled sports Card without the typical Card behaviors applied.

Supports all props of limestone/Cardlimestone/Card.CardBase, plus leftTeam and rightTeam.

Extends: limestone/Cardlimestone/Card.CardBase
Wrapped with: limestone/CardSportslimestone/CardSports.CardSportsDecorator

Properties

Required Property • leftTeam

Object

Configures the left team for the sports layout.

The following properties should be provided:

backgroundColor - The color for this team's half of the image
logo - The team logo. Same type as limestone/Cardlimestone/Card.CardBase#primaryBadge (Element or String)
logoSize - The size of the logo. Same type as limestone/Cardlimestone/Card.CardBase#primaryBadgeSize
score - The score text for this team

Required Property • rightTeam

Object

Configures the right team for the sports layout.

See limestone/CardSportslimestone/CardSports.CardSportsBase#leftTeam for the object shape and behavior.

aria-label

String

The "aria-label" for the Card.

If not provided, it is generated from the captions, the team score, and the selected state.

captionImageIconsSrc

Array(String)Array(Object)

Sources for the caption image icons.

An array of String values or Objects of values used to determine which image will appear on a specific screenSize. This prop is only used when orientation is 'vertical'.

Not shown when the caption is overlaid (captionOverlay or captionOverlayOnFocus).

See: limestone/Card.CardBase#captionImageIconsSrc

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

cardSports - The root class name
score - The score pill
sportsBackground - The diagonal team-color gradient behind the image
sportsOverlay - The logos and score overlay
teamLogo - Applied to a team's logo
teamSide - Applied to each team's half of the overlay

imageOverlay

Node

Additional overlay rendered inside the image, after the sports match overlay.

See: limestone/Card.CardBase#imageOverlay

src

StringObject

Source for the image.

String value or Object of values used to determine which image will appear on a specific screenSize.

Optional. When omitted, the image area uses the team colors as a diagonal gradient.

See: limestone/Card.CardBase#src

CardSportsDecorator Higher-Order Component

A higher-order component that adds a sports match overlay to limestone/Cardlimestone/Card.Card.

The wrapped component receives all of its original props, plus leftTeam and rightTeam.