General
This section describes the Components and Layouts, Containers, a Grid system and Responsive Utility Classes.
Container
Containers are the most basic layout element and are required while using grid system. The main objective of using Container is to contain and/or center the content. Containers can also be nested as per requirement.
There are Three types of Containers in our Design System:
-
.containersets a max-width at each responsive breakpoint:breakpoint <576px breakpoint ≥576px breakpoint ≥768px breakpoint ≥992px breakpoint ≥1200px max-width:100% max-width: 540px; max-width: 720px max-width: 960px max-width: 1140px How to use:
<div class="container"> Content here </div> -
.container-fluid, which always haswidth:100%irrespective of breakpoints:breakpoint <576px breakpoint ≥576px breakpoint ≥768px breakpoint ≥992px breakpoint ≥1200px width:100% width:100% width:100% width:100% width:100% -
.container-{breakpoint}, haswidth:100%until the set breakpoint:breakpoint <576px breakpoint ≥576px breakpoint ≥768px breakpoint ≥992px breakpoint ≥1200px .container-smwidth:100% max-width:540px max-width:720px max-width:960px max-width:1140px .container-mdwidth:100% width:100% max-width:720px max-width:960px max-width:1140px .container-lgwidth:100% width:100% width:100% max-width:960px max-width:1140px .container-xlwidth:100% width:100% width:100% width:100% max-width:1140px
Flex Grid
ML Design System uses mobile-first flexbox grid for all sizes. The grid contains twelve columns, five default responsive breakpoints, and couple of predefined utility classes. The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+.
Flex grid uses row class ( .row ), and column class (
.col ). Basic percentage-based sizing can also be done
using the classes: .col-sm-6, .col-md-6, and
so on.
<div class="container"> <div class="row"> <div class="col-sm-6">6 columns</div> <div class="col-sm-6">6 columns</div> </div> </div>
Auto-Width Columns
If we just use .col class, the child elements will
equally divide the total width:
<div class="container"> <div class="row"> <div class="col">Equally divided column</div> <div class="col">Equally divided column</div> <div class="col">Equally divided column</div> </div> </div>
Auto adjust around one column
We can also set width of one column and let the others auto adjust around it:
<div class="container"> <div class="row"> <div class="col">Equally divided column</div> <div class="col-md-6">50% wide column</div> <div class="col">Equally divided column</div> </div> </div>
Utilities
There are several pre defined utility classes for indents. Use these classes on different breakpoints as per requirement.
Margin Utilities
-
Use
.my-class to add top and bottom margin. Add required size along with this class:
.my-tiny,.my-small,.my-mid,.my-large -
Use
.mx-class to add left and right margin. Add required size along with this class:
.mx-tiny,.mx-small,.mx-mid,.mx-large -
Use
.mt-class to add top margin only. Add required size along with this class:
.mt-tiny,.mt-small,.mt-mid,.mt-large -
Use
.mb-class to add bottom margin only. Add required size along with this class:
.mb-tiny,.mb-small,.mb-mid,.mb-large
<div class="row">
<div class="my-tiny">Some Text</div>
<div class="mx-small">Some Text</div>
<div class="mt-mid">Some Text</div>
<div class="mb-large">Some Text</div>
</div>
Padding Utilities
-
Use
.py-class to add top and bottom padding. Add required size along with this class:
.py-tiny,.py-small,.py-mid,.py-large -
Use
.px-class to add left and right padding. Add required size along with this class:
.px-tiny,.px-small,.px-mid,.px-large -
Use
.pt-class to add top padding only. Add required size along with this class:
.pt-tiny,.pt-small,.pt-mid,.pt-large -
Use
.pb-class to add bottom padding only. Add required size along with this class:
.pb-tiny,.pb-small,.pb-mid,.pb-large
<div class="row">
<div class="py-tiny">Some Text</div>
<div class="px-small">Some Text</div>
<div class="pt-mid">Some Text</div>
<div class="pb-large">Some Text</div>
</div>
Color Palette
A color scheme is the choice of colors used in design for a range of media. For example, the "Achromatic" use of a white background with black text is an example of a basic and commonly default color scheme in web design. Color schemes are used to create style and appeal.
Primary
-
Scss Var:$primary
-
Text class:text__primary
-
bg class:bg__primary
Secondary
-
Scss Var:$secondary
-
Text class:text__secondary
-
bg class:bg__secondary
Success
-
Scss Var:$success
-
Text class:text__success
-
bg class:bg__success
Danger
-
Scss Var:$danger
-
Text class:text__danger
-
bg class:bg__danger
Warning
-
Scss Var:$warning
-
Text class:text__warning
-
bg class:bg__warning
Info
-
Scss Var:$info
-
Text class:text__info
-
bg class:bg__info
Dark
-
Scss Var:$dark
-
Text class:text__dark
-
bg class:bg__dark
Light
-
Scss Var:$light
-
Text class:text__light
-
bg class:bg__light
Typography
The objective of typography in Design System is to provide a clean, attractive and simple default styles for basic elements.
-
Use the
$font-family-base,$font-size-base, andvar(--line-height-base)variables as our typographic base applied to the<body>. -
Set the global link color via
$link-colorand apply link underline style on:hoverif required.
The global variables are defined in scss/settings/typography.
Make sure to set $font-size-base in rem.
headings
All HTML headings, <h1> through
<h6>, are available. Need to use classes
.h1 to .h6.
- Heading Example
-
<h1 class="h1"></h1>h1. heading -
<h2 class="h2"></h2>h2. heading -
<h3 class="h3"></h3>h3. heading -
<h4 class="h4"></h4>h4. heading -
<h5 class="h5"></h5>h5. heading -
<h6 class="h6"></h6>h6. heading
For Semantic Coding, avoid skipping heading levels for example, after h1 use h2 and so on. This also provides good readability to screen readers and improves page indexing.
Display headings
All Display headings, .display-1 through
.display-4, are available.
- Example heading
-
<h1 class="display-1"></h1>Display 1 -
<h2 class="display-2"></h2>Display 2 -
<h3 class="display-3"></h3>Display 3 -
<h4 class="display-4"></h4>Display 4
Paragraphs
Paragraph are having default styling from
settings/_typography.scss
There are some addons which can be added on paragraphs.
Lead
Make a paragraph stand out by adding .lead for example:
Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>Lists
- Unstyled
Remove the default list-style and
left margin on list items (immediate children only).
This only applies to immediate children list items,
meaning you will need to add the class for any nested lists as well.
- Lorem ipsum dolor sit amet
- 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
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>- Inline Lists
Remove a list’s bullets and apply some light
margin with a combination of two
classes, .list-inline and
.list-inline-item.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>Text utilities
Change text alignment, transform, style, weight, and color with our text utilities and color utilities.
Text alignment
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
<p class="text--left">Left aligned text on all viewport sizes.</p>
<p class="text--center">Center aligned text on all viewport sizes.</p>
<p class="text--right">Right aligned text on all viewport sizes.</p>
-
Left aligned text on viewports sized SM (small) or wider.
-
Left aligned text on viewports sized MD (medium) or wider.
-
Right aligned text on viewports sized LG (large) or wider.
-
Center aligned text on viewports sized XL (extra-large) or wider.
<p class="text-sm--left">Left aligned text on viewports sized SM (small) or wider </p>
<p class="text-md--center">Center aligned text on viewports sized MD (medium) or wider </p>
<p class="text-lg--right">Right aligned text on viewports sized LG (large) or wider </p>
<p class="text-xl--center">Center aligned text on viewports sized XL (extra-large) or wider </p>
Word break
Prevent long strings of text from breaking your components’ layout by
using
.text--break to set
word-wrap: break-word.
mmmmmdddmdnsjdfsdivdsjisdsdmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text--break">Long text without spaces</p>Text transform
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text--lowercase">Lowercased text.</p>
<p class="text--uppercase">Uppercased text.</p>
<p class="text--capitalize">CapiTaliZed text.</p>
Font weight and italics
Quickly change the weight (boldness) of text or italicize text.
Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic Font.</p>
Buttons
ML Design System includes several predefined button styles. As the
buttons serve multi purposes, it's implicit to use the relevant tag. For
example, use the <a> tag if the button contains a
link. ( <a> works without JavaScript). The
<button> tag should be used if the button performs an
action that changes something on the page. (
<button> always require JavaScript to function).
<!--/ Anchor Links-->
Link
View
<a href="#" class="btn btn__primary">Link</a> <a href="#" class="btn btn__success">View</a>
<!--/ Buttons-->
<button type="button" class="btn btn__primary">Save</button> <button type="button" class="btn btn__success">Delete</button>
When using button classes on <a> elements that are
used to trigger in-page functionality (like collapsing content), rather
than linking to new pages or sections within the current page, these
links should be given a role="button" to appropriately
convey their purpose to assistive technologies such as screen readers.
<a class="btn btn__primary" href="#" role="button">Link</a>Button Variants
Add classes for different button variants:
Solid
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn__primary* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary">Primary</button>
<button type="button" class="btn btn__secondary">Secondary</button>
<button type="button" class="btn btn__success">Success</button>
<button type="button" class="btn btn__danger">Danger</button>
<button type="button" class="btn btn__warning">Warning</button>
<button type="button" class="btn btn__info">Info</button>
<button type="button" class="btn btn__light">Light</button>
<button type="button" class="btn btn__dark">Dark</button>
<button type="button" class="btn btn__dark disabled">Disabled</button>
Clear Style
Add following classes in either <Button> or <a> :
<button type="button" class="clear btn btn__primary* ">Primary</button>
( * name according to Theme Standard Colors ). These buttons are useful when used as a secondary action, providing easy management of spacing and line-height:
<button type="button" class="clear btn btn__primary">Primary</button>
<button type="button" class="clear btn btn__secondary">Secondary</button>
<button type="button" class="clear btn btn__success">Success</button>
<button type="button" class="clear btn btn__danger">Danger</button>
<button type="button" class="clear btn btn__warning">Warning</button>
<button type="button" class="clear btn btn__info">Info</button>
<button type="button" class="clear btn btn__light">Light</button>
<button type="button" class="clear btn btn__dark">Dark</button>
<button type="button" class="clear btn btn__dark disabled">Disabled</button>
Outline
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn__outline btn__primary* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary btn__outline">Primary</button>
<button type="button" class="btn btn__secondary btn__outline">Secondary</button>
<button type="button" class="btn btn__success btn__outline">Success</button>
<button type="button" class="btn btn__danger btn__outline">Danger</button>
<button type="button" class="btn btn__warning btn__outline">Warning</button>
<button type="button" class="btn btn__info btn__outline">Info</button>
<button type="button" class="btn btn__light btn__outline">Light</button>
<button type="button" class="btn btn__dark btn__outline">Dark</button>
Rounded
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--rounded btn__primary* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary btn--rounded">Primary</button>
<button type="button" class="btn btn__secondary btn--rounded">Secondary</button>
<button type="button" class="btn btn__success btn--rounded">Success</button>
<button type="button" class="btn btn__danger btn--rounded">Danger</button>
<button type="button" class="btn btn__warning btn--rounded">Warning</button>
<button type="button" class="btn btn__info btn--rounded">Info</button>
<button type="button" class="btn btn__light btn--rounded">Light</button>
<button type="button" class="btn btn__dark btn--rounded">Dark</button>
<button type="button" class="btn btn__dark btn--rounded disabled">Dark</button>
Rounded Outline
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn__outline btn--rounded btn__primary* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary btn__outline btn--rounded">Primary</button>
<button type="button" class="btn btn__secondary btn__outline btn--rounded">Secondary</button>
<button type="button" class="btn btn__success btn__outline btn--rounded">Success</button>
<button type="button" class="btn btn__danger btn__outline btn--rounded">Danger</button>
<button type="button" class="btn btn__warning btn__outline btn--rounded">Warning</button>
<button type="button" class="btn btn__info btn__outline btn--rounded">Info</button>
<button type="button" class="btn btn__light btn__outline btn--rounded">Light</button>
<button type="button" class="btn btn__dark btn__outline btn--rounded">Dark</button>
<button type="button" class="btn btn__dark btn__outline btn--rounded disabled">Disabled</button>
Curved
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--curved btn__primary* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary btn__outline btn--curved">Primary</button>
<button type="button" class="btn btn__secondary btn__outline btn--curved">Secondary</button>
<button type="button" class="btn btn__success btn__outline btn--curved">Success</button>
<button type="button" class="btn btn__danger btn__outline btn--curved">Danger</button>
<button type="button" class="btn btn__warning btn__outline btn--curved">Warning</button>
<button type="button" class="btn btn__info btn__outline btn--curved">Info</button>
<button type="button" class="btn btn__light btn__outline btn--curved">Light</button>
<button type="button" class="btn btn__dark btn__outline btn--curved">Dark</button>
<button type="button" class="btn btn__dark btn__outline btn--curved disabled">Disabled</button>
Curved Outline
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--curved btn__outline btn__primary* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary btn__outline btn--curved btn__outline">Primary</button>
<button type="button" class="btn btn__secondary btn__outline btn--curved btn__outline">Secondary</button>
<button type="button" class="btn btn__success btn__outline btn--curved btn__outline">Success</button>
<button type="button" class="btn btn__danger btn__outline btn--curved btn__outline">Danger</button>
<button type="button" class="btn btn__warning btn__outline btn--curved btn__outline">Warning</button>
<button type="button" class="btn btn__info btn__outline btn--curved btn__outline">Info</button>
<button type="button" class="btn btn__light btn__outline btn--curved btn__outline">Light</button>
<button type="button" class="btn btn__dark btn__outline btn--curved btn__outline">Dark</button>
<button type="button" class="btn btn__dark btn__outline btn--curved btn__outline disabled">Disabled</button>
Buttons with icons
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn__primary*" role="button"> <i class="icon-accuracy"></i> <span class="btn__text">Primary</span> </button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary" role="button"> <i class="icon-accuracy"></i> <span class="btn__text">Primary</span </button>
<button type="button" class="btn btn__secondary"> <i class="icon-cloud-architecture"></i> <span class="btn__text">Secondary</span> </button>
<button type="button" class="btn btn__success"> <i class="icon-accuracy"></i> <span class="btn__text">Success</span> </button>
<button type="button" class="btn btn__danger"> <span class="btn__text">Danger</span> <i class="icon-cloud-architecture"></i> </button>
<button type="button" class="btn btn__warning"> <i class="icon-accuracy"></i> <span class="btn__text">Warning</span> </button>
<button type="button" class="btn btn__info"> <i class="icon-cloud-architecture"></i> <span class="btn__text">Info</span> </button>
<button type="button" class="btn btn__light"> <i class="icon-accuracy"></i> <span class="btn__text">Light</span> </button>
<button type="button" class="btn btn__dark"> <i class="icon-cloud-architecture"></i><span class="btn__text"> Dark</span> </button>
Buttons with icons on both sides
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn__primary* " role="button"> <i class="icon-accuracy"></i> <span class="btn__text">Primary</span> <i class="icon-favorite"></i> </button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary" role="button"> <i class="icon-accuracy"></i> <span class="btn__text">Primary</span> <i class="icon-favorite"></i> </button>
<button type="button" class="btn btn__secondary"> <i class="icon-cloud-architecture"></i> <span class="btn__text">Secondary</span> <i class="icon-check_circle_outline_24px"></i> </button>
<button type="button" class="btn btn__success"> <i class="icon-accuracy"></i> <span class="btn__text">Success</span> <i class="icon-check_circle_outline_24px"></i> </button>
<button type="button" class="btn btn__danger"> <i class="icon-cloud-architecture"></i> <span class="btn__text">Danger</span> <i class="icon-favorite"></i> </button>
<button type="button" class="btn btn__warning"> <i class="icon-accuracy"></i> <span class="btn__text">Warning</span> <i class="icon-check_circle_outline_24px"></i> </button>
<button type="button" class="btn btn__info"> <i class="icon-cloud-architecture"></i> <span class="btn__text">Info</span> <i class="icon-favorite"></i> </button>
<button type="button" class="btn btn__light"> <i class="icon-accuracy"></i> <span class="btn__text">Light</span> <i class="icon-check_circle_outline_24px"></i> </button>
<button type="button" class="btn btn__dark"> <i class="icon-cloud-architecture"></i> <span class="btn__text">Dark</span> <i class="icon-favorite"></i> </button>
Buttons with Tooltip
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn__tooltip text__secondary* "> <i class="icon-info"></i> <span class="btn__text">Dark</span> </button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__tooltip text__secondary"> <i class="icon-info"></i> <span class="btn__text">Dark</span> </button>
<button type="button" class="btn btn__tooltip btn__light text__light"> <i class="icon-info"></i> <span class="btn__text">Light</span> </button>
<button type="button" class="btn btn__tooltip text__primary"> <i class="icon-info"></i><span class="btn__text">Primary tooltip</span> </button>
<button type="button" class="btn btn__tooltip text__success"> <i class="icon-info"></i><span class="btn__text">Success</span> </button>
<button type="button" class="btn btn__tooltip" disabled> <i class="icon-info"></i> <span class="btn__text">Disabled</span> </button>
Icon Only Buttons
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn__icon btn__dark* "> <span class="sr-only">Button</span> <i class="icon-info"></i> </button>
( * name according to Theme Standard Colors. Add Span with some text and "sr-only" class for screen readers.)
<button type="button" class="btn btn__icon btn__dark"> <span class="sr-only">Button</span> <i class="icon-info"></i> </button>
<button type="button" class="btn btn__icon btn__primary btn--rounded"> <span class="sr-only">Button</span> <i class="icon-info"></i> </button>
<button type="button" class="btn btn__icon btn__dark btn__outline"> <span class="sr-only">Button</span> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn__icon btn__success btn__outline btn--rounded"> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn__icon btn__dark btn--curved"> <span class="sr-only">Button</span> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn__icon btn__dark btn__outline btn--curved"> <span class="sr-only">Button</span> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn__icon btn__info btn__outline btn--curved"> <span class="sr-only">Button</span> <i class="icon-delete"></i> </button>
Button Sizes
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--lg btn__primary* ">Primary Large</button> <button type="button" aria-label="Secondary" class="btn btn--sm btn__secondary* ">Secondary Small</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn__primary btn--lg">Primary Large</button>
<button type="button" class="btn btn__secondary btn--lg">Secondary Large</button>
<button type="button" class="btn btn__primary btn--sm">Primary small</button>
<button type="button" class="btn btn__secondary btn--sm">Secondary small</button>
Responsive Buttons
Add the following additional responsive classes in Buttons or Links for various sizes on various screens:
class="expand-sm-only" - Expand in Mobile Only
class="expand-md-only" - Expand in Tablet Only class="expand-lg-only" - Expand in Desktop Only class="expand-xl-only" - Expand on Large screen Only class="expand-md-up" - Expand on Tablet and Larger class="expand-lg-up" - Expand on Desktop and Larger class="expand-md-down" - Expand on Tablet and Mobile class="expand-lg-down" - Expand on Desktop, Tablet and Mobile
<button class="btn--sm mb-micro expand-sm-only btn btn__primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb-micro expand-md-only btn btn__primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb-micro expand-lg-only btn btn__primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb-micro expand-xl-only btn btn__primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb-micro expand-md-up btn btn__primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb-micro expand-lg-up btn btn__primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb-micro expand-md-down btn btn__primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb-micro expand-lg-down btn btn__primary" type="button">Expand in Mobile Only</button>
Button Group
Button Group is a container of buttons of related actions. They're helpful when we need to display a group of actions in a bar.
Add the .btnGroup class to parent holder, inside it the buttons are separated by a small (1px) border.
<div class="btnGroup"> <button class="btn btn__primary" type="button">One</button> <button class="btn btn__secondary" type="button">Two</button> <button class="btn btn__success" type="button">Three</button> <button class="btn btn__warning" type="button">Four</button> <button class="btn btn__info" type="button">Five</button> <button class="btn btn__dark" type="button">Six</button> </div>
Social Button Filled
Button Group is a container of buttons of related actions. They're helpful when we need to display a group of actions in a bar.
Social Button Border
Social Icon Button
Social Icon Button Rounded
Form Elements
Creating a form is designed to be easy and flexible. Forms are built with standard form elements and some standard classes to make sure their proper rendering across different browsers.
Input Field
Use relevant attribute on all inputs (input type = "email" for email address or input type="search" for Search fields).
Basic Input
Use class="form-control" on Input for pre-defined styles.
<div class="formGroup"> <label for="formDefault" class="sr-only">Default</label> <div class="formControlWrap flex-wrap d-flex align-items-center"> <div class="formControlHolder d-flex align-items-center"> <input type="email" class="formControl" id="formDefault" placeholder="Default Input" /> </div> </div> </div>
Input with Variations
Use additional classes on Input holder ( Curved, Rounded, Textonly ) for variations.
<div class="formGroup"> <label for="emailCurved" class="sr-only">Email Curved</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center curved"> <input type="email" class="formControl" placeholder="Curved Input" id="emailCurved" /> </div> </div> </div>
<div class="formGroup"> <label for="emailRounded" class="sr-only">Email Rounded</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center rounded"> <input type="email" class="formControl" placeholder="Rounded Input" id="emailRounded" /> </div> </div> </div>
<div class="formGroup col-3"> <label for="emailtextONly" class="sr-only">Email Rounded</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center textOnly"> <input type="email" class="formControl formControl--textOnly" placeholder="Text Input" id="emailtextONly" /> </div> </div> </div>
Input form Fields With labels
Label is paired with Input ( using ID ) so that click on Label shifts focus inside Input.
<div class="formGroup"> <label for="formDefault1" class="info">Default</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center"> <input type="email" class="formControl" id="formDefault1" placeholder="Default Input" /> </div> </div> </div>
<div class="formGroup"> <label for="emailCurved1" class="required">Email Curved</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center curved"> <input type="email" class="formControl" placeholder="Curved Input" id="emailCurved1" /> </div> </div> </div>
<div class="formGroup col-3"> <label for="emailRounded1" class="">Email Rounded</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center rounded"> <input type="email" class="formControl" placeholder="Rounded Input" id="emailRounded1" /> </div> </div> </div>
<div class="formGroup col-3"> <label for="emailtextONl1" class="">Email TextOnly</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center textOnly"> <input type="email" class="formControl formControl--textOnly" placeholder="Text Input" id="emailtextONl1" /> </div> </div> </div>
Input Fields With Search Icon
Add additional icon for description.
<div class="formGroup "> <label for="FirstName">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder d-flex align-items-center"> <input type="text" class="formControl" id="FirstName" name="FirstName" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny hide icon-check successOption"></span> </div> </div>
<div class="formGroup "> <label for="FirstName4">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder d-flex curved align-items-center"> <input type="text" class="formControl" id="FirstName4" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny hide icon-check successOption"></span> </div> </div>
<div class="formGroup"> <label for="FirstName24">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder d-flex rounded align-items-center"> <input type="text" class="formControl" id="FirstName24" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny hide icon-check successOption"></span> </div> </div>
<div class="formGroup"> <label for="FirstName24s4">Label</label> <div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="icnRight formControlHolder textOnly d-flex align-items-center"> <input type="text" class="formControl" id="FirstName24s4" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny hide icon-check successOption"></span> </div> </div>
With Error and Success icons
Inputs can have success and error feedback. Success is shown with green icon while error state is shown by red icon and the red border.
<div class="formGroup"> <label for="FirstName2">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnLeft formControlHolder d-flex align-items-center"> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> <input type="search" class="formControl" id="FirstName2" name="FirstName" placeholder="Text" required /> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny show icon-check successOption"></span> <span class="hide pt-micro text-danger">Error Message</span> </div> </div>
<div class="formGroup"> <label for="FirstName22">Error</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight d-flex align-items-center formControlHolder curved error"> <input type="search" class="formControl" id="FirstName22" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny show icon-info errorOptionx"></span> <span class="pl-tiny hide icon-check successOption"></span> <span class="pt-micro text-danger">Error Message</span> </div> </div>
<div class="formGroup"> <label for="FirstNam44">Success</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight d-flex align-items-center formControlHolder rounded"> <input type="search" class="formControl" id="FirstNam44" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny show icon-check successOption"></span> <span class="pt-micro text-danger hide">Error Message</span> </div> </div>
<div class="formGroup"> <label for="FirstNam444">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder d-flex align-items-center textOnly"> <input type="text" class="formControl success pl-tiny" id="FirstNam444" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny show icon-check successOption"></span> <span class="pt-micro text-danger hide">Error Message</span> </div> </div>
Input Search Fields With Search Icon
use input type="search" for search fields.
<div class="formGroup"> <label for="FirstName1">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder d-flex align-items-center"> <input type="search" class="formControl searchClear" id="FirstName1" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny show icon-check successOption"></span> <span class="text-danger hide">Error Message</span> </div> </div>
<div class="formGroup"> <label for="FirstName42">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder curved d-flex align-items-center"> <input type="search" class="formControl searchClear" id="FirstName42" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny hide icon-info errorOptionx"></span> <span class="pl-tiny show icon-check successOption"></span> <span class="hide text-danger">Error Message</span> </div> </div>
<div class="formGroup"> <label for="FirstName242">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder d-flex align-items-center rounded error"> <input type="search" class="formControl searchClear" id="FirstName242" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny show icon-info errorOptionx"></span> <span class="pl-tiny hide icon-check successOption"></span> <span class="text-danger">Error Message</span> </div> </div>
<div class="formGroup"> <label for="FirstName2424">Label</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="icnRight formControlHolder d-flex align-items-center textOnly error"> <input type="search" class="formControl searchClear" id="FirstName2424" name="FirstName" placeholder="Text" required /> <button type="button" class="p-tiny icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl-tiny show icon-info errorOptionx"></span> <span class="pl-tiny hide icon-check successOption"></span> <span class="text-danger">Error Message</span> </div> </div>
Input form Fields With backgrounds
Add additional class on Input Holder for background variation
<div class="formGroup"> <label for="formDefault2">Default</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder hasBg d-flex align-items-center"> <input type="email" class="formControl" id="formDefault2" placeholder="Default Input" /> </div> </div> </div>
<div class="formGroup"> <label for="emailCurved2" class="sr-only">Email Curved</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center curved hasBg"> <input type="email" class="formControl" placeholder="Curved Input" id="emailCurved2" /> </div> </div> </div>
<div class="formGroup"> <label for="emailRounded2" class="sr-only">Email Rounded</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center rounded hasBg"> <input type="email" class="formControl" placeholder="Rounded Input" id="emailRounded2" /> </div> </div> </div>
<div class="formGroup"> <label for="emailtextONl2" class="sr-only">Email Rounded</label> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center textOnly hasBg"> <input type="email" class="formControl" placeholder="Text Input" id="emailtextONl2" /> </div> </div> </div>
Text Area
(Icons Inside)
Similar to Input, the purpose of TextArea is to take multi line user Input.
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center"> <textarea class="formControl pt-tiny pl-small pb-micro pr-micro" placeholder="Text" ="textarea" ></textarea> </div> </div> </div>
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center curved"> <textarea class="formControl pt-tiny pl-small pb-micro pr-micro" placeholder="Text" ="textarea" > </textarea> </div> </div> </div>
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder d-flex align-items-center"> <textarea class="formControl pt-tiny pl-small pb-micro pr-micro" placeholder="Text area with characters count" ="textarea" id="textarea" > </textarea> </div> <span id="textChar"></span> </div> </div>
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap intIcn"> <div class="formControlHolder d-flex align-items-center"> <textarea class="formControl success pt-tiny pl-small pb-micro pr-mid" placeholder="Text" ="textarea" id="textarea1" > </textarea> </div> <span class="icon-check successOption"></span> </div> </div>
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap intIcn"> <div class="formControlHolder d-flex align-items-center curved"> <textarea class="formControl success pt-tiny pl-small pb-micro pr-mid" placeholder="Text" ="textarea" id="textarea1" > </textarea> </div> <span class="icon-check successOption"></span> </div> </div>
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap intIcn"> <div class="formControlHolder error d-flex align-items-center"> <textarea class="formControl pt-tiny pl-small pb-micro pr-mid" placeholder="Text" ="textarea" id="textarea1" > </textarea> </div> <span class="icon-info errorOptionx"></span> <span class="text-danger">Error Message</span> </div> </div>
(Icons Outside)
Just another TextArea variation with Icons outside TextArea.
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap"> <div class="formControlHolder d-flex"> <textarea class="formControl success pt-tiny pl-small pb-micro pr-micro" placeholder="Text" ="textarea" ></textarea> </div> <span class="pl-tiny icon-check successOption"></span> </div> </div>
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap"> <div class="formControlHolder d-flex curved"> <textarea class="formControl success pt-tiny pl-small pb-micro pr-micro" placeholder="Text" ="textarea" ></textarea> </div> <span class="pl-tiny icon-check successOption"></span> </div> </div>
<div class="formGroup"> <div class="formControlWrap d-flex flex-wrap"> <div class="formControlHolder error d-flex"> <textarea class="formControl pt-tiny pl-small pb-micro pr-micro" placeholder="Text" ="textarea" ></textarea> </div> <span class="pl-tiny icon-info errorOptionx"></span> <span class="text-danger">Error Message</span> </div> </div>
SELECT
In ML design system, we have developed custom SELECT element with custom styles. Browser default layouts are not shown in these custom layouts.
Use
formControlHolder__select
class in parent holder for SELECT styles.
<!-- 1 -->
<div class="formControlWrap d-flex flex-wrap align-items-center"> <div class="formControlHolder formControlHolder__select"> <select class="formControl" name="course" id="myselect" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> </div> <span class="hide pl-tiny icon-info errorOptionx"></span> <span class="hide text-danger">Please Select any option</span> </div>
<!-- 2 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select"> <select class="formControl searchClear" name="course" id="myselect1" required > <option value>Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> </div> <span class="hide pl-tiny icon-info errorOptionx"></span> <span class="text-danger hide">Please Select any option</span> </div>
<!-- 3 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select error"> <select class="formControl searchClear" name="course" id="myselect14" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> </div> <span class="pl-tiny icon-info errorOptionx"></span> <span class="text-danger">Please Select any option</span> </div>
<!-- 1 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select"> <select class="formControl formControl__event" name="course" id="myselect124" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> <button type="button" class="icon-today eventBtn" aria-label="Label" ></button> </div> <span class="hide pl-tiny icon-info errorOptionx"></span> <span class="text-danger hide">Please Select any option</span> </div>
<!-- 2 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select error"> <select class="formControl formControl__event" name="course" id="myselect125" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> <button type="button" class="icon-today eventBtn" aria-label="Label" ></button> </div> <span class="pl-tiny icon-info errorOptionx"></span> <span class="text-danger">Please Select any option</span> </div>
SELECT with Variations
<!-- 1 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select rounded"> <select class="formControl formControl__event" name="course" id="myselect126" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> <button type="button" class="icon-today eventBtn" aria-label="Label" ></button> </div> <span class="hide pl-tiny icon-info errorOptionx"></span> <span class="text-danger hide">Please Select any option</span> </div>
<!-- 2 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select textOnly"> <select class="formControl formControl__event" name="course" id="myselect127" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> <button type="button" class="icon-today eventBtn" aria-label="Label" ></button> </div> <span class="hide pl-tiny icon-info errorOptionx"></span> <span class="text-danger hide">Please Select any option</span> </div>
<!-- 3 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select hasBg"> <select class="formControl formControl__event" name="course" id="myselect128" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> <button type="button" class="icon-today eventBtn" aria-label="Label" ></button> </div> <span class="hide pl-tiny icon-info errorOptionx"></span> <span class="text-danger hide">Please Select any option</span> </div>
<!-- 4 -->
<div class="formControlWrap d-flex align-items-center flex-wrap"> <div class="formControlHolder formControlHolder__select hasBg"> <select class="formControl" name="course" id="myselect129" required > <option value="">Pick an option</option> <option>Pottery</option> <option>Gardening</option> <option>Art</option> <option>Photography</option> <option>Entrepreneurship</option> </select> <button type="button" class="icon-clear clearCrossBtn" aria-label="Label" ></button> <button type="button" class="icon-today eventBtn" aria-label="Label" ></button> </div> <span class="hide pl-tiny icon-info errorOptionx"></span> <span class="fSELECT hide text-danger">Please Select any option</span> </div>
CheckBox
Checkboxes are used to provide multiple choices to user from a list.
This is opposite to the case of radio buttons where the user must
select just one choice. Each individual Checkbox also have its own
label, created using a typical <label>
Default Checkbox
Curved
Rounded
Error States:
<!-- Default -->
<div class="formCheck"> <div class="checkBox"> <input type="checkbox" id="checkbox1" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel sr-only" for="checkbox1">label</label> </div>
<!-- Curved -->
<div class="formCheck"> <div class="checkBox checkBox--curved"> <input type="checkbox" id="checkbox1" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel sr-only" for="checkbox1">label</label> </div>
<!-- Rounded -->
<div class="formCheck"> <div class="checkBox checkBox--rounded"> <input type="checkbox" id="checkbox1" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel sr-only" for="checkbox1">label</label> </div>
Checkboxes with Background
add
checkBox__bg
class for additional background:
Default Checkbox
Curved
Rounded
Error States:
<!-- Default -->
<div class="formCheck"> <div class="checkbox__bg checkBox"> <input type="checkbox" id="checkbox1" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel sr-only" for="checkbox1">label</label> </div>
<!-- Curved -->
<div class="formCheck"> <div class="checkbox__bg checkBox checkBox--curved"> <input type="checkbox" id="checkbox1" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel sr-only" for="checkbox1">label</label> </div>
<!-- Rounded -->
<div class="formCheck"> <div class="checkbox__bg checkBox checkBox--rounded"> <input type="checkbox" id="checkbox1" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel sr-only" for="checkbox1">label</label> </div>
CheckBoxes with Label:
<!-- Default -->
<div class="formCheck"> <div class="checkBox"> <input type="checkbox" id="checkbox12" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox12">label</label> </div>
<!-- Curved -->
<div class="formCheck"> <div class="checkBox checkbox--curved"> <input type="checkbox" id="checkbox12" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox12">label</label> </div>
<!-- Rounded -->
<div class="formCheck"> <div class="checkBox"> <input type="checkbox checkbox--rounded" id="checkbox12" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox12">label</label> </div>
CheckBoxes with Groups:
<!-- 1 -->
<fieldset> <legend>Select your pizza toppings:</legend> <div class="formCheck"> <div class="checkBox"> <input type="checkbox" id="checkbox123" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox123">Ham</label> </div> <div class="formCheck"> <div class="checkBox"> <input type="checkbox" id="checkbox233" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox233">Pepperoni</label> </div> <div class="formCheck"> <div class="checkBox"> <input type="checkbox" id="checkbox323" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox323">Mushrooms</label> </div> </fieldset>
<!-- 2 -->
<fieldset> <legend>Select your Juice:</legend> <div class="formCheck"> <div class="checkBox checkBox__bg checkBox--rounded"> <input type="checkbox" id="checkbox1232" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox1232">mango</label> </div> <div class="formCheck"> <div class="checkBox checkBox__bg checkBox--rounded"> <input type="checkbox" id="checkbox2332" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox2332">peach</label> </div> <div class="formCheck"> <div class="checkBox checkBox__bg checkBox--rounded"> <input type="checkbox" id="checkbox3232" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox3232">PineApple</label> </div> </fieldset>
<!-- 3 -->
<fieldset> <legend>Select your Coffee:</legend> <div class="formCheck"> <div class="checkBox checkBox--curved"> <input type="checkbox" id="checkbox12321" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox12321">Latte</label> </div> <div class="formCheck"> <div class="checkBox checkBox--curved"> <input type="checkbox" id="checkbox23321" checked /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox23321">Cappuccino</label> </div> <div class="formCheck"> <div class="checkBox checkBox--curved"> <input type="checkbox" id="checkbox32321" /> <span class="checkboxFake"></span> </div> <label class="checkLabel" for="checkbox32321">Espresso</label> </div> </fieldset>
Radio Buttons
Unlike Checkboxes, Radio buttons are used when the users have to choose just one option.
Default
Square
Disabled State
Error State
<!-- Default -->
<div class="formRadio"> <div class="radioBtn radioBtn--rounded"> <input type="radio" name="fruit" id="radioBtn62" checked /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn62">Mango</label> </div> <div class="formRadio"> <div class="radioBtn radioBtn--rounded"> <input type="radio" name="fruit" id="radioBtn42" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn42">Orange</label> </div> <div class="formRadio"> <div class="radioBtn radioBtn--rounded"> <input type="radio" name="fruit" id="radioBtn52" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn52">Apple</label> </div>
<!-- Square -->
<div class="formRadio"> <div class="radioBtn"> <input type="radio" name="coffee" id="radioBtn12" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn12">Espresso</label> </div> <div class="formRadio"> <div class="radioBtn"> <input type="radio" name="coffee" id="radioBtn23" checked /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn23">Cappuccino</label> </div> <div class="formRadio formRadio__error"> <div class="radioBtn"> <input type="radio" name="coffee" id="radioBtn32" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn32">Latte</label> </div>
<!-- Disabled -->
<div class="formRadio"> <div class="radioBtn radioBtn--rounded disabled"> <input type="radio" id="radioBtn83" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn83">label</label> </div> <div class="formRadio"> <div class="radioBtn disabled"> <input type="radio" id="radioBtn93" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn93">label</label> </div>
<!-- Error State -->
<div class="formRadio error"> <div class="radioBtn radioBtn--rounded"> <input type="radio" id="radioBtn731" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn731">Label</label> </div> <div class="formRadio error"> <div class="radioBtn"> <input type="radio" id="radioBtn73" /> <span class="radioBtnFake"></span> </div> <label class="radioLabel" for="radioBtn73">Label</label> </div>
Toggle Buttons
These On/Off buttons are made purely with CSS3 and some animated transitions. Users can flip to switch on or switch off.
Add the toggleBtn class to an element to create a Toggle
Button. Inside, add an <input type="checkbox">.
Next to that, create a <label> Give the
<input> a unique ID and point the
<label> to it with the for attribute. This makes
the toggle button clickable. Also add toggle class on
input with aria-hidden="true". The status of toggle
button is calculated from status of
aria-checked attribute.
Inside the Toggle label is screen reader-only text, which uses the .sr-only class to add accessibility feature.
<div class="toggleBtn p-micro"> <input class="toggle" type="checkbox" id="toggleBtn" aria-hidden="true" aria-checked="true" checked /> <label for="toggleBtn"> <span class="sr-only">Toggle:</span> </label> </div>
<div class="toggleBtn p-micro disabled"> <input class="toggle" type="checkbox" aria-hidden="true" aria-checked="true" id="toggleBtn2" disabled /> <label for="toggleBtn2"> <span class="sr-only">Toggle:</span> </label> </div>
<div class="toggleBtn rounded p-micro"> <input type="checkbox" id="toggleBtn3" class="toggle" aria-hidden="true" aria-checked="true" checked /> <label for="toggleBtn3"> <span class="sr-only">Toggle:</span> </label> </div>
<div class="toggleBtn rounded filled p-micro"> <input type="checkbox" id="toggleBtn4" class="toggle" aria-hidden="true" aria-checked="true" checked /> <label for="toggleBtn4"> <span class="sr-only">Toggle:</span> </label> </div>
<div class="toggleBtn rounded dark p-micro"> <input type="checkbox" id="toggleBtn5" class="toggle" aria-hidden="true" aria-checked="true" checked /> <label for="toggleBtn5"> <span class="sr-only">Toggle:</span> </label> </div>
Toggle Buttons (Icons + Label)
For toggle with label, there is additional span in the label, the
status of this span is updated based on the status of
aria-checked attribute.
<div class="toggleBtn p-micro"> <input type="checkbox" id="toggleBtn6" class="toggle" aria-checked="true" aria-hidden="true" checked /> <label for="toggleBtn6"> <span class="labelTxt">Label On</span> </label> </div>
<div class="toggleBtn p-micro disabled"> <input type="checkbox" id="toggleBtn7" class="toggle" aria-checked="false" aria-hidden="true" disabled /> <label for="toggleBtn7"> <span class="labelTxt">Label Off</span> </label> </div>
<div class="toggleBtn rounded p-micro"> <input type="checkbox" id="toggleBtn8" class="toggle" aria-checked="true" aria-hidden="true" checked /> <label for="toggleBtn8"> <span class="labelTxt">Label On</span> </label> </div>
<div class="toggleBtn rounded filled p-micro"> <input type="checkbox" id="toggleBtn9" class="toggle" aria-checked="true" aria-hidden="true" checked /> <label for="toggleBtn9"> <span class="labelTxt">Label On</span> </label> </div>
<div class="toggleBtn rounded dark p-micro"> <input type="checkbox" id="toggleBtn10" class="toggle" aria-checked="false" aria-hidden="true" /> <label for="toggleBtn10"> <span class="labelTxt">Label Off</span> </label> </div>
Example Form
<form class="col-9 p-mid">
<div class="row mb-small">
<div class="formGroup col-6">
<label for="Firstnamee" class="">First Name</label>
<input
type="text"
class="formControl"
id="Firstnamee"
placeholder="First Name"
""
/>
</div>
<div class="formGroup col-6">
<label for="lastName" class="">Last Name</label>
<input
type="text"
class="formControl formControl--curved"
placeholder="Last Name"
id="lastName"
""
/>
</div>
</div>
<div class="row mb-small">
<div class="formGroup col-12">
<label for="Email" class="">Email</label>
<input
type="email"
class="formControl"
id="Email"
placeholder="Enter Email"
""
required
/>
</div>
</div>
<div class="row mb-small">
<div class="formGroup col-12">
<label for="pass" class="">Password</label>
<input
type="password"
class="formControl"
id="pass"
placeholder="Enter Password"
""
required
/>
</div>
</div>
<div class="row mb-small">
<!--simple select-->
<div class="formGroup col-12 mr-mid">
<label for="gender">Gender</label>
<div class="formControlHolder formControlHolder__select">
<select class="formControl" name="course" id="gender" required>
<option value="">Your Gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<button
type="button"
class="icon-clear clearCrossBtn"
aria-label="Label"
></button>
<span class="icon-info errorOptionx"></span>
</div>
</div>
<!--/Simple Select-->
</div>
<div class="row mb-smal justify-content-between">
<fieldset class="col-3 ">
<legend>Select your Languages:</legend>
<div class="formCheck">
<div class="checkBox">
<input type="checkbox" id="checkboxs"/>
<span class="checkboxFake"></span>
</div>
<label class="checkLabel" for="checkboxs">Urdu</label>
</div>
<div class="formCheck">
<div class="checkBox">
<input type="checkbox" id="checkbox233s" checked/>
<span class="checkboxFake"></span>
</div>
<label class="checkLabel" for="checkbox233s">English</label>
</div>
<div class="formCheck">
<div class="checkBox">
<input type="checkbox" id="checkbox323s"/>
<span class="checkboxFake"></span>
</div>
<label class="checkLabel" for="checkbox323s">Persian</label>
</div>
<div class="formCheck">
<div class="checkBox">
<input type="checkbox" id="checkbox323sx"/>
<span class="checkboxFake"></span>
</div>
<label class="checkLabel" for="checkbox323sx">Hindi</label>
</div>
</fieldset>
<div class="col-3">
<strong class="mb-small d-flex">Select your Cofee</strong>
<div class="formRadio">
<div class="radioBtn">
<input type="radio" name="coffee" id="radioBtn123"/>
<span class="radioBtnFake"></span>
</div>
<label class="radioLabel" for="radioBtn123">Espresso</label>
</div>
<div class="formRadio">
<div class="radioBtn">
<input type="radio" name="coffee" id="radioBtn233" checked/>
<span class="radioBtnFake"></span>
</div>
<label class="radioLabel" for="radioBtn233">Cappuccino</label>
</div>
<div class="formRadio">
<div class="radioBtn">
<input type="radio" name="coffee" id="radioBtn323"/>
<span class="radioBtnFake"></span>
</div>
<label class="radioLabel" for="radioBtn323">Latte</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-end">
<button type="submit" class="btn btn__primary btn__outline">
Submit Form
</button>
</div>
</div>
</form>
ToolTips
Tooltips are used to display extended information for an element or an action on the page. A basic tooltip shows information on hover and does not require additional JavaScript functions.
Tooltip with no arrow
This is a tooltip with dark background. Hover on icon to reveal tooltip This is a tooltip
This is a tooltip This is a tooltip with light background. Hover on icon to reveal tooltip
<span style="color: var(--primary);" class="ml-tiny tooltip-holder sample icon-info"> <span class="dark curved py-tiny px-small text--center" data-arrow="false" data-position="top" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="color: var(--primary);" class="ml-tiny tooltip-holder sample icon-info"> <span class="light curved py-tiny px-small text--center" data-arrow="false" data-position="top" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
Tooltip with arrow
Hover on each element to reveal tooltip:
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Top Start <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="top-start" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Top End <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="top-end" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Top <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="top" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Left Start <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="left-start" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Left <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="left" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Left End <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="left-end" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Right Start <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="right-start" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Right <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="right" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Right End <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="right-end" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Bottom Start <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="bottom-start" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Bottom <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="bottom" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p-small tooltip-holder"> Bottom End <span class="dark py-tiny px-small text--center" data-arrow="true" data-position="bottom-end" data-type="tooltip" tabindex="1">This is a tooltip</span> </span>
Tooltip Paragraphs
Some times there is detailed description required in tooltips. In such case the content increases although a max. character limit should be set.
Hover on icon to reveal tooltip: A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.
<span class="dark curved py-tiny px-small" data-arrow="true" data-position="top" data-type="tooltip" tabindex="1">A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup. </span>
Popovers
As compared to tooltip, the purpose of popover is to provide additional information. They can also contain action buttons, links and alert messages.
<div class="d-flex align-items-start dark p-small" data-arrow="false" data-position="top" data-type="popover" tabindex="1" > <span tabindex="1" class="icon icon-error mr-tiny"> <span class="sr-only">info-icon</span> </span> <span tabindex="1" >This is a dark popover (no Arrow) with a close button.</span > <a href="#" class="btn--close ml-small"> <span tabindex="1" class="icon icon-cross-circle"> <span class="sr-only">close button</span> </span> </a> </div>
<!-- 2 -->
<div class="d-flex align-items-start dark p-small" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr-small" ><span class="sr-only">info-icon</span></span > <span tabindex="1" >This is a dark popover (with Arrow) with a close button.</span > <a tabindex="1" href="#" class="btn--close ml-small"> <span class="icon icon-cross-circle" ><span class="sr-only">close button</span></span > </a> </div>
<!-- 3 -->
<div class="d-flex align-items-start light p-small" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr-small" ><span class="sr-only">info-icon</span></span > <span tabindex="1" >This is a light popover (with Arrow) with a close button.</span > <a tabindex="1" href="#" class="btn--close ml-small"> <span class="icon icon-cross-circle" ><span class="sr-only">close button</span></span > </a> </div>
<!-- 4 -->
<div class="d-flex align-items-start dark p-small curved" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr-small" ><span class="sr-only">info-icon</span></span > <span tabindex="1" >This is a popover (with Arrow and rounded curves) with a close button.</span > <a tabindex="1" href="#" class="btn--close ml-small"> <span class="icon icon-cross-circle" ><span class="sr-only">close button</span></span > </a> </div>
<!-- 5 -->
<div class="d-flex align-items-start dark p-small" data-arrow="true" data-position="top-start" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr-small" ><span class="sr-only">info-icon</span></span > <span tabindex="1" >This is a dark popover (with Left aligned Arrow) with a close button.</span > <a tabindex="1" href="#" class="btn--close ml-small"> <span class="icon icon-cross-circle" ><span class="sr-only">close button</span> </span></a > </div>
<!-- 6 -->
<div class="d-flex align-items-start dark p-small" data-arrow="true" data-position="top-end" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr-small" ><span class="sr-only">info-icon</span></span > <span tabindex="1" >This is a dark popover (with Right aligned Arrow) with a close button.</span > <a tabindex="1" href="#" class="btn--close ml-small"> <span class="icon icon-cross-circle" ><span class="sr-only">close button</span></span > </a> </div>
<!-- 7 -->
<div class="d-flex align-items-start dark p-small" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr-small" ><span class="sr-only">info-icon</span></span > <span tabindex="1"> <strong class="title">This is a title</strong> A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.</span > <a href="#" class="btn--close ml-small"> <span tabindex="1" class="icon icon-cross-circle" ><span class="sr-only">close button</span></span > </a> </div>
<!-- 8 -->
<div class="d-flex align-items-start dark p-small" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <div class="popupWrap"> <span tabindex="1" class="mb-small" ><strong class="title">This is a title</strong> A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.</span > <footer tabindex="1"> <a class="popoverLink" href="#">Link</a> </footer> </div> <a tabindex="1" href="#" class="btn--close ml-small" ><span class="icon icon-cross-circle" ><span class="sr-only">close button</span></span ></a > </div>
<!-- 9 -->
<div class="d-flex align-items-start dark p-small" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <div class="popupWrap"> <span tabindex="1" >A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup. <a class="linkMore" href="#">Learn More</a> </span> </div> <a tabindex="1" href="#" class="btn--close ml-small"> <span class="icon icon-cross-circle"> <span class="sr-only">close button</span> </span> </a> </div>
<!-- 10 -->
<div class="d-flex align-items-start light p-small" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <div class="popupWrap"> <span tabindex="1" class="mb-small" ><strong class="title">This is a title</strong> A cupcake is a small cake designed to serve one person, which may be baked in a small thin paper or aluminum cup.</span > <footer> <button tabindex="1" class="btn btn btn__outline btn__dark"> Action1 </button> <button tabindex="1" class="btn btn__dark">Action2</button> <button tabindex="1" class="btn btn__dark clear"> Action3 </button> </footer> </div> <a tabindex="1" href="#" class="btn--close ml-small"> <span class="icon icon-cross-circle" ><span class="sr-only">close button</span></span > </a> </div>
<!-- 11 -->
<div class="d-flex align-items-start dark p-small" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <div class="popupWrap"> <ul class="mb-small popupActionList list-unstyled"> <li tabindex="1" class="mb-small"> <a class="d-flex" href="#" ><span class="mr-small icon icon-note-add"></span>Add a Note</a > </li> <li tabindex="1" class="mb-small"> <a class="d-flex" href="#" ><span class="mr-small icon icon-bookmarks"></span >Bookmark this</a > </li> <li tabindex="1" class="mb-small"> <a class="d-flex" href="#" ><span class="mr-small icon icon-heart"></span>Like it</a > </li> <li tabindex="1" class="mb-small"> <a class="d-flex" href="#" ><span class="mr-small icon icon-mail"></span>Email it</a > </li> </ul> <footer tabindex="1"> <a href="#" class="btn--close d-flex" ><span class="mr-small icon icon-cross-circle"></span >Close</a > </footer> </div> </div>
Unlike tooltips, Popovers require additional JavaScript functions to activate.
Iconography
The icons used in Design System are SVGs because of the improved accessibility and vector support of SVG format.
All icons can be accessed by using class prefix icon- for
example
<span
class="icon-reduced-time-to-market"></span>
Icon Sets
Here are some sample icons. The complete list of icons can be found in
SCSS/Vendors/icomons_styles.scss
Action Icons
Alert Icons
Device Icons
<!--Action Icons-->
<span class="icon-3d-rotate"></span> <span class="icon-accessibility"></span> <span class="icon-accessibility-new"></span> <span class="icon-accessible"></span> <span class="icon-account-balance"></span> <span class="icon-account-wallet"></span>
<!--Alert Icons-->
<span class="icon-error"></span> <span class="icon-warning-circle"></span> <span class="icon-bell-info"></span> <span class="icon-warning"></span> <span class="icon-info-triangle"></span> <span class="icon-bell"></span>
<!--Device Icons-->
<span class="icon-alarm"></span> <span class="icon-alarm-add"></span> <span class="icon-alarm-off"></span> <span class="icon-alarm-on"></span> <span class="icon-all-inbox"></span> <span class="icon-all-out"></span>
Modal
A modal is a container in which you can put any kind of content, from text
to forms to video to an entire grid. Modals are built with HTML, CSS, and
JavaScript. They’re positioned over everything else in the document and
remove scroll from the <body> so that modal content
scrolls instead.
There are four size in Modal Small, Default, Large and Extra Large. Use
these classes for different sizes: modalSmall,
modalLarge, modalExtraLarge.
By default whole Modal is scrollable, if scroll is required on Content
only, use this class modalDialogScrollable.
Modals Popup Size
Default: Left-align
Title + Message
Icon + Title + Message
Title + Paragraph
Close button variations
Basic Modal (Header / Body - Content / Footer)
Center-align
<!--Modal Popup-->
<div id="modalBackdrop" class="modalBackdrop"></div>
<div id="modal1" class="modal" tabindex="-1">
<div class="modalDialog">
<div class="modalContent">
<div class="position-relative">
<button tabindex="1" type="button" class="icnClose icon-close" onclick="hideModal();"></button>
</div>
</div>
</div>
</div>
<!--Modal Popup Small-->
<div classmodalDialog modalSmall"></div>
<!--Modal Popup Large-->
<div classmodalDialog modalLarge"></div>
<!--Modal Popup Extra Large-->
<div classmodalDialog modalExtraLarge"></div>
<!--Modal Popup Content Scrollable-->
<div classmodalDialog modalDialogScrollable"></div>
Not in stock
This item is temporarily out of stock.
notification message
This is a notification message. Please read the message and close the window.
Success Message
Warning Message
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe tAhat is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Because their small size is more efficient for heat conduction, cupcakes bake much faster than a normal layered cake.[7] During baking, the volume of the batter initially increases due to the production of carbon dioxide, then decreases upon cooling due to the release of leavening gases.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Notification Message
This is a notification message. Please read the message. if you need additional information Learn More
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Because their small size is more efficient for heat conduction, cupcakes bake much faster than a normal layered cake.[7] During baking, the volume of the batter initially increases due to the production of carbon dioxide, then decreases upon cooling due to the release of leavening gases.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Select your option(s).
Please select an option to continue.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes.
Subscribe
To subscribe to this website, please enter your email address here. We will send updates occasionally.
What is cupcake? This is a title.
First title
A standard cupcake uses the same basic ingredients as standard-sized cakes. Choose your toppings.
Second title
A standard cupcake uses the same basic ingredients as standard-sized cakes. Choose your toppings. A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredien
Notification Message
This is a notification message. Please read the message and close the window.
Success Message
This is a notification message. Please read the message and close the window.
Welcome Teams!
Let’s get started. You and your tean can now use the platform for free for 14 days. Explore our guide or jump right into your dashboard
Success!
This is a notification message. Please read the message and close the window.
This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Because their small size is more efficient for heat conduction, cupcakes bake much faster than a normal layered cake.[7] During baking, the volume of the batter initially increases due to the production of carbon dioxide, then decreases upon cooling due to the release of leavening gases.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Because their small size is more efficient for heat conduction, cupcakes bake much faster than a normal layered cake.[7] During baking, the volume of the batter initially increases due to the production of carbon dioxide, then decreases upon cooling due to the release of leavening gases.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Because their small size is more efficient for heat conduction, cupcakes bake much faster than a normal layered cake.[7] During baking, the volume of the batter initially increases due to the production of carbon dioxide, then decreases upon cooling due to the release of leavening gases.
What is cupcake? This is a title.
A standard cupcake uses the same basic ingredients as standard-sized cakes: butter, sugar, eggs, and flour. Nearly any recipe that is suitable for a layer cake can be used to bake cupcakes. The cake batter used for cupcakes may be flavored or have other ingredients stirred in, such as raisins, berries, nuts, or chocolate chips.
Because their small size is more efficient for heat conduction, cupcakes bake much faster than a normal layered cake.[7] During baking, the volume of the batter initially increases due to the production of carbon dioxide, then decreases upon cooling due to the release of leavening gases.