<Masonry> Component

Installing <Masonry> Component

There are 2 ways to install <Masonry> component into your react app project:

• Install the Specific Package of <Masonry> Component
• Install the Whole Reusable-UI Component Pack, including the <Masonry> Component

Variant Properties

The alternative appearances of the <Masonry> layout without changing the <Masonry>'s functionality.

orientation Property

Sets the orientation of the <Masonry>.

The possible values are:

• undefined
• 'inline'
• 'block'

---

Here the preview:

Preview

Show code

size Property

Defines the alternative size of the <Masonry>.

The possible values are:

• undefined
• 'sm'
• 'md'
• 'lg'

---

Here the preview:

Preview

Show code

theme Property

Defines the contextual theme of the <Masonry>.

The possible values are:

• undefined
• 'primary'
• 'secondary'
• 'success'
• 'info'
• 'warning'
• 'danger'
• 'light'
• 'dark'

---

Here the preview:

Preview

Show code

gradient Property

Activates a 3D mode of the <Masonry>.

The possible values are:

• undefined
• 'inherit'
• true
• false

---

Here the preview:

Preview

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Masonry>.

The possible values are:

• undefined
• 'inherit'
• true
• false

---

Here the preview:

Preview

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Masonry>.

The possible values are:

• undefined
• 'inherit'
• true
• false

---

Here the preview:

Preview

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Masonry>.

The possible values are:

• undefined
• true
• false

---

Here the preview:

Preview

Show code

Inherited Properties

Because <Masonry> is made from <Content>, so all properties from <Content> are inherited.

You can see the documentation of <Content> here.

Variables

There are several variables of <Masonry> you can customize. Changing the variables affects all <Masonry> instance and other components that depend on <Masonry>.

Here the exposed variables:

• Sizes
• Spacings

The example of accessing, modifying, & adding variables: