# @telophase/bulma-horizontal-card

> A Bulma extension to support horizontal cards using the native card HTML structure.

Latest version **1.3.3** (published 2023-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @telophase/bulma-horizontal-card
pnpm add @telophase/bulma-horizontal-card
yarn add @telophase/bulma-horizontal-card
bun add @telophase/bulma-horizontal-card
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2023-06-23 |
| First published | 2023-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 29.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Alex H |
| Maintainers | telophase |
| Keywords | css3, sass, scss, html5, bulma, bulma.io, bulma-card, bulma-extension, component, card-component, extension, horizontal, horizontal-card, card, ui |

## Links

- npm: https://www.npmjs.com/package/@telophase/bulma-horizontal-card
- Repository: https://github.com/telophase/bulma-horizontal-card
- Homepage: https://github.com/telophase/bulma-horizontal-card#readme
- Issues: https://github.com/telophase/bulma-horizontal-card/issues
- npm.io page: https://npm.io/package/@telophase/bulma-horizontal-card

## Dependencies (1)

- [bulma](https://npm.io/package/bulma.md) ^0.9.4

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.3.3 (latest) — 2023-06-23
- 1.3.2 — 2023-05-25
- 1.2.2 — 2023-04-26
- 1.1.2 — 2023-04-24
- 1.0.1 — 2023-04-23
- 1.0.0 — 2023-04-23

## README

<div align="center">
<img src="https://raw.githubusercontent.com/telophase/bulma-horizontal-card/main/hugo/static/hcard.png" style="max-width: 80%;">
<h1>bulma-horizontal-card</h1>
<p>
<a href="https://www.npmjs.com/package/@telophase/bulma-horizontal-card"><img src="https://img.shields.io/npm/v/@telophase/bulma-horizontal-card?logo=npm" alt="npm"></a>
<a href="https://www.npmjs.com/package/@telophase/bulma-horizontal-card?activeTab=dependencies"><img src="https://img.shields.io/npm/dependency-version/@telophase/bulma-horizontal-card/bulma?label=bulma%20version&logo=bulma"></a>
<a href="https://www.npmjs.com/package/@telophase/bulma-horizontal-card"><img src="https://img.shields.io/npm/dw/@telophase/bulma-horizontal-card?logo=npm" alt="npm downloads"></a> 
<a href="https://github.com/telophase/bulma-horizontal-card/commits/main"><img src="https://img.shields.io/github/last-commit/telophase/bulma-horizontal-card?label=last%20commit&logo=github"></a>
<a href="https://www.npmjs.com/package/@telophase/bulma-horizontal-card"><img src="https://img.shields.io/npm/l/@telophase/bulma-horizontal-card"></a>
<a href="https://ko-fi.com/gimon"><img src="https://img.shields.io/static/v1?label=support&amp;color=blueviolet&amp;message=@%20ko-fi&amp;logo=ko-fi" alt="support development"></a></p>
<p>
</div>

An extension for [Bulma CSS framework](https://github.com/jgthms/bulma)  to support responsive horizontal cards, since [the project owner is not interested in maintaining the feature](https://github.com/jgthms/bulma/pull/1596#issuecomment-429735282).  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.

**Documentation, installation instructions, and demonstrations can be found here: https://telophase.github.io/bulma-horizontal-card/**.

## important notice!
This extension makes use of the [CSS pseudo-class `:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/: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](https://caniuse.com/css-has) (as of writing). It is NOT supported in any version of Internet Explorer.

An additional utility class is included that can force the `.card-image` to be correct. See [the usage page](https://telophase.github.io/bulma-horizontal-card/usage/#fix-block-footers-on-firefox-with-is-radiusless-bottom) 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
&#169; [Alex H.](https://gimon.zone) ([@telophase](https://github.com/telophase)) 2023-present.<br>
MIT License.

Initial code and CSS class syntax based on the work/input of contributors in [this Bulma pull request](https://github.com/jgthms/bulma/pull/1596). Thank you!

---
_Source: https://npm.io/package/@telophase/bulma-horizontal-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._