<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.