@nodestrap/content v4.0.14

<Content></Content>

A content friendly element for displaying common contents such as paragraphs, images, videos, etc.

Combined with @nodestrap/typos you can create a nicely content (article).
A common media such as <img>, <figure>, <svg> & <video> are formatted to span the maximum Content's width.

Preview

<Content tag='article' theme='primary' size='lg'>
    <img src='https://picsum.photos/800/400' alt='an image' />
    <img src='https://picsum.photos/800/400' alt='an image' />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum harum ab illum nisi est distinctio delectus dolores</p>
    <img src='https://picsum.photos/800/400' alt='an image' />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum harum ab illum nisi est distinctio delectus dolores</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum harum ab illum nisi est distinctio delectus dolores</p>
</Content>

Rendered to:

<article class="c1 thPrimary szLg">
    <img src="https://picsum.photos/800/400" alt="an image" />
    <img src="https://picsum.photos/800/400" alt="an image" />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum harum ab illum nisi est distinctio delectus dolores</p>
    <img src="https://picsum.photos/800/400" alt="an image" />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum harum ab illum nisi est distinctio delectus dolores</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum harum ab illum nisi est distinctio delectus dolores</p>
</article>

Features

• Includes all features in <Basic />.
• Common media such as <img>, <figure>, <svg>, <video> & class="media" are formatted nicely.
• A separator between media.
• A spacer between media and text (paragraphs, headings, etc).
• Customizable via @cssfn/css-config.

Installation

Using npm:

npm i @nodestrap/content

Support Us

If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.

We always maintain our projects as long as we're still alive.

[Make a donation]