`<Content>` Component

<Content> is a generic media container with pre-formatted media elements such as images, videos, etc.

This component is great for creating an <article> or a newspaper-like content.

Installing `<Content>` Component

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

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

Images & Media

Media elements such as <figure>, <img>, <svg>, <video>, <picture>, <embed>, <object> and .media are automatically styled to fill over the <Content>'s padding.

Here the demonstration:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

lorem image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

lorem image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Images & Media at the Beginning and End

If the media position is at the first and/or the last, the media are bit clipped by <Content>'s border-radius.

Here the demonstration:

lorem image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

lorem image

Show code

The Sequence of Images & Media

If there are multiple media in a sequence (without being inserted by another types), the media are joined together separated by borders.

Here the demonstration:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

lorem image

lorem image

lorem image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Custom Media

If you need a custom element to be treated as media, add a 'media' to the element's className.

Here the demonstration:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

hello world!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Excluding Media

Sometimes we need to put a media (<figure>, <img>, <svg>, <video>, <picture>, <embed> and <object>) without to apply the default styling. For example an emoji of <img>.

Add a 'not-media' to the element's className.

Here the demonstration:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

lorem image

lorem image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Links

Link elements such as <a> and .link are automatically styled and get separated from each other.

Here the demonstration:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Link 1 Link 2 Link 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Custom Links

If you need a custom element to be treated as link, add a 'link' to the element's className.

Here the demonstration:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Link 3

Link 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Excluding Links

Sometimes we need to put a link (<a>) without to apply the default styling. For example a custom button of <a>.

Add a 'not-link' to the element's className.

Here the demonstration:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Link 1 Link 2 Link 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo aut deserunt nulla iusto quod a est debitis tenetur dolorem? Molestiae unde nulla amet odio eveniet, quis eum libero aperiam natus?

Show code

Variant Properties

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

`size` Property

Defines the alternative size of the <Content>.

The possible values are:

undefined
'sm'
'md'
'lg'

Here the preview:

An <Content> with sm size

An <Content> with md size

An <Content> with lg size

Show code

`theme` Property

Defines the contextual theme of the <Content>.

The possible values are:

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

Here the preview:

An <Content> with primary theme

An <Content> with secondary theme

An <Content> with success theme

An <Content> with info theme

An <Content> with warning theme

An <Content> with danger theme

An <Content> with light theme

An <Content> with dark theme

Show code

`gradient` Property

Activates a 3D mode of the <Content>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <Content> with gradient mode

An <Content> with gradient mode

An <Content> with gradient mode

An <Content> with gradient mode

An <Content> with gradient mode

An <Content> with gradient mode

An <Content> with gradient mode

An <Content> with gradient mode

Show code

`outlined` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <Content> with outlined mode

An <Content> with outlined mode

An <Content> with outlined mode

An <Content> with outlined mode

An <Content> with outlined mode

An <Content> with outlined mode

An <Content> with outlined mode

An <Content> with outlined mode

Show code

`mild` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <Content> without mild mode

An <Content> without mild mode

An <Content> without mild mode

An <Content> without mild mode

An <Content> without mild mode

An <Content> without mild mode

An <Content> without mild mode

An <Content> without mild mode

Show code

`nude` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <Content> with nude mode

An <Content> with nude mode

An <Content> with nude mode

An <Content> with nude mode

An <Content> with nude mode

An <Content> with nude mode

An <Content> with nude mode

An <Content> with nude mode

Show code

Inherited Properties

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

You can see the documentation of <Basic> here.

Variables

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

Here the exposed variables:

Animations
Spacings

The example of accessing, modifying, & adding variables:

Show code