IMS Theme

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Eyebrow

Extra Small

Small

Large

Body (Large) (.font-lg)

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis itaque aperiam fugiat quia molestias aspernatur molestiae obcaecati maiores tempore, eius id maxime velit deserunt quis reprehenderit natus. Neque, quos ipsa.

Body Default

Body Small (.font-sm)

Body Extra Small (.font-xs)

Buttons

Buttons Default

Buttons Small

Color

IMS Base CSS Variable Colors

Core Colors

ims-core-white

ims-core-black

ims-core-brand

ims-core-secondary

ims-core-tertiary

Brand Shades

ims-core-brand-75

ims-core-brand-50

ims-core-brand-25

ims-core-brand-10

Grays

ims-gray-10

ims-gray-20

ims-gray-30

ims-gray-35

ims-gray-40

ims-gray-45

ims-gray-50

Digital (Info) Palette

ims-info-blue

ims-info-green

ims-info-yellow

ims-info-red

Form Elements

Accordions

Comfortable (default)

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem vitae veritatis hic animi corrupti, incidunt cumque nesciunt odit, earum repellat repudiandae, autem ipsum quos rerum esse unde ducimus quisquam consequuntur. Tenetur ipsam et, commodi dignissimos eveniet amet quo maxime nesciunt officia laboriosam, veniam odio perferendis doloribus. Quia fugiat, incidunt natus voluptates nobis id cupiditate ea in. Sit labore nam veritatis culpa consectetur suscipit autem blanditiis possimus. Illo error totam repellat nostrum eos voluptatibus? Fuga doloribus aut labore corrupti ratione, id voluptates nulla qui inventore exercitationem unde architecto quasi quidem obcaecati! Reiciendis, deserunt consectetur nam qui commodi quaerat culpa. Soluta, totam?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo suscipit reiciendis fugit minima ad iste ipsum! Voluptatem totam similique officiis nihil expedita porro culpa adipisci harum veniam maiores modi doloribus non sint molestiae reiciendis omnis, autem, sunt deserunt ducimus. Qui consequatur sed, quam mollitia vero, adipisci accusantium impedit itaque ullam eaque perspiciatis eligendi, beatae sapiente nisi totam eius natus. Explicabo veniam corporis illo optio, culpa non neque corrupti sequi. Dignissimos quisquam sunt placeat mollitia, tempore minima voluptate quasi at quas ab, praesentium temporibus labore sapiente nam architecto quod nobis repudiandae, eaque quae aspernatur? Odit, optio? Similique sint perferendis est temporibus!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi harum non fuga corporis quibusdam qui laudantium dignissimos dolorum officia voluptatibus at laboriosam accusantium obcaecati tempora molestias, nam ex? Distinctio omnis dignissimos consequatur numquam dicta expedita accusamus consectetur non neque earum. Voluptatum, soluta et eos nobis quidem veritatis hic dicta atque. Voluptate perferendis delectus beatae eligendi aliquam commodi fugiat tempora quibusdam iste ipsum enim omnis, perspiciatis fuga repellat dignissimos totam. Aperiam eligendi cumque modi facilis molestiae hic ab molestias beatae architecto. Provident iste natus mollitia officiis, doloremque debitis magnam. Sunt inventore illo est commodi soluta fugiat ipsum impedit iusto eum? Aliquid!

Compact

Tables

Basic Table with Checkboxes

Filter Filter Filter

FILTERS

FIRST	LAST	HANDLE
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam accusamus cum doloremque ipsa vero ipsum esse porro dolores ratione corrupti!	Otto	@mdo	Action Action two Action three
Jacob	Thornton	@fat	Action Action two Action three
Larry	Bird	@twitter	Action Action two Action three

Table with Flags and Sorting

FIRST	LAST	HANDLE
Mark	Otto	@mdo	Action Action two Action three
Jacob	Thornton	@fat	Action Action two Action three
Larry	Bird	@twitter	Action Action two Action three

Tab Subnavigation - w/ Bootstrap Tabs

PANEL 1

PANEL 2

PANEL 3

Alerts

Container Alerts

These alerts are to be used within content containers (eg. a fieldset)

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Toast Messages

These are Global alert messages, most "alerts" will be in this format.

{Lorem} settings successfully saved.

Badges

On Stuff

As Filter Indicators

Filter

Modals

New Page Loading Animation

Use this method when loading a new page/view

Asyncronous Page Content Preloader Animation

Use this method when loading asynchronous page content.

Single Selection of DIV test

Div 1

Div 2

Div 3