Classes to use:
.background--primary | .background--lime | .background--blue | .background--secondary | .background--violet | .background--darkblue | .background--disabledprimary | .background--bold | .background--blueground | .background--disabledsecondary | .background--aqua | .background--darkblueground | .background--primaryground | .background--limeground | .background--red | .background--secondaryground | .background--violetground | .background--darkred | .background--smoke | .background--goldground | .background--aquaground | background--maybe | .background--ok | .background--disabledok
 
Primary
 
Lime
 
Blue
 
Secondary
 
Violet
 
Darkblue
 
DisabledPrimary
 
Gold
 
BlueGround
 
DisabledSecondary
 
Aqua
 
DarkBlueGround
 
Primary Ground
 
LimeGround
 
Red
 
SecondaryGround
 
VioletGround
 
DarkRed
 
Smoke
 
GoldGround
OTHER
 
 
AquaGround
 
Maybe
 
 
 
OK
 
 
 
DisabledOK
 
Smoke Color Variations
Classes to use:
.background--disabledprimary-smoke | .background--blueground-smoke | .background--disabledsecondary-smoke | .background--darkblueground-smoke | background--primaryground-smoke | .background--limeground-smoke | .background--secondaryground-smoke | .background--violetground-smoke | .background--goldground-smoke | .background--aquaground-smoke | .background--disabledok-smoke
 
Disabled Primary - Smoke
 
Blue Ground - Smoke
 
Disabled Secondary - Smoke
 
Dark Blue Ground - Smoke
 
Primary Ground - Smoke
 
Lime Ground - Smoke
 
Secondary Ground - Smoke
 
Violet Ground - Smoke
 
Gold Ground - Smoke
 
Aqua Ground - Smoke
 
Disabled OK - Smoke
 
 
Inputs
 
Dropdowns
 
Normal with hint text/label
Description
 
 
 
Normal with hint text/label
Single Line Input {{item.name}}
Description
 
Focus
Description
 
 
 
Focus
Single Line Input Option 1
Description
Error Message
 
Valid Entries
Description
Error Message
 
 
Valid
Single Line Input Option 1
Description
Error Message
 
Disabled Input
Disabled
 
Datepicker
Datepicker input
Static hint + link + currency
A static underline link
 
 
Dialogs

Coming soon

 
Buttons and Links
Raised Button
Button
Button
Normal
Button
Button
Disabled 38% Blue/Red
 
Flat Button
Button
Button
Button
Button
Normal
Focused / Hover
Pressed
Disabled
 
Ghost Button
Button
Button
Button
Button
Normal
Focused / Hover
Pressed
Disabled
 
Tags
Grey Tag
Normal Tag
Current Account Tag
Credit Account Tag
Saving Account Tag
Sizes
Small Tag
Medium Tag
BIG Tag
 
Button Sizes
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Small
Medium
Large/Big
Disabled
 
Columns as Buttons
Classes to use:
.col-button | .col-button--left | .col-button--right | .col-button--active | .col-button-arrow | .col-button-disabled
Button
Button
Button
Columns as Buttons with Arrows
Button
Button
Button
Columns as Buttons - disabled
Button
Button
Button
 
 
Classes to use:
.button-menu | .button-menu--credit | .button-menu--products | .button-menu--saving
 
Cards
Example HTML to use:
<div class="col-pad col-xs-5 form-shadow content--sticker">
            <danube-dashboard-common-card-widget
                    icon="...icon-id..."
                    text-top-left="...text..."
                    text-top-right="...text..."
                    text-bottom-left="...text..."
                    text-bottom-right="...text..."
                    is-header-clickable="...boolean...">
                <div> <!--optional-->
                    <div class="row text--small text--grey">
                        <div class="flex-grow">
                            <span>...text...</span>
                        </div>
                        <div class="end-xs ">
                            <span>...text...</span>
                        </div>
                    </div>
                    <danube-progress-bar-widget class="col-xs-12"
                                                progressbar-color-class="progress-bar-lime"
                                                progressbar-text="50 %"
                                                current-value="50"></danube-progress-bar-widget>
                </div>
                <button-line> <!--optional-->
                    <div class="row margin-top-10 button-group-inline bottom-xs">
                        <div class="button button-link"
                             onclick="alert('button clicked')">Button 1
                        </div>
                        <md-menu class="flex-item middle-xs center-xs">
                            <svg class="svg-fill--blue icon icon-20 cursor-pointer" ng-click="$mdOpenMenu($event)">
                                <use xlink:href="#threedots"></use>
                            </svg>
                            <md-menu-content>
                                <md-menu-item>
                                    <button class="button button-link"
                                    >Button 4
                                    </button>
                                </md-menu-item>
                            </md-menu-content>
                        </md-menu>
                    </div>
                </button-line>
            </danube-dashboard-common-card-widget>
        </div>
