`Vertical Layout Card` Sub-Component

Vertical Card Layout component is the Card component design that holds vertical layout where thumbnail is at the top, content is at the center, and CTA is at the bottom of the card.

This component is available starting from v1.13.0.

Here is a rendering example:

My Ideal Card

This can be written in Markdown or HTML which will then be processed by Bissetii into Vanilla HTML.

Hugo

All Hugo interface is supported directly from Card Component.

Card Datafile

For deploying this sub-component to style a particular card, the Type field must be set to vertical.

1
2


Type = "vertical"
...

Go

All Go interface is supported directly from Card Component. No additional feature is added.

HTML

Extending from Card Component, Bissetii styles the Card component with this sub-component via the .vertical class tag.

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


<article class="Card vertical" style="--card-width: 250px;">
	...
</article>

Line 1 - COMPULSORY
1. Set the .vertical CSS class tag alongside .Card CSS class tag will automatically styles the card with Vertical Layout Card design.

CSS

All CSS variables are directly supported directly from Card Component. There is no additional feature or variable.

Javascript

All Javascript are directly supported directly from Card Component. There is no additional feature or variable.

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/cardvertical

Researches

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

SCHEDULED COMING SOON

Epilogue

That’s all about Vertical Layout 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.