Card

The Card component is a flexible and extensible content container. Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. They are particularly well-suited to use with the Modal component.

Examples

Base

A simple Card is created with a title and content property.

Show code

HTML

<section>
    <o-switch v-model="isLoading" label="Loading state" />

    <o-card
        :title="title"
        :content="content"
        :subtitle="subtitle"
        :loading="isLoading"
        closeable />
</section>

JS

import { ref } from "vue";

const title = "Card Title";
const subtitle = "Card Subtitle";
const content =
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!";

const isLoading = ref(false);

Slots

The component provides header, title, subtitle, content and footer as named slot templates to customise content.

Show code

HTML

<o-card>
    <template #title>Advanced Card</template>
    <template #subtitle>Card subtitle</template>
    <template #image>
        <img
            alt="Oruga Logo"
            src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" />
    </template>
    <template #content>
        <p class="m-0">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Inventore sed consequuntur error repudiandae numquam deserunt
            quisquam repellat libero asperiores earum nam nobis, culpa
            ratione quam perferendis esse, cupiditate neque quas!
        </p>
    </template>
    <template #footer>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </template>
</o-card>

Image

You can place an image below the header.

Show code

HTML

<o-card
    title="Advanced Card"
    content="Some quick example text to build on the card title and make up the bulk of the card's content."
    image-alt="Oruga Logo"
    image-src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" />

Form

A useful purpose for a card is to display forms in it.

Show code

HTML

<o-card title="Login" closeable @close="onClose">
    <template #content>
        <form action="">
            <o-field label="Email">
                <o-input type="email" placeholder="Your email" required />
            </o-field>

            <o-field label="Password">
                <o-input
                    type="password"
                    password-reveal
                    placeholder="Your password"
                    required />
            </o-field>

            <o-field>
                <o-checkbox label="Remember me" />
            </o-field>
            <div class="card-footer">
                <o-button
                    label="Close"
                    type="button"
                    @click.prevent="onClose" />
                <o-button
                    label="Login"
                    variant="primary"
                    @click.prevent="onLogin" />
            </div>
        </form>
    </template>
</o-card>

JS

function onClose(): void {
    alert("close");
}
function onLogin(): void {
    alert("login");
}

SCSS

.card-footer {
    display: flex;
    align-items: center;
    gap: 5px;
}

Card Component

A flexible and extensible content container.

<o-card></o-card>

Props

Prop name	Description	Type	Values	Default
ariaCloseLabel	Accessibility label for the close button	string	-	From config: card: {   ariaCloseLabel: "Close" }
closeIcon	Close icon name	string	-	From config: card: {   closeIcon: "close" }
closeIconSize	Close icon size	string	-	From config: card: {   closeIconSize: undefined }
closeable	Adds close button to the header	boolean	-	From config: card: {   closeable: false }
component	Component to be injected. Close the component by emitting a 'close' event — $emit('close')	Component	-
content	Card body content, unnecessary when content slot is used	string	-
events	Events to be binded to the injected component	{}	-
iconPack	Icon pack to use for the close icon	string	mdi, fa, fas and any other custom icon pack	From config: card: {   iconPack: undefined }
imageAlt	Card image alt, unnecessary when image slot is used	string	-
imageSrc	Card image src, unnecessary when image slot is used	string	-
loading	Show a loading spinner in the card	boolean	-
loadingLabel	Show label beside the loading icon	string	-
override	Override existing theme classes completely	boolean	-
props	Props to be binded to the injected component	any	-
subtitle	Card header subtitle, unnecessary when subtitle slot is used Class of the header subtitle element	(string & ComponentClass)	-
title	Card header title, unnecessary when title slot is used	string	-

Events

Event name	Properties	Description
close	event Event - native event	close button click event

Slots

Name	Description	Bindings
header	Override the header	close (event: Event): void - function to emit a close event
title	Override the header title, default is title prop
subtitle	Override the header subtitle, default is subtitle prop
close	Override the close icon
image	Override the image
default	Override the default card body	close (event: Event): void - function to emit a close event
content	Override the body content, default is content prop	close (event: Event): void - function to emit a close event
footer	Override the footer	close (event: Event): void - function to emit a close event

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
headerClass	Class of the header element.
titleClass	Class of the header title element.
subtitle	Class of the header subtitle element.
closeClass	Class of the header close element.
imageClass	Class of the image container.
figureClass	Class of the image figure element.
bodyClass	Class of the body element.
contentClass	Class of the body content element.
footerClass	Class of the footer element.

Sass Variables

Current theme ➜ Oruga

The theme does not have any custom variables for this component.

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.