optional additional text
01.01.2016
 
Typography - Hello type
Desktop XL
Desktop L / M
Mobil S
Classes to use
Typography - Font Faces
Hello Type Light
 
Hello Type Light
 
Hello Type Light
 
.font-light
Hello Type Regular
 
Hello Type Regular
 
Hello Type Regular
 
.font-regular
Hello Type Bold
 
Hello Type Bold
 
Hello Type Bold
 
.font-bold
Hello Type Condensed Light
 
Hello Type Condensed Light
 
Hello Type Condensed Light
 
.font-condensed-light
Hello Type Condensed Regular
 
Hello Type Condensed Regular
 
Hello Type Condensed Regular
 
.font-condensed-regular
Hello Type Condensed Bold
 
Hello Type Condensed Bold
 
Hello Type Condensed Bold
 
.font-condensed-bold
 
Desktop XL
Desktop L / M
Mobil S
<p> | .p
Headline H1
Headline H1
Headline H1
<h1> | .h1
Headline H2
Headline H2
Headline H2
<h2> | .h2
Headline H3
Headline H3
Headline H3
 
<h3> | .h3
Headline H4
Headline H4
Headline H4
 
<h4> | .h4
Perex
Perex
Perex
 
<p> | .p
Text
Text
Text
 
.text
.text-footer
Text Note
Text Note
Text Note
 
.text-note
Typography - Text formating
Text Uppercase
Text Uppercase
Text Uppercase
.text-uppercase
Text Lowercase
Text Lowercase
Text Lowercase
.text-lowercase
Text Cutted
Text Cutted
Text Cutted
.text-cut
Text Light
Text Light
Text Light
.text-light
Text Italic
Text Italic
Text Italic
.text-italic
Text Bold
Text Bold
Text Bold
.text-bold
Typography - Text Alignment
Text Left
Text Left
 
.text-left
Text Right
Text Right
 
.text-right
Text center
Text center
 
.text-center
 
Typography - Text Sizes
Text smaller
Text-smaller
11px
.text--smaller
Text small
Text-small
12px
.text--small
Text medium
Text-medium
13px
.text--medium
Text big
Text-big
15px
.text--big
 
Typography - Text Colors
Text white
White
 
.text--white
Text Black
Black
 
.text--black
Text Darkgrey
Darkgrey
 
.text--darkgrey
Text Grey
Grey
 
.text--grey
Text Green
Green
 
.text--green
Text Footer Grey
Footer Grey
 
.text--footergrey
Text Primary
Footer Primary
 
.text--primary
Text Secondary
Secondary
 
.text--secondary
Text Lime
Lime
 
.text--lime
Text Violet
Violet
 
.text--violet
Text Blue
Blue
 
.text--blue
Text DarkBlue
DarkBlue
 
.text--darkblue
Text Gold
Gold
 
.text--gold
Text DisabledPrimary
disabledprimary
 
.text--disabledprimary
Text DisabledPrimary-smoke
disabledprimary-smoke
 
.text--disabledprimary-smoke
Text BlueGround
blueground
 
.text--blueground
Text BlueGround-smoke
blueground-smoke
 
.text--blueground-smoke
Text DisabledSecondary
disabledsecondary
 
.text--disabledsecondary
Text DisabledSecondary-smoke
disabledsecondary-smoke
 
.text--disabledsecondary-smoke
Text Aqua
Aqua
 
.text--aqua
Text DarkblueGround
darkblueground
 
.text--darkblueground
Text DarkblueGround-smoke
darkblueground-smoke
 
.text--darkblueground-smoke
Text PrimaryGround
PrimaryGround
 
.text--primaryground
Text PrimaryGround Smoke
PrimaryGround Smoke
 
.text--primaryground-smoke
Text LimeGround
LimeGround
 
.text--limeground
Text LimeGround Smoke
LimeGround Smoke
 
.text--limeground-smoke
Text Red
Red
 
.text--red
Text DarkRed
DarkRed
 
.text--darkred
Text SecondaryGround
SecondaryGround
 
