UI

Typography

h1.MAN Global Bold Condensed

Bold Condensed 40px #303C49

h2.MAN Global Bold Condensed

Light 32px #303C49

h3.MAN Global Bold Condensed

Light 22px #303C49

h4.MAN Global Bold Condensed

Light 18px #303C49
h5.Arial Bold
Arial Bold 15px #303C49

Lead


MAN Global Light 22px #838a92 - Lead /
Abstract Lorem ipsum dolor sit amet consetetur

<p class="lead">MAN Global Light 22px #838a92 - Lead</p>

Blockquotes


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists


  • Aspernatur blanditiis consectetur doloremque, ducimus fuga laudantium, molestias necessitatibus nesciunt, nulla pariatur placeat ratione sunt.
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  • Aspernatur blanditiis consectetur doloremque, ducimus fuga laudantium, molestias necessitatibus nesciunt, nulla pariatur placeat ratione sunt.
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<div class="editorial-content"><ul><li>...</li></ul></div>
<ul class="list-square"><li>...</li></ul>
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate ea eos modi reprehenderit tempore?
  2. Aspernatur blanditiis consectetur doloremque, ducimus fuga laudantium, molestias necessitatibus nesciunt, nulla pariatur placeat ratione sunt.
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate ea eos modi reprehenderit tempore?
    2. Aspernatur blanditiis consectetur doloremque, ducimus fuga laudantium, molestias necessitatibus nesciunt, nulla pariatur placeat ratione sunt.
      1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate ea eos modi reprehenderit tempore?
      2. Aspernatur blanditiis consectetur doloremque, ducimus fuga laudantium, molestias necessitatibus nesciunt, nulla pariatur placeat ratione sunt.
      3. Consequuntur, deleniti doloribus eius eum iure minima quam sunt voluptate?
      4. Dicta dignissimos distinctio dolorum fugit iste nam, quae rerum voluptas voluptate voluptatibus? Deleniti inventore, rem!
    3. Consequuntur, deleniti doloribus eius eum iure minima quam sunt voluptate?
    4. Dicta dignissimos distinctio dolorum fugit iste nam, quae rerum voluptas voluptate voluptatibus? Deleniti inventore, rem!
  3. Consequuntur, deleniti doloribus eius eum iure minima quam sunt voluptate?
  4. Dicta dignissimos distinctio dolorum fugit iste nam, quae rerum voluptas voluptate voluptatibus? Deleniti inventore, rem!
<div class="editorial-content"><ol><li>...</li></ol></div>
<ol class="list-number"><li>...</ol></ul>

Link list


<div class="editorial-content"><ul><li>...</li></ul></div>
<ul class="list-square"><li>...</li></ul>
<div class="editorial-content"><ol><li>...</li></ol></div>
<ol class="list-number"><li>...</ol></ul>

Tables


#FirstLastHandle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
#FirstLastHandle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Image


test
Authentisch und persönlich
MAN ist selbstbewusst и zeigt stolz die Leistungsfähigkeit seiner Produkte in alre Bereichen und in souveränen Bildern.
test
Authentisch und persönlich
MAN ist selbstbewusst и zeigt stolz die Leistungsfähigkeit seiner Produkte in alre Bereichen und in souveränen Bildern.
2
Authentisch und persönlich
MAN ist selbstbewusst и zeigt stolz die Leistungsfähigkeit seiner Produkte in alre Bereichen und in souveränen Bildern.

Alert

Button group

Buttons

Default

Outline buttons

Size

<button type="button" class="btn btn-primary btn-sm"> Primary </button>
<button type="button" class="btn btn-primary btn-base"> Primary </button>
<button type="button" class="btn btn-primary btn-lg"> Primary </button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-secondary">secondary</button>
<button type="button" class="btn btn-light">light</button>

Cards

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Slick

Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Accordion


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Color

.text-primary
.text-muted
.text-warning
.text-danger
.text-success
.text-info
.text-light
.text-white
.bg-primary
.bg-warning
.bg-danger
.bg-success
.bg-info
.bg-light
.bg-white
.bg-transparent

Divider

Forms

Sizes


Check


Radio


Custom forms


Server side


Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Supported elements


Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

List group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Pagination

Sizes


Popovers

Tooltips

Icons

icon-kennziffer
icon-epaper
icon-web-format
icon-van
icon-translation-wf
icon-original-format
icon-office-format
icon-industriemotor
icon-pannenruf
icon-schiffsmotor
icon-level
icon-sign-out
icon-formular-zuruecksetzen
icon-icon-fax
icon-icon-filter
icon-ergebnisliste-sortierung
icon-search-save
icon-ok_logo
icon-vk_logo
icon-arrow_lefttoright
icon-arrow_uptodown
icon-configurator
icon-service_dealer
icon-services
icon-quote-end
icon-quote-start
icon-communication
icon-bus
icon-truck
icon-cart
icon-truck_half
icon-stopwatch
icon-zoom
icon-lock
icon-crosshair
icon-gearwheels
icon-copy
icon-thumb
icon-eye
icon-download
icon-minus
icon-info
icon-checkbox-deselect
icon-checkbox-select
icon-turn-left
icon-video_replay
icon-video_play
icon-phone
icon-checkmark_bold
icon-language
icon-link_arrow_full_up
icon-link_arrow_full_right
icon-link_arrow_full_left
icon-link_arrow_full_down
icon-link_arrow_outline_up
icon-link_arrow_outline_down
icon-link_arrow_outline_right
icon-link_arrow_outline_left
icon-arrow-maximise
icon-globe
icon-mail
icon-image
icon-printer
icon-file-pdf
icon-document
icon-microphone
icon-folder
icon-open
icon-calendar
icon-pause
icon-volume-high
icon-volume-low
icon-volume-mute2
icon-video
icon-zoom-in
icon-zoom-out
icon-phone2
icon-pin
icon-pin-filled
icon-video-link
icon-play
icon-trash
icon-magnifier
icon-cv
icon-fullscreen
icon-social-youtube
icon-map-cursor
icon-share
icon-rss
icon-xing
icon-google-plus
icon-facebook
icon-instagram
icon-twitter
icon-youtube
icon-flickr
icon-linkedin
icon-favourite_outline
icon-favourite_filled
icon-plus
icon-applicationfield-distribution_traffic
icon-applicationfield-long_distance_traffic
icon-applicationfield-roadworks
icon-balloon_bottom