Card Component

Card component is widely used in many information and summary display. Among the use cases are presenting itemized products in e-commerece, data from search list, and etc. Bissetii supports a number of card styling seemlessly.

This component is available starting from v1.12.1.

Sass Styling Parts

The Sass styling scripts that are responsible for styling cards are located in

assets/css/bissetii/modules/card

This is an optional module so one must include the following config into your own Sass configuration script:

$config-card: 1

Since card component is usually deployed inside some kind of table or Grid Component layout, It only uses margin-top for its hovering animation.

Javascript Parts

This component does not depend on any Javascript.

HTML Parts

Due to the undefined condition from W3C manuals, Bissetii currently uses class styling tag to structure the HTML component.

Key Structure

The key structure to the card is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<article class="Card" style="width: 250px; height: 500px;">
	<div class="card-thumbnail">
		<!-- thumbnail images here. Optional. -->
	</div>
	<div class="card-content">
		<!-- main content writing here. Compulsory. -->
	</div>
	<ul class="card-call-to-action">
		<!-- call to action links here. Optional. -->
	</ul>
</article>

Example Usage

Bissetii currently renders card as follows:


Card Info 1 Card Info 1a

My Card Title Here

This can be written in Markdown where it will be processed into HTML automatically.

Card Info 2

My Card 2 Title Here

This is the content of another card. You can design as many as you want but you can try to keep things under a single umbrella.

Card 3 Title Here

This is to demonstrate that the content can be written in markdown. The entire content here are completely written in Markdown.

Card 4 Here

This is to demonstrate that the Content field can be written using HTML codes. The Content field here is written with HTML codes.




<article class="Card false"
	style="min-width: 500px;
		width: 500px;
		min-height: 500px;
		height: 500px;">
	<div class="card-thumbnail">
		
<img alt="Card Info 1"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x1200.png"
	width="500px"
	height="263px"
	loading="lazy"/>
		
<img alt="Card Info 1a"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x1200.png"
	width="500px"
	height="263px"
	loading="lazy"/>
	</div>
		<div class="card-content"><h3 id="my-card-title-here">My Card Title Here</h3>
<p>This can be written in Markdown where it will be processed into HTML
automatically.</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/"
	id="card1-cta-home">Home</a></li>
			<li><a href="https://bissetii.zoralab.com/"
	id="card1-cta-buy"
	class="pinpoint">Buy</a></li>
		</ul>
</article>


<article class="Card false"
	style="min-width: 250px;
		width: 250px;
		min-height: 500px;
		height: 500px;">
	<div class="card-thumbnail">
		
<img alt="Card Info 2"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x628.png"
	width="500px"
	height="263px"
	loading="lazy"/>
	</div>
		<div class="card-content"><h3>My Card 2 Title Here</h3>
<p>
	This is the content of another card. You can design as many as you want
	but you can try to keep things under a single umbrella.
</p>
</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/">Home</a></li>
			<li><a href="https://bissetii.zoralab.com/"
	class="pinpoint">Buy</a></li>
		</ul>
</article>


<article class="Card false"
	style="min-width: 200px;
		width: 200px;
		min-height: auto;
		height: auto;">
		<div class="card-content"><h3 id="card-3-title-here">Card 3 Title Here</h3>
<p>This is to demonstrate that the content can be written in markdown. The entire
content here are completely written in Markdown.</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/"></a></li>
			<li><a href="https://bissetii.zoralab.com/"></a></li>
		</ul>
</article>


<article class="Card false"
	style="min-width: 200px;
		width: 200px;
		min-height: auto;
		height: auto;">
		<div class="card-content"><h3>Card 4 Here</h3>
<p>
	This is to demonstrate that the Content field can be written using HTML
	codes. The Content field here is written with HTML codes.
</p>
</div>
</article>

Embed Version

Bissetii also renders the embedded version of cards by adding additional embed class tag as follows:


Card Info 1 Card Info 1a

My Card Title Here

This can be written in Markdown where it will be processed into HTML automatically.

Card Info 2

My Card 2 Title Here

This is the content of another card. You can design as many as you want but you can try to keep things under a single umbrella.

Card 3 Title Here

This is to demonstrate that the content can be written in markdown. The entire content here are completely written in Markdown.

Card 4 Here

This is to demonstrate that the Content field can be written using HTML codes. The Content field here is written with HTML codes.




<article class="Card embed"
	style="min-width: 500px;
		width: 500px;
		min-height: 500px;
		height: 500px;">
	<div class="card-thumbnail">
		
<img alt="Card Info 1"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x1200.png"
	width="500px"
	height="263px"
	loading="lazy"/>
		
<img alt="Card Info 1a"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x1200.png"
	width="500px"
	height="263px"
	loading="lazy"/>
	</div>
		<div class="card-content"><h3 id="my-card-title-here">My Card Title Here</h3>
<p>This can be written in Markdown where it will be processed into HTML
automatically.</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/"
	id="card1-cta-home">Home</a></li>
			<li><a href="https://bissetii.zoralab.com/"
	id="card1-cta-buy"
	class="pinpoint">Buy</a></li>
		</ul>
</article>


<article class="Card embed"
	style="min-width: 250px;
		width: 250px;
		min-height: 500px;
		height: 500px;">
	<div class="card-thumbnail">
		
<img alt="Card Info 2"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x628.png"
	width="500px"
	height="263px"
	loading="lazy"/>
	</div>
		<div class="card-content"><h3>My Card 2 Title Here</h3>
<p>
	This is the content of another card. You can design as many as you want
	but you can try to keep things under a single umbrella.
</p>
</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/">Home</a></li>
			<li><a href="https://bissetii.zoralab.com/"
	class="pinpoint">Buy</a></li>
		</ul>
</article>


<article class="Card embed"
	style="min-width: 200px;
		width: 200px;
		min-height: auto;
		height: auto;">
		<div class="card-content"><h3 id="card-3-title-here">Card 3 Title Here</h3>
<p>This is to demonstrate that the content can be written in markdown. The entire
content here are completely written in Markdown.</div>
		<ul class="card-call-to-action">
			<li><a href="https://bissetii.zoralab.com/"></a></li>
			<li><a href="https://bissetii.zoralab.com/"></a></li>
		</ul>
</article>


<article class="Card embed"
	style="min-width: 200px;
		width: 200px;
		min-height: auto;
		height: auto;">
		<div class="card-content"><h3>Card 4 Here</h3>
<p>
	This is to demonstrate that the Content field can be written using HTML
	codes. The Content field here is written with HTML codes.
</p>
</div>
</article>

Conclusion

That’s all for card rendering using Bissetii. If you have any question, please feel free to raise a ticket in our Issue Section.