

My Card Title Here
This can be written in Markdown where it will be processed into HTML automatically.
Card
ComponentCard
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
.
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.
This component does not depend on any Javascript.
Due to the undefined condition from W3C manuals, Bissetii currently uses class styling tag to structure the HTML component.
The key structure to the card is as follows:
|
|
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.card-thumbnail
class tag. The
content will be smart-wrapped and any overflow will be hidden.card-content
class tag. The content will be smart-wrapped and
any overflow will be hidden.card-call-to-action
class tag. The wraps all the links inside
the containers to pressable button. You can use <ul>
.Bissetii currently renders card
as follows:
This can be written in Markdown where it will be processed into HTML automatically.
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.
This is to demonstrate that the content can be written in markdown. The entire content here are completely written in Markdown.
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>
Bissetii also renders the embedded version of cards by adding additional embed
class tag as follows:
This can be written in Markdown where it will be processed into HTML automatically.
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.
This is to demonstrate that the content can be written in markdown. The entire content here are completely written in Markdown.
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>
That’s all for card rendering using Bissetii. If you have any question, please feel free to raise a ticket in our Issue Section.