Quick nav
Livepeer Design System UI test suite
An environment for testing the Livepeer Design System.
Section
Section 1
Section 2
Section 3
Container
This is a really long paragraph of text, to demonstrate prose text, like for example, the kind you might read in a blog post. The reason we are using prose here is because the most common use case for this container size is longform text. So we are previewing some longform text here so we can make sure the container width provides an optimal line length for this font size.
This is a much shorter paragraph of text, to demonstrate narrow text container. The reason we are using text here is because one common use case for this container size is a 3-up grid.
This is a much shorter paragraph of text, to demonstrate narrow text container. The reason we are using text here is because one common use case for this container size is a 3-up grid.
This is a much shorter paragraph of text, to demonstrate narrow text container. The reason we are using text here is because one common use case for this container size is a 3-up grid.
No max width
Flex
Grid
Text
The quick brown fox
The quick brown fox jumped
The quick brown fox jumped
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
Tooltip
Typography
This is a heading size 4
This is a heading size 3
This is a heading size 2
This is a heading size 1
This is a Paragraph size 2. Design in the target medium. Prototype with real components. Handoff production code.
This is a Paragraph size 1. A really long paragraph of text, to demonstrate prose text, like for example, the kind you might read in a blog post. The reason we are using prose here is because the most common use case for this container size is longform text. So we are previewing some longform text here so we can make sure the container width provides an optimal line length for this font size.
This is a Sup and Sub demo. The kind you might read in a blog post.1 This is a really long paragraph of text, to demonstrate prose text.1
Skeleton
Avatar variants
Text variants
Control variants
Badge
Default Badge
Coming soonSizes
Variants
Interactive variant
Snackbar
Status
Default Status
Sizes
Variants
Alert
Button
TextField
Label
ControlGroup
Textarea
Kbd
Kbd test
Kbd variants
VerifiedBadge
Link
Link variants
Inline link test
There are 5 variants to choose from. Use is for positive states. This is a link Traditional business literature will not help you solve it- most of that stuff is focused on life after product/market fit, after the Trough of Sorrow. A lot of startup stuff is focused on the initial phases, when you do not have a team, idea, or investors.
Code
There are 5 variants to choose from. Use console.log('Radix').console is for positive states. Traditional business literature will not help you solve it- most of that stuff is focused on life after product/market fit, after the Trough of Sorrow. A lot of startup stuff is focused on the initial phases, when you do not have a team, idea, or investors.
Card
Livepeer now supports staking on Arbitrum.
Livepeer is a developer platform for decentralized video streaming powered by a token-coordinated network of video infrastructure providers.Alert Dialog
Dialog
Promo
Default
Migrate to Arbitrum
In an effort to reduce the cost of transacting on Ethereum the Livepeer protocol has added support for Arbitrum, an Ethereum “layer 2”.ProgressBar
Default
Indeterminate state
UI test
Gradient variant
Blue variant
Popover
Accordion
Avatar
Default
Avatar sizes
Avatar fallback
Avatar colors
Interactive avatar
Inactive avatar
Grouped avatars
Nested avatars
Avatar with status
Avatar with icon
Story avatars
Tabs
Default
Vertical orientation
Slider
Default
Range
Vertical orientaiton
SimpleToggle
Checkbox
Sizes
Radio
Sizes
Table
| Club | MP | W | D | L | GF | GA | GD | Pts | Last 5 |
|---|---|---|---|---|---|---|---|---|---|
| Man City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Man United | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Leicester City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Chelsea | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| West Ham | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Leicester City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 |
| Club | MP | W | D | L | GF | GA | GD | Pts | Last 5 |
|---|---|---|---|---|---|---|---|---|---|
1 Man City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
2 Man United | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
3 Leicester City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
4 Chelsea | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
5 West Ham | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
6 Leicester City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 |
| Club | MP | W | D | L | GF | GA | GD | Pts | Last 5 |
|---|---|---|---|---|---|---|---|---|---|
| Man City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Man United | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Leicester City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Chelsea | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| West Ham | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 | |
| Leicester City | 32 | 32 | 32 | 32 | 32 | 32 | 32 | 32 |