Back to www.kuubik.org

Header 1 (Source Sans Pro Black, 44px)

Header 2 (Source Sans Pro Black, 36px)

Header 3 (Source Sans Pro Black, 32px)

Header 4 (Source Sans Pro Black, 26px)

Header 5 (Source Sans Pro SemiBold, 22px)
Header 6 (Source Sans Pro SemiBold, 18px)

This is normal paragraph with line breaks, bold, italic and underlined elements:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

This is a paragraph with 'bold-kuubik' class. It is different from normal text with bold, because it uses Source Sans Pro instead of Source Sans Pro Light. It can also include bold elements.

This is a 'sub-header' using the 'header-kuubik' class instead of hX tags - Source Sans Pro, 16px, bold, petrol-dark color
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Edit


Div-Element with a hyperlink - links in petrol medium color and hover effect in amber dark color similar to buttons: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est


Following is a imitated KUUBIK logo, with text and a line (this BTW is 'header-kuubik' combined with 'amber''):
This can be used for section headers. With 'logo-kuubik-bold' and 'logo-kuubik-light' is the text to be setup. Default is petrol color, use 'green' and 'amber' to change the color. To draw the line in default petrol use 'hr-kuubik', also change color with 'green' and 'amber'. The default hr-kuubik is 100% of the width, to create overflow of 20% of text use 'logo' as additional class.
KUUBIKnewsletter
Now let's look at the same in green and amber:
KUUBIKcalc

KUUBIKview
This is a 'blockquote' tag quote: Lorem ipsum dolor sit amet, consetetur sadipscing elitr
And this is a 'q' tag quote (adding quotation marks): Lorem ipsum dolor sit amet, consetetur sadipscing elitr

This is a HR horizontal line without 'logo' using full width:
This is computer code represented by 'code' tag - using Source Code Pro and invert petrol color:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Now using a 'codeblock-kuubik' class around the code:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr


Emphasized text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Unordered list with a cube icon (from Segoe MDL2 Assets) - use 'ul-kuubik' as class, petrol is default, use 'green' or 'amber' to change color:
  • Unordered list 1st entry
  • 2nd entry
  • 3rd entry
  • 4th entry
  • 5th entry
Ordered list with decimals - use 'ol-kuubik' as class, petrol is default, use 'green' or 'amber' to change color:
  1. Ordered list 1st entry
  2. 2nd entry
  3. 3rd enty
  4. 4th entry
  5. 5th entry
Preformatted text:
     Lorem ipsum dolor sit 
                            amet, consetetur sadipscing 
                    elitr, sed diam nonumy eirmod tempor
                                     invidunt ut labore et dolore

Progress bar for displaying progress where countable - 'progress' and 'progress-kuubik', optionally with 'green' or 'amber':
40%

Progress ring - 'spinner-border' and 'kuubik', optionally with 'green' or 'amber':

Strikethrough with 's' tag:
Only 50 tickets left!

strong/sup/sub tags: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore

Überschrift 1 Überschrift 2
bg-danger bg-danger-light
bg-success bg-success-light
bg-warning bg-warning-light
bg-petrol bg-petrol-light
bold:      bg-petrol-dark     bg-petrol     bg-petrol-medium     bg-petrol-light
bold:      bg-green-dark     bg-green     bg-green-medium     bg-green-light
bold:      bg-amber-dark     bg-amber     bg-amber-medium     bg-amber-light

Components from SeeberUIComponents:

They are designed to repeatly use them in different HTML forms to have a consistent design. They are using the column system of Bootstrap to setup the width of label and content columns.

hm, not active, why?
deaktiviert


Toasts

Toasts are used to display important information to the user. When opening the page the toasts are displayed automatically. We are displaying samples of all 4 possible toasts Info, Warning, Danger and Success. For these toast SeeberUIComponents is needed and ToastService is creating them.

The type is defining the color, the delay is setting the duration of displaying a toast (default = 5 seconds). To avoid collapsing after this time Persistent can be set to true. Then the user must remove the toast (single or all if more than one is shown).

Developer can override the colors and the icons to adjust the toasts to the UI of the website.