.text--secondaryground
Text SecondaryGround Smoke
SecondaryGround Smoke
 
.text--secondaryground-smoke
Text violetground
violetground
 
.text--violetground
Text VioletGround Smoke
VioletGround Smoke
 
.text--violetground-smoke
Text Smoke
Smoke
 
.text--smoke
Text GoldGround
GoldGround
 
.text--goldground
Text GoldGround Smoke
GoldGround Smoke
 
.text--goldground-smoke
Text AquaGround
AquaGround
 
.text--aquaground
Text AquaGround Smoke
AquaGround Smoke
 
.text--aquaground-smoke
Text Maybe
Maybe
 
.text--maybe
Text OK
OK
 
.text--ok
Text Disabled OK
OK
 
.text--disabledok
Text Disabled OK Smoke
Disabled OK Smoke
 
.text--disabledok-smoke
 
Lists - Unordered/ Ordered
.list-dotted
  • Point 1
  • Point 2
  • Point 3
  • Point 1
  • Point 2
  • Point 3
.list-ordered
  1. Point 1
    1. SubPoint 1
    2. SubPoint 2
  2. Point 2
  3. Point 3
.list-checked
  • Checked 1
  • Checked 2
  • Checked 3
 
Icons & SVG
.icon
 
 
.icon-10
.icon
 
 
.icon-13
.icon
 
 
.icon-15
.icon
 
 
.icon-18
.icon
 
 
.icon-24
.icon
 
 
.icon-25
.icon
 
 
.icon-29
.icon
 
 
.icon-29
.icon
 
 
.icon-36
.icon
 
 
.icon-48
.icon
 
 
.icon-60
.icon
 
 
.icon-75
 
SVG Coloring - Background
.svg-fill--blue
 
 
.svg-fill--blue
.svg-fill--darkblue
 
 
.svg-fill--darkblue
.svg-fill--red
 
 
.svg-fill--red
.svg-fill--grey
 
 
.svg-fill--grey
.svg-fill--darkgrey
 
 
.svg-fill--darkgrey
.svg-fill--lime
 
 
.svg-fill--lime
.svg-fill--orange
 
 
.svg-fill--orange
.svg-fill--green
 
 
.svg-fill--green
.svg-fill--aqua
 
 
.svg-fill--aqua
 
SVG Coloring - Strokes
.svg-stroke--black
 
 
.svg-stroke--black
.svg-stroke--white
 
 
.svg-stroke--white
.svg-stroke--blue
 
 
.svg-stroke--blue
.svg-stroke--darkblue
 
 
.svg-stroke--darkblue
.svg-stroke--red
 
 
.svg-stroke--red
.svg-stroke--grey
 
 
.svg-stroke--grey
.svg-stroke--darkgrey
 
 
.svg-stroke--darkgrey
.svg-stroke--lime
 
 
.svg-stroke--lime
.svg-stroke--green
 
 
.svg-stroke--green
 
SVG Coloring - Stroke Widths
example
Stroke width
Class to use
.svg-stroke-width--xs
 
0.5px
.svg-stroke-width--xs
.svg-stroke-width--sm
 
1px
.svg-stroke-width--sm
.svg-stroke-width--md
 
1.5px
.svg-stroke-width--md
.svg-stroke-width--lg
 
2px
.svg-stroke-width--lg
 
Layouting Page and Applications
GRID Layout System
Row
Get flexible layout container
 
 
 
.row
Row Page Limitations
Set the Standard Layout of 1200px
 
 
 
.row-content--1200
Column Gattering global Page layouts
Set the Column Gattering on columns
 
 
 
.col-pad
Column Gattering within forms
Set the Column Gattering on forms
 
 
 
