Cards

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;.

Header content between

Use .card-header-content-{breakpoint}-between to align items in the corners and modifier classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.

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.

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

When using card groups with footers, their content will automatically line up.

Card transition

Add animation on hover using .card-transition

Card ghost

Need a card that has no box-shadow and border colors? Use .card-ghost

Card dashed

Use .card-dashed

Card pinned

Need to place a component on top of a card image? Use .card-pinned-top-start

or .card-pinned-top-end

or .card-pinned-bottom-start

or .card-pinned-bottom-end

Alert

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

Table

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

Centered

Use .card-centered to center align a .card-body content.

Body height

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

Cover shadow

Use .card-hover-shadow to add a smooth animation with bolder shadow around a card.

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.

Profile

Create beautiful profile cards.

Team

Create beautiful team cards with list-group

Fullscreen

Use .card-header-content-between to align items in the corners.

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-avatar-group Fixes z-index issue where in card used a .stretched-link class.
Example: Cards with three dots icon on top right corner of a card in User Profile Projects.
.card-dropdown-btn Fixes z-index issue where in card used a .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.