Scoreline
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
One match at a glance: the two sides either side of the score, or of the kick-off time before the match, with its status and date underneath. Use it for football or any sport with two sides.
The score always sits in the middle. Each side's name shows under its code when there is room for it, and is left out in a slim column, so you don't have to plan for that yourself.
Import
import { Scoreline } from "~lib/data-display/scoreline";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
home | { code: string; name?: string } | Yes | N/A | The side on the left |
away | { code: string; name?: string } | Yes | N/A | The side on the right |
figure | string | Yes | N/A | The score, such as "2 – 1", or the kick-off time |
status | string | No | N/A | A word for the badge under the score, such as "Full time" |
live | boolean | No | false | Fill the badge, for a match being played |
note | string | No | N/A | A line under the badge, such as the date |
winner | "home" | "away" | No | N/A | Set the other side's code in the normal weight |
size | "sm" | "md" | "lg" | "xl" | No | "md" | From a slim column (sm) to the hero of a widget (xl) |
align | "center" | "inward" | No | "center" | Center each side, or set it against the score |
footer | "stack" | "row" | No | "stack" | Set the note under the badge, or beside it on one line |
Examples
Full Time
Live
Set live to fill the badge while the match is being played.
Before Kick-Off
Pass the kick-off time as the figure.
Slim Column
When a name would not fit, the codes stand alone.
Set Against the Score
In a wide box, align="inward" keeps the codes next to the score so they read as one line.
Status Beside the Note
In a low box, footer="row" puts the badge and the note side by side on one line, which leaves
room for the names above them.
A note too long for the line is cut short with "…".
In a box too slim for the badge and the note's first word together, the note moves under the
badge, as it does without footer="row".