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.

Supported Card Designs

Bissetii currently supports a number of card designs via its sub-components. Feel free to explore each of them and deploy accordingly:

Vertial Layout

Vertical Layout

Straight vertical thumbnail, content, and then CTA layout.

Hugo

Bissetii prepared a number of Hugo interfaces to generate Card component seamlessly across all output formats.

Card Datafile

Due to the massive data contents for a Card component, it was decided to save and load it from a datafile (e.g. card1.toml) directly. There are multiple parts vital to facilitate a proper card data file.

General Card Data

The datafile first starts with the overall card attributes. The following would be the minimum general card data:

1
2
3
4
5
6
Type = "vertical"
Class = "additional-css-class"
Style = "--my-variable: 2px;"
ID = "special-card-01"
Width = "max-content"
Height = "max-content"

Content Data

Then, the datafile defines the <div class="content"> container’s contents. The following would be the minimum content data:

 7
 8
 9
10
11
12
13
14
15
16
17
[Content]
HTML = """
### My Ideal Card
This can be written in Markdown or HTML which will then be processed by Bissetii
into Vanilla HTML.
"""
AMPHTML = """
### My Ideal Card
This can be written in Markdown or HTML which will then be processed by Bissetii
into AMPHTML.
"""

CTA Data

The datafile then defines the <div class="cta"> container’s contents. The following would be the minimum CTA data:

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
[CTA]
HTML = """
"""
AMPHTML = """
"""

[CTA.Links.1]
URL = "/"
HTML = "Home"
AMPHTML = "Home"
ID = "card1-cta-ideal-card-home"
Class = "button clean"
Rel = ""
Download = false
Target = ""

[CTA.Links.2]
URL = "/"
HTML = "Buy"
AMPHTML = "Buy"
ID = "card1-cta-ideal-card-buy"
Class = "button"
Rel = ""
Download = false
Target = ""

Thumbnail Data

Lastly, the datafile defines the content of the <div class="thumbnail"> container. The following would be the minimum thumbnail data:

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
[Thumbnail]
HTML = """
"""
AMPHTML = """
"""
Picture = "media.images.myAlbum01.IMG01"

[Thumbnail.Image]
AltText = "Vertial Layout"
URL = "/img/thumbnails/default-1200x628.png"
Width = "350"
Height = "700"
IsMap = "false"
LoadingMode = "lazy"
SrcList = """
"""
Layout = ""
Class = ""
Sizes = """
"""

Shortcodes

By default, it is hard to process single or multiple card data across multiple outputs while maintaining a single input format. Hence, Bissetii prepared the following shortcodes to standardize the card rendering. These shortcodes are specific to Bissetii which works differently from Hugo.

card Shortcode

Renders a single card from a given data path.

1
{{< card "[DATAPATH]" >}}
  1. DATAPATH - COMPULSORY. The Hugo’s pathing to the card data file.

Example usage:

1
{{< card "bissetii.data.examples.cards.card1" >}}

cards Shortcode

Renders a deck of cards from a given data file directory path and organize them using Grid Component.

1
{{< cards "[DATAPATH]" >}}
  1. DATAPATH - COMPULSORY. The Hugo’s pathing to the directory containing all the cards.

Example usage:

1
{{< cards "bissetii.data.examples.cards" >}}

Go

Coming Soon.

HTML

Bissetii supports Card component seamlessly across multiple output formats. Additionally, starting from version v1.13.0, the use of CSS variable is vital for its upgrade from v1.12.5.

Bissetii HTML codes for this component are the same for Vanilla HTML5 and AMPHTML. Due to the undefined condition from W3C manuals, Bissetii is currently using class styling tag to structure the HTML component. The HTML key structure would be as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<article class="Card TYPE" style="--card-width: 250px;">
	<div class="thumbnail">
		<!-- OPTIONAL. Thumbnail placement here. -->
	</div>
	<div class="content">
		<!-- COMPULSORY. Main card content here. -->
	</div>
	<div class="cta">
		<!-- OPTIONAL. List of call-to-action (CTA) here. -->
	</div>
</article>

Example code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<article class="Card vertical"
	style="--card-width: max-content;--card-height: max-content;">
	<div class="thumbnail"><picture>
		<source srcset="https://bissetii.zoralab.com/img/bg/img_800w.svg 1x,https://bissetii.zoralab.com/img/bg/img_1024w.svg 2x,https://bissetii.zoralab.com/img/bg/img_2048w.svg 3x" media="(min-width: 20em)" type="image/svg&#43;xml">
		<source srcset="https://bissetii.zoralab.com/img/bg/img_800w.svg 1x,https://bissetii.zoralab.com/img/bg/img_1024w.svg 2x,https://bissetii.zoralab.com/img/bg/img_2048w.svg 3x" media="(min-width: 40em)" type="image/svg&#43;xml">

<img alt="picture elements"
	src="https://bissetii.zoralab.com/img/bg/img_placeholder.svg"
	class="my-class"
	loading="lazy"/>
</picture>
</div>
	<div class="content"><h3 id="my-ideal-card">My Ideal Card</h3>
