In many cases you'll have box with border, usually it's the same colors throughout the
site.
In that case use the class content-box to add border and background
color or the variables $content-box-bdr and
$content-box-bg
NOTE: This only adds border and background color, not padding.
Stripped Background
Stripped background
Add a tag with the class stripped-container and in the same tag add
stripped-even (first row light)
or stripped-odd (second row light).
NOTE: This will only add background colors, not paddings.
Example with first row light
Example with stripped-even: first row light
Example with stripped-even: first row light
Example with stripped-even: first row light
Example with stripped-even: first row light
Example with second row light
Example with stripped-odd: second row light
Example with stripped-odd: second row light
Example with stripped-odd: second row light
Example with stripped-odd: second row light
Type
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas magna ipsum, posuere in
nisi nec,
efficitur luctus turpis. Praesent fermentum ligula faucibus, sollicitudin purus a,
imperdiet elit.
Vestibulum suscipit leo et risus mattis feugiat. Nullam pretium tincidunt nunc, ac
molestie ex. Duis
laoreet vitae est a maximus. Maecenas arcu libero, consequat pharetra nulla nec, aliquam
sollicitudin dolor. Nulla at porta diam. Sed rutrum tincidunt augue, id rutrum neque
consectetur ut.
Aenean risus nibh, tincidunt ut justo sed, iaculis pellentesque ipsum. Integer
consectetur nisi id
leo mollis pulvinar. Sed ut vehicula purus. Fusce eget semper lorem.
Headings
H1
H2
H3
H4
H5
H6
Titles
Page title large, step title or module title
Page title medium or module sub-title
Links inside text
In general Primary Link it's used. No need to add the class.
In some cases you'll need this Secondary Link. It
will be in the design.
Icons
To use this icons you only have to put the class in the tag.
Once in context modify font-size to change it's size and color for text color.
If you can't modify HTML, and want to change it from css, use it as pseudo class (before or after)
NOTE: This ↓ markup for Radio button it's used in many places at the moment. Eventually it will be deprecated.
Use this markup when you only need the radio button. The main tag can be anything, as long as you keep the class.
Use this markup when you need text. The main tag can be anything, as long as you keep the class.
Text
Checkbox
NOTE: This ↓ markup for Checkbox it's used in many places at the moment. Eventually it will be deprecated.
Use this markup when you only need the checkbox. The main tag can be anything, as long as you keep the class.
Use this markup when you need text. The main tag can be anything, as long as you keep the class.
Select
Single selection
Create a Select and fire an javascript event as described in the plugin page.
NOTE: For single selects only, in order for the placeholder value to appear, you must have a blank <option>
$(document).ready(function() {
$("#e1").select2({
placeholder: "Select a State"
});
});
Multiple choice Select
Create a Select and fire an javascript event as described in the plugin page.
NOTE: For single selects only, in order for the placeholder value to appear, you must have a blank <option>
$(document).ready(function() {
$("#e9").select2({
placeholder: "Select a State"
});
});
Row Revert
Revert the order of divs
NOTE: This uses FlexBox, in IE9 things are not reverted but they look ok.
This will only revert order, but since it uses flexbox it will also float them in most
browsers. For IE9 add float or display inline to the childs you want to float.
Add class row-reverse-all to container div and classes row-flex
row-reverse to it's childs
Left
Right
Left
Right
Left
Right
Left
Right
Add class row-reverse-interlaced to container div and classes row-flex
row-reverse to it's childs
Left
Right
Left
Right
Left
Right
Left
Right
Message
Information message
This is an example
Helpers
Display
For the most used display we have a class with that property.
This are the clases available.
d-block
d-inline-block
d-inline
d-flex
d-table
d-table-cell
d-inherit
d-inline-flex
d-inline-table
Text align
Remember that text-align always should be apply to the parent of the item we want to center.
This are the clases available.
t-center
t-left
t-right
t-justify
t-inherit
t-initial
Center me!
Padding and margins
To add padding or margin to an element form the name of the class like this: property-side-amount
Property: p (padding) or m (margin)
Side: t (top), b (bottom), l (left), r (right)
Available sizes: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100
More helpers will be added in the future. Any ideas write an email to Product web team.
