Card

Front's card provide a flexible and extensible content container with multiple variants and options.

Bootstrap Card documentation

Basic example

Below is an example of a basic card with mixed content and a fixed width.

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag.

Header

Add an optional header within a card. By default .card-header is set to display: flex; and justify-content: space-between; and align-items: center;.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

Add an optional footer within a card.

Sizing

Use .card-sm class.

Use .card-lg class.

Images

Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .no-gutters and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.

Header borderless

Remove border width and padding-bottom from the header.

Body height

Use .card-body-height to add a scrollable fixed content height.

Body centered

Use .card-body-centered to center align the content in a .card-body-height content.

Body stretched

Use .card-body-stretched to align a content in one line.

Dashed

Use .card-dashed and .card-dashed-body to wrap a card component with a dashed border style.

Hover shadow

Use .card-hover-shadow class.

Pinned

Use .card-pinned to pin a component to the top right corner of a card.

Border left

Except for the left, each border specifies a transparent border. You can use any text color utilities on the border color.

Alert

Use .card-alert with alert to remove the border-radius and margin-bottom to perfectly sit within a card body.

Profile

Create beautiful profile cards.

Project

Create beautiful project cards.

Use .card-progress-wrap to wrap a progress at the top of a card. Whereas .card-progress along with the .progress to set a smaller height to the progress than its default size.

Team

Create beautiful team cards with list-group.

Table

.card-table aligns table sizes with card body sizes.

Fullscreen

Use Front's hs-fullscreen.js plugin to add fullscreen dialog.

Fullscreen methods

Parameters Description Default value
targetEl Element which will be fullscreen null
preventScrollClassName Disable scroll .hs-fullscreen-on
toggleClassName Class for target element .hs-fullscreen
mainContainerSelector Element for preventScrollClassName body

Loading state

Use Front's hs-loading-state.js plugin to show the loading state in your projects.

Tabbable example:

Loading state methods

Parameters Description Default value
targetEl Сontainer inside which will be loading null
targetElStyles Optional styles for target el container { position: '' }
eventType Set trigger event
Available options:
  • click
  • mouseenter
 click
loaderMode Available options:
  • simple
  • with-text
 simple
loaderText Appears a text you enter if set to with-text Loading...
removeLoaderDelay Delay for hide overlay 1500
loaderContainerClassNames Classes for container hs-loader-wrapper
loaderContainerExtendedClassNames Optional classes for container null
loaderClassNames Classes for wrapper on simple mode hs-loader
loaderExtendedClassNames Optional classes for wrapper on simple mode null
loaderWithTextClassNames Classes for wrapper on with-text mode hs-loader-with-text
loaderIconClassNames Classes for loader icon .spinner-border .spinner-border-sm .text-primary
loaderIconExtendedClassNames Optional classes for loader icon null
loaderTextClassNames Classes for loader text (with-text mode) hs-loader-text
loaderTextExtendedClassNames Optional classes for loader text (with-text mode) null
beforeLoading Callback function null
afterLoading Callback function null

Remove element

Use Front's hs-remove-element.js plugin to add delete elements.

Remove element methods

Parameters Description Default value
targetEl Element which will be deleted null
beforeDelete Callback function null
afterDelete Callback function null

Other classes to note

Class Description
.card-dropdown-filter-centered Used to fix the sizing and positioning of the "Filter" dropdown card in the Users page on smaller devices.
.card-unfold Fixes z-index issue where in card used .stretched-link class.
Example: Cards with "More" button on top right corner of a card in Apps file manager.
.card-nav-vertical Can be used to make sizing smaller and to change flex-direction: row; to column in a card where .nav component is utilized.
Example: "Teams" section in User profile.
.card-navbar-nav Sets width of the card to 100% and adds extra padding-top and padding-bottom spaces.
Example: Left side navigation panel in Account settings.