<p>This can be written in Markdown or HTML which will then be processed by Bissetii
into Vanilla HTML.</div>
	<div class="cta"><ul class='default'><li><a href="https://bissetii.zoralab.com/" id="card1-cta-ideal-card-home" class="button clean">
	Home</a>
</li><li><a href="https://bissetii.zoralab.com/" id="card1-cta-ideal-card-buy" class="button">
	Buy</a>
</li></ul></div>
</article>

CSS

Bissetii provided a list of CSS variables dedicated for list styling alteration without needing to recompile Sass. These variables are best applied directly to the Card HTML tags. Example:

1
2
3
<article class="Card vertical" style="--card-width: 500px">
	...
</article>

--card-grid

Affects the grid layout of the card. The acceptable value shall be compatible with grid: CSS field. The default is unset which is intentionally causing rendering error while the Card sub-components shall define its own default value.

--card-overflow

Affects the overflow behavior of the entire card. The acceptable value shall be compatible with overflow: CSS field. The default is hidden.

--card-width

Affects the width of the entire card. The acceptable value shall be compatible with width: CSS field. The default is auto.

--card-height

Affects the height of the entire card. The acceptable value shall be compatible with height: CSS field. The default is fit-content.

--card-border-radius

Affects the edge roundness of the entire card. The acceptable value shall be compatible with border-radius: CSS field. The default is 1rem.

--card-padding

Affects the padding spacing of the entire card. The acceptable value shall be compatible with padding: CSS field. The default is 0.

--card-margin

Affects the margin spacing of the entire card. The acceptable value shall be compatible with margin: CSS field. The default is .5rem.

--card-border

Affects the border styling of the entire card. The acceptable value shall be compatible with border: CSS field. The default is unset.

--card-background

Affects the background styling of the entire card. The acceptable value shall be compatible with background: CSS field. The default is var(--color-grey-50).

--card-filter

Affects the filter styling of the entire card. The acceptable value shall be compatible with filter: CSS field. The default is drop-shadow(0 0 .1rem var(--color-grey-900)).

--card-thumbnail-overflow

Affects the overflow behavior for the <div class="thumbnail"> container. The acceptable value shall be compatible with overflow: CSS field. The default is hidden.

--card-thumbnail-height

Affects the height of the <div class="thumbnail"> container. The acceptable value shall be compatible with height: CSS field. The default is 100%.

--card-thumbnail-padding

Affects the padding spacing of the <div class="thumbnail"> container. The acceptable value shall be compatible with padding: CSS field. The default is 0.

--card-thumbnail-margin

Affects the margin spacing of the <div class="thumbnail"> container. The acceptable value shall be compatible with margin: CSS field. The default is 0.

--card-content-overflow

Affects the overflow behavior for the <div class="content"> container. The acceptable value shall be compatible with overflow: CSS field. The default is auto.

--card-content-height

Affects the height of the <div class="content"> container. The acceptable value shall be compatible with height: CSS field. The default is unset.

--card-content-padding

Affects the padding spacing of the <div class="content"> container. The acceptable value shall be compatible with padding: CSS field. The default is 0.

--card-content-margin

Affects the margin spacing of the <div class="content"> container. The acceptable value shall be compatible with margin: CSS field. The default is 0.

--card-cta-overflow

Affects the overflow behavior for the <div class="cta"> container. The acceptable value shall be compatible with overflow: CSS field. The default is visible.

--card-cta-height

Affects the height of the <div class="cta"> container. The acceptable value shall be compatible with height: CSS field. The default is unset.

--card-cta-padding

Affects the padding spacing of the <div class="cta"> container. The acceptable value shall be compatible with padding: CSS field. The default is 0.

--card-cta-margin

Affects the margin spacing of the <div class="cta"> container. The acceptable value shall be compatible with margin: CSS field. The default is 0.

--card-cta-list-flex-direction

Affects the direction cta items arrangement for List with .default CSS class. The acceptable value shall be compatible with flex-direction: CSS field. The default is row.

--card-cta-list-align-items

Affects the cta items vertical alignment inside the List with .default CSS class. The acceptable value shall be compatible with align-items: CSS field. The default is center.

--card-cta-list-justify-content

Affects the cta items horizontal alignment inside the List with .default CSS class. The acceptable value shall be compatible with justify-content: CSS field. The default is center.

--card-cta-list-align-content

Affects the cta items overall content alignment inside the List with .default CSS class. The acceptable value shall be compatible with align-content: CSS field. The default is center.

Javascript

This component does not rely on any Javascript.

Sass

Depending on release version, the Sass files work differently. Bissetii does not package Sass codes explictly so please view them via the git repository.

v1.13.0 and Above

Bissetii uses Dart Sass to compile the styling Sass codes into CSS file. This component’s main Sass codes are available at the following location:

pkg/components/internal/card

Bissetii splits different card types into its own sub-components which has their own Sass codes.

v1.12.5 and Before

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.

Researches

Here are the researches done to ensure Card component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about Card component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.