Card | Buval

Card

An all-around flexible and composable component

The card component comprises several elements that you can mix and match:

card: the main container
- card-header: a horizontal bar with a shadow
  - card-header-title: a left-aligned bold text
  - card-header-icon: a placeholder for an icon
- card-image: a fullwidth container for a responsive image
- card-content: a multi-purpose container for any other element
- card-footer: a horizontal list of controls
  - card-footer-item: a repeatable list item

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016

<template>
    <div class="card">
        <div class="card-image">
            <figure class="image">
                <img src="/static/img/video.svg" alt="Placeholder image">
            </figure>
        </div>
        <div class="card-content">
            <div class="media">
                <div class="media-left">
                    <figure class="image is-48x48">
                        <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
                    </figure>
                </div>
                <div class="media-content">
                    <p class="title is-4">John Smith</p>
                    <p class="subtitle is-6">@johnsmith</p>
                </div>
            </div>

            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                <a href="#">#css</a> <a href="#">#responsive</a>
                <br>
                <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
            </div>
        </div>
    </div>
</template>

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016

<template>
    <div class="card">
        <header class="card-header">
            <p class="card-header-title">
                Component
            </p>
            <a href="#" class="card-header-icon" aria-label="more options">
                <span class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
            </a>
        </header>
        <div class="card-content">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
                <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
                <br>
                <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
            </div>
        </div>
        <footer class="card-footer">
            <a href="#" class="card-footer-item">Save</a>
            <a href="#" class="card-footer-item">Edit</a>
            <a href="#" class="card-footer-item">Delete</a>
        </footer>
    </div>
</template>

<template>
    <section>
        <b-checkbox><i class="icar bt-suv" /></b-checkbox>
        <b-checkbox><i class="icar bt-truck" /></b-checkbox>

        <br><br><br><br>

        <b-checkbox><i class="icar is-mini bt-suv" /></b-checkbox>
        <b-checkbox><i class="icar is-mini bt-truck" /></b-checkbox>
    </section>
</template>

Cover with sizes

<template>
    <section>
        <div class="card">
            <div class="card-cover is-mini">
                <figure class="image">
                    <img src="/static/img/car-vector.jpg" alt="Placeholder image">
                </figure>
            </div>
            <div class="py-1 px-2">
                <button class="button is-primary is-fullwidth">
                    <strong class="has-text-mix">Buy a Car</strong>
                </button>
            </div>
        </div><br>
        <div class="card">
            <div class="card-cover">
                <figure class="image">
                    <img src="/static/img/car-vector.jpg" alt="Placeholder image">
                </figure>
            </div>
            <div class="py-1 px-2">
                <button class="button is-mix is-fullwidth">
                    <strong class="has-text-primary">Trade my Car</strong>
                </button>
            </div>
        </div>
    </section>
</template>

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$card-color`	color	`$text`
`$card-background-color`	color	`$scheme-main`
`$card-shadow`	size	`0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)`
`$card-header-background-color`	string	`transparent`
`$card-header-color`	color	`$text-strong`
`$card-header-padding`	size	`0.75rem 1rem`
`$card-header-shadow`	size	`0 0.125em 0.25em rgba($scheme-invert, 0.1)`
`$card-header-weight`	font-weight	`$weight-bold`
`$card-content-background-color`	string	`transparent`
`$card-content-padding`	size	`1.5rem`
`$card-footer-background-color`	string	`transparent`
`$card-footer-border-top`	size	`1px solid $border-light`
`$card-footer-padding`	size	`0.75rem`
`$card-media-margin`	size	`$block-spacing`