.col-pad--form
 
 
Extra Small Devices
Small/Medium Devices
Medium Devices
Large Devices
Class to use
1 Column
.col-xs-1
.col-sm-1
.col-md-1
.col-lg-1
.col-[xs|sm|md|lg]-1
2 Columns
.col-xs-2
.col-sm-2
.col-md-2
.col-lg-2
.col-[xs|sm|md|lg]-2
3 Columns
.col-xs-3
.col-sm-3
.col-md-3
.col-lg-3
.col-[xs|sm|md|lg]-3
4 Columns
.col-xs-4
.col-sm-4
.col-md-4
.col-lg-4
.col-[xs|sm|md|lg]-4
5 Columns
.col-xs-5
.col-sm-5
.col-md-5
.col-lg-5
.col-[xs|sm|md|lg]-5
6 Columns
.col-xs-6
.col-sm-6
.col-md-6
.col-lg-6
.col-[xs|sm|md|lg]-6
7 Columns
.col-xs-7
.col-sm-7
.col-md-7
.col-lg-7
.col-[xs|sm|md|lg]-7
8 Columns
.col-xs-8
.col-sm-8
.col-md-8
.col-lg-8
.col-[xs|sm|md|lg]-8
9 Columns
.col-xs-9
.col-sm-9
.col-md-9
.col-lg-9
.col-[xs|sm|md|lg]-9
10 Columns
.col-xs-10
.col-sm-10
.col-md-10
.col-lg-10
.col-[xs|sm|md|lg]-10
11 Columns
.col-xs-11
.col-sm-11
.col-md-11
.col-lg-11
.col-[xs|sm|md|lg]-11
12 Columns
.col-xs-12
.col-sm-12
.col-md-12
.col-lg-12
.col-[xs|sm|md|lg]-12
 
Vertical Alignment - Content of rows
Vertical Align Columns - Top
.top-xs
.top-sm
.top-md
.top-lg
.top-[xs|sm|md|lg]
Vertical Align Columns - Middle
.middle-xs
.middle-sm
.middle-md
.middle-lg
.middle-[xs|sm|md|lg]
Vertical Align Columns - Bottom
.bottom-xs
.bottom-sm
.bottom-md
.bottom-lg
.bottom-[xs|sm|md|lg]
 
Horizontal Alignment - Content of rows
Horizontal Align Rows - Left
.start-xs
.start-sm
.start-md
.start-lg
.start-[xs|sm|md|lg]
Horizontal Alignment Rows - Center
.center-xs
.center-sm
.center-md
.center-lg
.center-[xs|sm|md|lg]
Horizontal Align Rows - Right
.end-xs
.end-sm
.end-md
.end-lg
.end-[xs|sm|md|lg]
Space Arround Items
.around-xs
.around-sm
.around-md
.around-lg
.around-[xs|sm|md|lg]
Space Between Items
.between-xs
.between-sm
.between-md
.between-lg
.between-[xs|sm|md|lg]
 
Ordering Columns in view states
Ordering Columns
.first-xs
.first-sm
.first-md
.first-lg
.first-[xs|sm|md|lg]
Ordering Columns
.last-xs
.last-sm
.last-md
.last-lg
.last-[xs|sm|md|lg]
 
Show and Hide in view states
Hide Content in view states
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.last-[xs|sm|md|lg]
Show Content in view state
.show-xs
.show-sm
.show-md
.show-lg
.show-[xs|sm|md|lg]
 
Individual Column Alignment
Stretch a column to its row height
.col-stretch-xs
.col-stretch-sm
.col-stretch-md
.col-stretch-lg
.col-stretch-[xs|sm|md|lg]
 
Flex-Box: Application Layouts
Get a Flex Container Element
.flex-element
 
 
 
.flex-element
Get equal width elements within a flex container
.flex-item
 
 
 
.flex-item
Get 100% element within a flex container
.flex-100
 
 
 
.flex-100
Grow a flex-item to available space
.flex-grow
 
 
 
.flex-grow
 
Grid System: Page Layouts Examples
The column grid layout sits within a row-container with the overall page limitations of 1200px and a global row margin.
.col-xs-4 + .col-pad
.col-xs-4 + .col-pad
.col-xs-4 + .col-pad
The column grid layout sits within a row-container with the overall page limitations of 1200px and a global row margin.
.col-xs-4 + .col-pad + .col-top-xs
.col-xs-4 + .col-pad + .col-middle-xs
.col-xs-4 + .col-pad + .col-bottom-xs
Flex-Box: Form Layouts
The global layout (red and green bordered) is set in place. Now, the form (blue bordered) is setup with the corresponding classes .row-content--form and .col-pad--form.
.col-xs-4 + .col-pad + .col-top-xs
.col-xs-8 + .col-pad + .col-middle-xs
.col-xs-8 + .col-pad + .col-middle-xs
a form starts usually with: .row + .row-content--form
+.col-xs-12 + .col-pad--form
+.col-xs-6 + .col-pad--form
+.col-xs-6 + .col-pad--form
+.col-xs-4 + .col-pad--form
+.col-xs-4 + .col-pad--form
+.col-xs-4 + .col-pad--form