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

Line 1 - On your HTML element, supply the Card class tag. Optionally, you can specify the card width and height using the inline style= property as shown above. Both width and height does accept auto as value.
Line 2 - For the first child, optionally, if you want to use thumbnails, you can create a container with card-thumbnail class tag. The content will be smart-wrapped and any overflow will be hidden.
Line 5 - For the second child, you can create a container with card-content class tag. The content will be smart-wrapped and any overflow will be hidden.
Line 7 - For the last child, optionally, if you want to supply call to action links, you can create a container with card-call-to-action class tag. The wraps all the links inside the containers to pressable button. You can use <ul>.

Example Usage

Bissetii currently renders card as follows:

My Card Title Here

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

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="--card-width: 500px;--card-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><link href="https://bissetii.zoralab.com/"/></li>
			<li><link href="https://bissetii.zoralab.com/"/></li>
		</ul>
</article>


<article class="Card false"
	style="--card-width: 250px;--card-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><link href="https://bissetii.zoralab.com/"/></li>
			<li><link href="https://bissetii.zoralab.com/"/></li>
		</ul>
</article>


<article class="Card false"
	style="--card-width: 200px;--card-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><link href="https://bissetii.zoralab.com/"/></li>
			<li><link href="https://bissetii.zoralab.com/"/></li>
		</ul>
</article>


<article class="Card false"
	style="--card-width: 200px;--card-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:

My Card Title Here

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

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="--card-width: 500px;--card-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><link href="https://bissetii.zoralab.com/"/></li>
			<li><link href="https://bissetii.zoralab.com/"/></li>
		</ul>
</article>


<article class="Card embed"
	style="--card-width: 250px;--card-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><link href="https://bissetii.zoralab.com/"/></li>
			<li><link href="https://bissetii.zoralab.com/"/></li>
		</ul>
</article>


<article class="Card embed"
	style="--card-width: 200px;--card-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><link href="https://bissetii.zoralab.com/"/></li>
			<li><link href="https://bissetii.zoralab.com/"/></li>
		</ul>
</article>


<article class="Card embed"
	style="--card-width: 200px;--card-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.

Card Component

Sass Styling Parts

Javascript Parts

HTML Parts

Key Structure

Example Usage

My Card Title Here

My Card 2 Title Here

Card 3 Title Here

Card 4 Here

Embed Version

My Card Title Here

My Card 2 Title Here

Card 3 Title Here

Card 4 Here

Conclusion

`Card` Component