Home - bulma-horizontal-card Documentation

An extension for Bulma CSS framework to support responsive horizontal cards, since the project owner is not interested in maintaining the feature. The syntax and classes of vanilla (“normal”) cards are reused and preserved, so you can still use headers and footers! It is also highly customizable; horizontal cards can be styled independently of normal ones via distinct SASS variables.

notices

WARNING: potential compatibility issues

This extension makes use of the CSS pseudo-class :has() in order to achieve automatic/contextual control of the .card-image’s border-radius. Specifically, it is used in a single case to control the removal of the bottom border-radius from the .card-image when a footer.card-footer element is present as a child of .card. This was the best way I could think to implement this.

:has() is supported in Chrome, Edge, Opera, and Safari by default, and major mobile browers, but not in Firefox without enabling a special flag (as of writing). It is NOT supported in any version of Internet Explorer.

So, this extension includes an additional utility class that can force the .card-image to be correct. See the usage page for more information.

contributing

Contributions to this extension are always welcome, be they new code, small fixes, or edits to the documentation!

Fork this project on Github and file a pull request (or simply file an issue), and I’ll merge it back into main.

license

Initial code and CSS class syntax based on the work/input of contributors in this Bulma pull request. Thank you!