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:

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>

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.