Code

This is a compound component, but with no wrapper.

Block

Props	Type	Required
width	string	❌
height	string	❌
isImage	boolean	❌
imageIconSize	'medium' | 'large'	❌

isImage

It adds an image icon to provide a better context for users, indicating that this block is going to render as an image instead a layout piece.

Circle

Props	Type	Required
size	string	❌
isImage	boolean	❌
imageIconSize	'medium' | 'large'	❌

size

Controls the width and height of the element, enforcing a same size for both to preserve the circular shape.

Text

Props	Type	Required
width	string	❌
isTitle	boolean	❌

isTitle

Adds an extra height to the component.

Paragraph

Props	Type	Required
width	string	❌
lines	number	❌

lines

Controls how many lines the paragraph will have. By default if the prop is not passed, it will show 5 lines.

FormField

Props	Type	Required
width	string	❌

List

Props	Type	Required
width	string	❌
items	number	❌

items

Controls how many items the list will have. By default if the prop is not passed, it will show 5 items.

Example

Live Demo

Code Sandbox