Victoria Baker
Senior developer
Basic elements
Just a mix of basic elementsLeft title icon
Card title with left icon
Single icon
Card header with a single icon
Icon group
Card header with multiple icons group
Subtitle Some alt description
Card title with subtitle using inline elements with
.font-size-base class
Inline list
- Version 2.0
- December 12th
Card header with simple inline list
Title badge New
Card title with badge element
Title pill badge 387
Card title with pill badge element
Right title icon
Card title with right icon
Icon dropdown
Card header with single icon and dropdown
Icons group with dropdown
Card header with multiple icons and dropdown menu
Heading text
Some text or link and icon
Card header text. Make sure the text is wrapped in inline element
Bullet list
- Version 2.0
- December 12th
Card header with bullet inline list
Header badge
Badge
Card header with
.badge element
Header pill badge
578
Card header with
.badge-pill element
Card header thumbnails
Single and thumbnail groupsSingle thumbnail
Card header with single thumbnail
Thumbnail group
Card header with thumbnail group
Thumb with badge
-
9
Card header thumbnail with badge
Linked thumbnail
Card header with single linked thumbnail
Linked thumbnail group
Card header with linked thumbnail group
Thumb with badge mark
Card header thumbnail with badge mark
Card controls
Collapse/expand, move, remove, reload, fullscreen and modalCollapse/expand card content
Use
data-action="collapse" attribute and wrap collapsible content in div with .collapse.show classes
Reload card content
Use
data-action="reload" attribute to add show spinner with overlay and block user interactions
Remove card
Use
data-action="remove" attribute to add an option to collapse-and-remove functionality
Move (sort) card
Use
data-action="move" attribute to make card sortable (draggable) within specified container
Fullscreen mode
Use
data-action="fullscreen" attribute to add an option to display card in full screen mode
Toggle modal
Use
data-action="modal" attribute to toggle modal with content. Make sure the markup exists
Form components
A set of different form elementsSingle checkbox
Single checkbox. Available in both directions
Checkbox group
Header with group of inline checkboxes
Switch toggle
Switch toggle. Available in all styles and sizes
Text input
Header with basic text input field
File input
Card header with custom file input field
Single radio
Single radio. Available in both directions
Radio group
Header with group of inline radio buttons
Switch toggles
Multiple inline switches
Input with icon
Input field and icon feedback
Touchspin spinners
Heading with
Touchspin input group spinner
Select menus
Various select optionsBasic select
Card header with basic select
Single Select2 select
Card header with a single
Select2 select
Multiselect - single selection
Heading with single multiselect
Custom select
Card header with custom select
Multiple Select2 select
Card header with multiple
Select2 select
Multiselect - multiple selection
Heading with multiple select
Header buttons
Basic buttons with optionsSingle button
Header with basic button. Available in all sizes, colors and options
Outline button
Header with outline button. Available in all sizes, colors and options
Button dropdown
Header with single button dropdown menu
Segmented button
Card header with segmented button
Multiple buttons
Card header with multiple buttons
Icon button
Card header with single icon button
Outline button
Header with outline icon button
Icon button dropdown
Card header with icon button dropdown
Segmented icon button
Card header with segmented icon button
Multiple icon buttons
Card headers with multiple icon buttons
Other elements
Other card header elementsDefault tabs
This is the first card tab content
This is the second card tab content
This is the third card tab content
This is the fourth card tab content
Default pills
This is the first card pill content
This is the second card pill content
This is the third card pill content
This is the fourth card pill content
Progress bar
Card header with progress bar. Available in all colors and options
jQuery UI slider
Header with jQuery UI slider. Available in all sizes
Bottom tabs
This is the first card tab content
This is the second card tab content
This is the third card tab content
This is the fourth card tab content
Toolbar tabs
This is the first card tab content
This is the second card tab content
This is the third card tab content
This is the fourth card tab content
Card header with title as a dropdown menu
NoUI slider
Card header with NoUI slider. Available in all sizes
Mixing elements
Different element variationsInput and button
Mixing input field with button
Checkbox and dropdown
Mixing checkbox with label and icon dropdown
Switch and controls
Mixing switch toggle and card control buttons
Text and button
Error occurred
Mixing text and button dropdown
Spinner and progress
Mixing spinner and progress bar
Multiple elements
Badge
Mixing spinner icon, badge and icon list group
Responsive options
Resize the browser or open on mobileAlways visible
Add
.header-elements-inline class to direct parent of .header-elements to make header elements visible on mobile and desktop.
Wrap and show
To wrap header elements to the second row, add
.header-elements-[breakpoint]-inline class to parent container. Breakpoint in class name is required, CSS needs to know screen size.
Stack elements
Loading:
Header (block) elements are stackable by default. Use responsive margin classes to control vertical and horizontal spacing. Make sure margin and container breakpoints are matching.
Centered elements
Rating:
(49)
Use combination of
.d-flex and .justify-content-center classes to center items in the line. All flex helper classes can be used as well for additional position options.
Hide on mobile
To hide header elements on certain breakpoints, use
.header-elements-[breakpoint]-inline class in parent container and .d-none in header elements container.
You can also use optional toggler - add
.d-flex to page title and custom markup for the toggle button. And .d-none to header elements container to make them hidden by default.
Single line
Loading:
You can easily show header elements in a single line, just wrap inner elements in container with
.d-flex and .align-items-center classes. Use other flex utilities for adjustments.
Justified elements
Rating:
(49)
Use combination of
.d-flex and .justify-content-between (or .m(l,r)-auto) classes to distribute items evenly in the line: first item is on the start line, last item on the end line.