Add Horizontal Card

[Wikiki]

Add Horizontal Card component

[axieum]

Came here to add this exact feature. Glad someone else also wants this! 👍

[HDVinnie]

Any update? Will this be merged?

[CreativeBulma]

I had no feedback :-(

[HDVinnie]

well I would love to see this added for sure

[diomed]

is html same as for vertical one, or what's the structure?

[Wikiki]

Hi @diomed,

the html is the same than for the vertical one.

[diomed]

@Wikiki looks like there is no way to reverse image position <div class="media-right"> does nothing, when I want image to be on the right side.

[Wikiki]

Hi @diomed,

you're right, I'll add that.

[erickzhao]

Thanks for making this!

One question: do you think it would be better for the default behavior of this card to revert to vertical for mobile displays (since Bulma emphasizes mobile readability)?

You could just wrap everything in an @include tablet (or however it's done in .sass) to make that work!

[axieum]

I agree with @erickzhao! Although, some kind of override should still exist (i.e. .is-mobile; like the Level implementation).

[diomed]

@Wikiki you never updated your code to add that

[Wikiki]

Hi,

I'll try to work on it tomorrow.

[Wikiki]

Code updated to on mobile (using .is-mobile modifier) and with image size modifiers. I hope Jeremy will integrate it soon.

[lesleslie]

Wow, I was just looking for this.

Please merge!!!

Thanks everyone!

[diomed]

can image spread to take 3/5 of cart? if yes; how?

[twaiiiin]

@diomed I tried to do something like that too.

    .card.is-horizontal.is-half .card-image {
        flex: 6;
    }
    .card.is-horizontal.is-half .card-content {
        flex: 6;
    }

    .card.is-horizontal.is-quarter .card-image {
        flex: 3;
    }
    .card.is-horizontal.is-quarter .card-content {
        flex: 9;
    }

    .card.is-horizontal.is-third .card-image {
        flex: 4;
    }
    .card.is-horizontal.is-third .card-content {
        flex: 8;
    }

    .card.is-horizontal.is-twothird .card-image {
        flex: 8;
    }
    .card.is-horizontal.is-twothird .card-content {
        flex: 4;
    }

You can use these modifiers: is-half, is-quarter, is-third,is-twothird.

I hope it helps.

[diomed]

@jgthms how is it possible that despite so much interest for some components, they are still not included in new release?

[jgthms]

Because the easy part is to add a feature. The hard part is to maintain it.

If a feature is added, the original contributor has no obligation to fix any bug that come with it, but I do. And if a feature starts becoming a weight down the road, I can’t take it back. So I need to evaluate what the benefit of a feature is in the short term against its cost in the long run.

[dsolmann]

So? Is it going into Bulma?

[rishavs]

Having horizontal cards would be great.

[cliffpyles]

@jgthms Would the introduction of visual regression tests help with the maintenance concerns you mentioned? If so – is that something you would be up for as a PR?

[dewey]

@Wikiki Thanks for this, used it in my project and works well 👍

[diomed]

@dewey could you share bulma.css file with this here?

[dewey]

@diomed I just converted the code from the Pull Request to CSS and used that, not sure if there's something in there that I tweaked but this works for me.

.card.is-horizontal {
  flex-direction: row;
  display: flex;
  flex-basis: 50ex;
  flex-grow: 0;
  flex-shrink: 1;
  box-shadow: none;
}

.card.is-horizontal .card-image {
  align-self: center;
}

.card.is-horizontal .image {
  min-height: 100%;
}

.card.is-horizontal .card-content {
  flex: 1;
}

.card.is-horizontal .card-content {
  padding-left: 1em;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.8em;
}

.card.is-horizontal {
  ul {
    list-style: none;
    margin: 0;
  }

  .is-divider {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
}

[rishavs]

Any chance of getting this merged? Its been a while and we can really use a feature like this.

[shryder]

This would be great to have

[adilj13]

I got it done using tiles and it is responsive for mobile.

Example for a product item

<div class="tile is-parent box">
        <article class="tile is-child is-4">
                <img src="IMAGE_URL" alt="" srcset="">
        </article>
        <article class="tile is-child is-8 is-primary">
                <p class="title is-spaced is-3">PRODUCT_TITLE</p>
                <p class="subtitle is-5">PRODUCT_PRICE</p>
                <p class="content">PRODUCT_DESCRIPTION</p>
        </article>
</div>

[telophase]

For anyone still looking for this functionality, I created an extension that adds horizontal cards that you can use in the meantime. I still need to add a few features and fine-tune responsive behaviour, but you can do everything the proposal allows you to do (and a bit more!)

https://github.com/telophase/bulma-horizontal-card