@nodestrap/card
v4.0.7
Published
A flexible and extensible content container, with optional header/footer, themes, many display variants, and more.
Downloads
15
Maintainers
Readme
<Card></Card>
A flexible and extensible content container, with optional header/footer, themes, many display variants, and more.
Preview
<Card tag='article' theme='primary' size='lg' gradient={true} outlined={true} header={<h2>Card Demo</h2>} footer={<p>Happy coding</p>}>
<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>
</Card>
Rendered to:
<article class="c1 thPrimary szLg gradient outlined">
<header>
<h2>Card Demo</h2>
</header>
<div class="body">
<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>
</div>
<footer>
<p>Happy coding</p>
</footer>
</article>
Features
- Includes all features in
<Indicator />
. - Customizable via
@cssfn/css-config
.
Installation
Using npm:
npm i @nodestrap/card
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.