#### Content - Card Header

Statistics Invoices Schedule

###### Basic elements

Just a mix of basic elements

###### Left 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

###### Linked inline list

- Download
- Upload
- Generate

Card header with linked inline list

###### Title badge New

Card title with badge element

###### Title pill badge 387

Card title with pill badge element

###### Pagination

- ←
- 1
- 2
- 3
- →

Card header pagination. Available in 3 sizes

###### 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

###### Linked bullet list

- Download
- Upload
- Generate

Card header with linked bullet inline list

###### Header badge

Badge
Card header with `.badge` element

###### Header pill badge

578
Card header with `.badge-pill` element

###### Heading pager

- ← Previous
- Next →

Card header pager. Available in 3 sizes

###### Card header thumbnails

Single and thumbnail groups

###### Single 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 modal

###### Collapse/expand card content

Use `data-action="collapse"` attribute to add collapsible functionality to the card body

###### 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 elements

###### Single checkbox

Checked
Single checkbox. Available in both directions

###### Checkbox group

Unchecked
Checked
Header with group of inline checkboxes

###### Switchery toggle

Enable
Switchery 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

Selected
Single radio. Available in both directions

###### Radio group

Unselected
Selected
Header with group of inline radio buttons

###### Toggle switch

Card header with Bootstrap toggle switch

###### Input with icon

Input field and icon feedback

###### Touchspin spinners

Heading with `Touchspin` input group spinner

###### Select menus

Various select options

###### Basic 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 options

###### Single 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 elements

###### Default 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

60% Complete
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
Title dropdown
Card header with title as a dropdown menu

###### NoUI slider

Card header with NoUI slider. Available in all sizes

###### Mixing elements

Different element variations

###### Input and button

Mixing input field with button

###### Checkbox and dropdown

Enable
Mixing checkbox with label and icon dropdown

###### Switch and controls

Show it?
Mixing switchery toggle and card control buttons

###### Text and button

Error occurred
Mixing text and button dropdown

###### Spinner and progress

60% Complete
Mixing spinner and progress bar

###### Multiple elements

Badge
Mixing spinner icon, badge and icon list group

###### Responsive options

Resize the browser or open on mobile

###### Always 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:
60% Complete
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.

###### Wrap and toggle

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:
60% Complete
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.

##### Settings modal

First name
Last name
Address line 1
Address line 2
City
State/Province
ZIP code
Email name@domain.com
Phone # +99-99-9999-9999