panels

Card Panels

Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.

Bootstrap Inverse Card Panels

If you’re familiar with Bootstrap 3, cards replace old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. All default card panels includes a class .card-inverse. You may also use Unify predefined colors with global classes or create your own colors.

Primary panel

Use a class .bg-primary for default Bootstrap primary color.

Primary panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Info panel

Use a class .bg-info for default Bootstrap info color.

Info Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Success panel

Use a class .bg-success for default Bootstrap success color.

Success Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Warning panel

Use a class .bg-warning for default Bootstrap warning color.

Warning Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Danger panel

Use a class .bg-danger for default Bootstrap danger color.

Danger Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify primary panel

Use a class .g-bg-primary and g-brd-primary for default Unify primary color color.

"You may use any availabe Unify predefined colors or create your own style."

Unify Primary Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify blue panel

Use a class .g-bg-blue and g-brd-blue for default Unify blue color color.

Unify Blue Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify light red panel

Use a class .g-bg-lightred and g-brd-lightred for default Unify lightred color color.

Unify Light Red Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify black panel

Use a class .g-bg-black and g-brd-black for default Unify black color color.

Unify Black Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify teal panel

Use a class .g-bg-teal and g-brd-teal for default Unify teal color color.

Unify Teal Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify purple panel

Use a class .g-bg-purple and g-brd-purple for default Unify purple color color.

Unify Purple Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify cyan panel

Use a class .g-bg-cyan and g-brd-cyan for default Unify cyan color color.

Unify Cyan Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify dark blue panel

Use a class .g-bg-darkblue and g-brd-darkblue for default Unify darkblue color color.

Unify Dark Blue Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify pink panel

Use a class .g-bg-pink and g-brd-pink for default Unify pink color color.

Unify Pink Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Bootstrap Outline Card Panels

If you’re familiar with Bootstrap 3, cards replace old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. You may also use Unify predefined colors with global classes or create your own colors.

Default outline panel

Default Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Primary outline panel

Use an addition utility class .text-white for card headers.

Primary Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Info outline panel

Use an addition utility class .text-white for card headers.

Info Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Success outline panel

Use an addition utility class .text-white for card headers.

Success Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Warning outline panel

Use an addition utility class .text-white for card headers.

Warning Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Danger outline panel

Use an addition utility class .text-white for card headers.

Danger Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify primary outline panel

Use an addition utility class .text-white for card headers.

"You may use any availabe Unify predefined colors or create your own style."

Unify Primary Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify blue outline panel

Use an addition utility class .text-white for card headers.

Unify Blue Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify light red outline panel

Use an addition utility class .text-white for card headers.

Unify Light Red Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify black outline panel

Use an addition utility class .text-white for card headers.

Unify Black Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify teal outline panel

Use an addition utility class .text-white for card headers.

Unify Teal Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify purple outline panel

Use an addition utility class .text-white for card headers.

Unify Purple Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify cyan outline panel

Use an addition utility class .text-white for card headers.

Unify Cyan Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify dark blue outline panel

Use an addition utility class .text-white for card headers.

Unify Dark Blue Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


Unify pink outline panel

Use an addition utility class .text-white for card headers.

Unify Pink Outline Panel

Accusamus et iusto odio

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.