Names
Table of contents
Names is used to render one or more names, e.g., authors of a blog post or
speakers at an event. It is an alternative to using
Avatars.
Examples
In this example we render a few names with default alignment (start):
You can also align center:
Or align end:
Now we render many names that trigger line wraps:
System props
Names supports space props and
color props from
Styled System.
Component props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| values | Array of string | ✓ | Array with names to be rendered. | |
| align | start, center or end | start | Alignment of names (responsive). | |
| variant | String | names.default | Optional variant for customizations. |
Variants
The default variant is names.default, which can be optionally defined in your
theme. Names uses default styles if no variant is defined. You can also define
your own variant under any key you like and provide that key to the variant
prop.
In this example we define default variant names.default to render Names
bold:
In the follwoing example we define variant names.emphasize to render names
italic:
Visual regression testing
The following URLs can be used for visual regression testing:
