Install the component dependency:

Include a React component in your project:

Row PropTypes

Name
Value
Description
Default
actionBar
Row.Action[]
far-right action buttons
actionBarVisible
boolean
lock action bar on
false
fullOverlay
Row.FullOverlayLink
hover state for image
fullOverlayVisible
boolean
lock full overlay on
false
image
Row.Image |Row.ImageLink > a > Row.Image
main image or linked image
metadata1
Row.Text, Row.TextLink
first row of metadata
metadata2
Row.Text, Row.TextLink
second row of metadata
progress
number
progress 0-100
size
small | medium
disable resizing layout and set explicit size (from Row.sizes)
title
Required
string | Row.TextLink > a > string
row title or linked title
titleTruncated
boolean
limit title to 2 lines
false

Row.Action PropTypes

icon
Required
Icon
icon representing action

Row.Image PropTypes

src
Required
string
image url

The row is a flexible component that will expand to fit the container it's in. The height and width will grow indefinitely. Define your own constrains with parent elements.

Advanced TypeScript
Brice WilsonAdvanced
0m watched
Getting Started with Reactive Programming Using RxJS
Scott AllenIntermediate
23m watched
Building a JavaScript Development Environment
Cory HouseIntermediate
3h 23m watched
Webpack Fundamentals
Joe EamesIntermediate
90m watched

The size will determine certain base measurements.

The image will cover the image area given. Image dimensions outside of this space will be clipped.

Progress, if given, should be a number between 0 and 100 that describes the completion level of the content represented on the row.

The title can be a string or a link, defined by a special subcomponent.

The title will grow indefinitely, never truncating.

Metadata is free-form strings or displayable elements like links. Each bit of metadata is separated by an interpunct.

Metadata is constrained to a single line, overflowing with an ellipsis indicated. The first datum is given display space precedence.

Metadata can be strings or links, defined by the `Row.TextLink` subcomponent.

The action bar contains the on-row affordances a user can take besides linking straight to the content. These are usually buttons.

A special main action representing the main interaction for the row can be provided here. It will appear overlaid in the center of the image.

To make the full overlay linkable, use the `Row.FullOverlayLink` subcomponent.