Text

The bold displayed text uses the <strong> tag

Minions ipsum bananaaaa ti aamoo! Daa bappleees. Para tu la bodaaa butt poopayee.
Jiji chasy uuuhhh poopayee wiiiii po kass bappleees. Tatata bala tu chasy jiji wiiiii
poulet tikka masala para tu chasy ti aamoo! Wiiiii ti aamoo! Daa uuuhhh underweaaar hahaha
hahaha belloo! Ti aamoo! Baboiii. Bananaaaa bananaaaa butt chasy. Chasy jeje tatata bala tu
bappleees uuuhhh. Jeje daa poopayee daa. Hana dul sae ti aamoo! Belloo! Chasy butt.

Po kass chasy bappleees butt jiji para tu jiji underweaaar tulaliloo pepete. Pepete para tu
underweaaar baboiii bananaaaa potatoooo hahaha gelatooo aaaaaah. Po kass butt belloo! Po kass baboiii.
Wiiiii daa poulet tikka masala tulaliloo bappleees po kass pepete jeje. Aaaaaah aaaaaah chasy tank yuuu!
Hana dul sae tulaliloo bee do bee do bee do chasy bappleees gelatooo poulet tikka masala.

Bee do bee do bee do poulet tikka masala uuuhhh potatoooo baboiii. Tank yuuu! jeje baboiii hana dul sae.
Para tu poulet tikka masala wiiiii hahaha aaaaaah jeje potatoooo tulaliloo pepete. Wiiiii ti aamoo!
Tank yuuu! Tank yuuu! La bodaaa tulaliloo hana dul sae daa hahaha bananaaaa. Bananaaaa hana dul sae
hana dul sae chasy para tu para tu aaaaaah underweaaar. Tatata bala tu bappleees poopayee jiji gelatooo
daa bananaaaa hana dul sae jeje. Chasy bee do bee do bee do chasy tank yuuu! Po kass. Hahaha gelatooo
poopayee bananaaaa poopayee wiiiii gelatooo para tu bananaaaa baboiii aaaaaah.

Font

Font Name	Sample
Coporate S Regular (Default)	Minions ipsum bananaaaa ti aamoo!
Corporate A Condensed	Minions ipsum bananaaaa ti aamoo!
Corporate S Bold	Minions ipsum bananaaaa ti aamoo!

Color

Color Name (Variable Name)	Sample	Color Name (Variable Name)	Sample	Color Name (Variable Name)	Sample
aqua	#00ADEF	aqua-active	#0088C6	aqua-disabled	#4DC6F4
basalt	#3C3C3C	basalt-active	#2A2A2A	basalt-disabled	#636363
basalt-grey-disabled	#8F8F8F	black	#000000	charlotte-disabled	#B8E8FB
coral	#ECECEC	coral-active	#D9D9D9	coral-disabled	#F4F4F4
coral-grey-disabled	#A8A8A8	emb-blue	#00B0F3	errorred	#9f0002
grey	#999999	altogrey	#D1D1D1	codgrey	#111111
lightgrey	#FEFEFE	mediumgrey	#cccccc	gunmetal	#666666
gunmetal-active	#424242	gunmetal-disabled	#949494	gunmetal-grey-disabled	#BFBFBF
mineshaft	#262626	obsidian	#333333	obsidian-active	#242424
obsidian-disabled	#5C5C5C	obsidian-grey-disabled	#8D8D8D	slate	#1F1F1F
slate2	#141414	slate-active	#161616	slate-disabled	#4C4C4C
slate-grey-disabled	#828282	tundora	#494949	white	#FFFFFF

Headline (Tag)

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

Headline (Class)

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

List

No bullet points because lists used as lists are an exception.

List point 1
List point 2
List point 3
List point 4

Link

Buttons

<input> ist not able to display icons

Normal Buttons (btn-primary)

Link Button (<a>)

Normal Buttons (btn-secondary)

Link Button (<a>)

Link Buttons

Link Button (<a>)

Link Buttons (Mobile)

Normally following styles only appears if screen size is lower than 760px
Styles are set hard in style tag block above.
If you want to see the behavior of the link button change the browser screen size. Than the link buttons above will change.

Link Button (<a>)

Form

Checkbox

Check me out

Can't check this

Dropdown

Model Selection on Configurator Module on http://mbuk-retail-resp.yfs.io/personenwagen.php is not based on <select> tag!

Select menu

Select menu with blue border

Disabled select menu

Select menu (dark background)

Select menu with blue border (dark background)

Radio Buttons (with <legend>)

Radio buttons

Option one is this and that - be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Input

Text

Text with blue border

Text Row

Text (disabled)

Text (dark background)

Text with blue border (dark background)

Textarea

Example textarea

Textarea with blue border

Textarea (disabled)

Textarea (dark background)

Textarea with blue border (dark background)

Images

Icons

Color change of the icon is only on this page to highlight the currently hovered icon.

Icon Name	Icon Name	Icon Name
mb_ico_globe	mb_ico_pencil	mb_ico_phone
mb_ico_question_mark	mb_ico_arr_thick_down	mb_ico_arr_thick_left
mb_ico_arr_thick_right	mb_ico_arr_thick_up	mb_ico_arr_thin_down
mb_ico_arr_thin_left	mb_ico_arr_thin_right	mb_ico_arr_thin_up
mb_ico_brochure	mb_ico_calculator	mb_ico_calendar
mb_ico_configurator	mb_ico_cross	mb_ico_date
mb_ico_ebrochure	mb_ico_email	mb_ico_fleet_business
mb_ico_forward	mb_ico_home	mb_ico_image
mb_ico_info	mb_ico_locate	mb_ico_magazine
mb_ico_menu	mb_ico_minus	mb_ico_newsletter
mb_ico_offers	mb_ico_pause	mb_ico_pc_amg
mb_ico_pc_app_used	mb_ico_pc_company_car	mb_ico_pc
mb_ico_phone2	mb_ico_play	mb_ico_plus
mb_ico_pricelist	mb_ico_print	mb_ico_retailer
mb_ico_rewind	mb_ico_save	mb_ico_search
mb_ico_settings	mb_ico_share	mb_ico_sound_off
mb_ico_sound_on	mb_ico_stop	mb_ico_test_drive
mb_ico_tick	mb_ico_trucks	mb_ico_vans_app_used
mb_ico_vans_range	mb_ico_vans	mb_ico_video
mb_ico_wheel	sunset	google-plus
facebook2	instagram	whatsapp
twitter	vine	youtube
vimeo	tumblr	tumblr2
linkedin	linkedin2	pinterest
xing2	foursquare	wechat