Lorem ipsum dolor sit amet.
Getting Started with Friday Design System
We have made Friday Design System easy to get started. We have put together these guides to help you get up and running in no time. These guides include SCSS setup and install, how to use the FDS components, accessibility and more.
How to use FDS:
We have put together some guides to help you start super fast. There are two ways to use FDS:
Install FDS with NPM package manager
Friday Design System is available on npm. The package includes all of the source SCSS and JavaScript files.
Using FDS in Angular Projects:
-
First, install the core FDS components in your project:
npm i @mobilelivenpm/fds-static-scss -
Then, install the FDS angular components:
npm i @mobilelivenpm/fds-angular -
Also you can additionally install icon packs from following
location:
npm i @mobilelivenpm/fds-icons
Once package is installed, all the components are imported in node modules. Perform the following steps to use FDS components in your project:
-
Use component styles:
In your main style sheet, import (SCSS) styles of selected components using following path:
@import node_modules/@mobilelivenpm/fds-static-scss/src/scss/component
-
Customize component styles:
In order to customize the existing component, create a theme folder in your main styles and copy the styles file of the relevant component from the sample path as shown:
@import node_modules/@mobilelivenpm/fds-static-scss/theme/component
How to run a Repo (in Development Environment)
There are 3 repositories (libraries) in Friday Design System, Static, Angular and React. To run each, there is a separate set of terminal commands:
1- Static Repository:
To run static development environment, go to FDS main-folder > libs > static and run following two commands in the terminal of your code editor:
1)- npm run watch / yarn watch. This will compile the code while you're working and also opens the view in browser at localhost:3000 so, make sure this port is free.
2)- npm run build / yarn build. This command prepares the final build files to be used in production.
2- Angular Repository:
To run angular development environment, go to FDS main-folder > apps and use following two commands in the terminal of your code editor:
1)- ng serve folder-name(in our case it is 'angular-demos'). This will run the code and you need to manually open the view in the browser (at localhost:4200)
2)- nx build --prod folder-name (in our case it is 'angular-demos'). This will prepare the files to be used in production build.
3- React Repository:
To run React development environment, go to FDS main-folder > apps and use following command:
ng serve folder-name(in our case it is 'rx-xis-app'). This will run the code and you need to manually open the view in the browser (at localhost:4200)
Static File Structure (Development Environment)
The following file structure is for FDS-Static repo:
Please note this structure gives an overview of important files/folders required to run static FDS theme.
static > src > scss
The SCSS folder contains core styles for all components. These styles should be selected as per each component.
static > src > styles
The styles folder contains final styles that contain all core styles.
static > src > views
The views folder contains html templates of all components.
static > theme > theme-settings
Use theme settings to override core component styles as per your need.
Angular File Structure (Development Environment)
The following file structure is for FDS-Angular repo:
Please note this structure gives an overview of important files/folders required to run Angular FDS theme.
apps > angular-demos > style.scss
Style.scss file contains all the styles including theme settings and imported individual component styles.
src > styles > theme
This folder contains theme related files and custom theme settings for individual components.
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
Grid system
FDS provides mobile first flex based grid system to build layouts of various sizes. Grid system contains 12 columns, 5 breakpoints and many utility classes.
1/3 columns
1/3 columns
1/3 columns
<div class="container">
<div class="row">
<div class="col--sm">
One of three columns
</div>
<div class="col--sm">
One of three columns
</div>
<div class="col--sm">
One of three columns
</div>
</div>
</div>Above code creates 3 columns of equal width centered in the page with '.container' class.
Auto Layout
Using col only without specifying sm or md generates equal size columns:
One of three columns
One of three columns
One of three columns
<div class="container">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>Variable Content Size
Using col--{breakpoint}--auto generates column based on content size:
One of three columns
Variable Content Size
One of three columns
<div class="container">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col--auto">
Variable Content Size
</div>
<div class="col">
One of three columns
</div>
</div>
</div>Utilities
There are several pre defined utility classes for indents. Use these classes on different breakpoints as per requirement.
Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Border
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Additive
<span class="border"></span>
<span class="border--top"></span>
<span class="border--right"></span>
<span class="border--bottom"></span>
<span class="border--left"></span>
Subtractive
<span class="border--0"></span>
<span class="border--top--0"></span>
<span class="border--right--0"></span>
<span class="border--bottom--0"></span>
<span class="border--left--0"></span>
Border color
Change the border color using utilities built on our theme colors.
<span class="box m--3 border border--primary"></span>
<span class="box m--3 border border--secondary"></span>
<span class="box m--3 border border--success"></span>
<span class="box m--3 border border--danger"></span>
<span class="box m--3 border border--warning"></span>
<span class="box m--3 border border--info"></span>
<span class="box m--3 border border--light"></span>
<span class="box m--3 border border--dark"></span>
<span class="box m--3 border border--white"></span>
Border-radius
Add classes to an element to easily round its corners.
<img src="..." alt="..." class="m--3 rounded">
<img src="..." alt="..." class="m--3 rounded--top">
<img src="..." alt="..." class="m--3 rounded--right">
<img src="..." alt="..." class="m--3 rounded--bottom">
<img src="..." alt="..." class="m--3 rounded--left">
<img src="..." alt="..." class="m--3 rounded--circle">
<img src="..." alt="..." class="m--3 rounded--pill">
<img src="..." alt="..." class="m--3 rounded--0">
Clearfix
Quickly and easily clear floated content within a container by adding a clearfix utility.
Easily clear floats by adding .clearfix
to the parent element. Can also be used as a mixin.
<div class="clearfix">...</div>
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
.text--primary
.text--secondary
.text--success
.text--danger
.text--warning
.text--info
.text--light
.text--dark
<p class="text--primary">.text--primary</p>
<p class="text--secondary">.text--secondary</p>
<p class="text--success">.text--success</p>
<p class="text--danger">.text--danger</p>
<p class="text--warning">.text--warning</p>
<p class="text--info">.text--info</p>
<p class="text--light">.text--light</p>
<p class="text--dark">.text--dark</p>
Contextual text classes also work well on anchors with the provided hover
and focus states. Note that the .text-white
and .text-muted
class has no additional link styling beyond underline.
Background Color
Similar to the contextual text color classes, easily set the background of
an element to any contextual class. Anchor components will darken on hover,
just like the text classes. Background utilities
do not set color, so in some cases you’ll want
to use .text-* utilities.
.bg--primary
.bg--secondary
.bg--success
.bg--danger
.bg--warning
.bg--info
.bg--white
.bg--light
.bg--no-color
.bg--dark
<div class="bg--primary">.bg--primary</div>
<div class="bg--secondary">.bg--secondary</div>
<div class="bg--success">.bg--success</div>
<div class="bg--danger">.bg--danger</div>
<div class="bg--warning">.bg--warning</div>
<div class="bg--info">.bg--info</div>
<div class="bg--white">.bg--white</div>
<div class="bg--light">.bg--light</div>
<div class="bg--no-color">.bg--no-color</div>
<div class="bg--dark">.bg--dark</div>
Background Gradient
When $enable-gradients is set to true (default is
false), you can use .bg--gradient-- utility
classes.
.bg--gradient--primary.bg--gradient--secondary.bg--gradient--success.bg--gradient--danger.bg--gradient--warning.bg--gradient--info.bg--gradient--light.bg--gradient--dark
Display Properties
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
How it works
Change the value of the display property with our responsive display utility
classes. We purposely support only a subset of all possible values for
display. Classes can be combined for various effects as you
need.
Notation
Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
.d--{value}forxs-
.d--{breakpoint}--{value}forsm,md,lg, andxl.
Where value is one of:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
The display values can be altered by changing the $displays variable and recompiling the SCSS.
The media queries affect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.
Examples
d--inline
d--inline
<div class="d--inline p--2 bg--primary text--dark">d--inline</div>
<div class="d--inline p--2 bg--dark text--white">d--inline</div>
d--block
d--block
<div class="d--block p--2 bg--primary text--dark">d--block</div>
<div class="d--block p--2 bg--dark text--white">d--block</div>
Hiding elements
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.
| Screen Size | Class |
|---|---|
| Hidden on all |
.d--none
|
| Hidden only on xs |
.d--none .d--sm--block
|
| Hidden only on sm |
.d--sm--none .d--md--block
|
| Hidden only on md |
.d--md--none .d--lg--block
|
| Hidden only on lg |
.d--lg--none .d--xl--block
|
| Hidden only on xl |
.d--xl--none
|
| Visible on all |
.d--block
|
| Visible only on xs |
.d--block .d--sm--none
|
| Visible only on sm |
.d--none .d--sm--block .d--md--none
|
| Visible only on md |
.d--none .d--md--block .d--lg--none
|
| Visible only on lg |
.d--none .d--lg--block .d--xl--none
|
| Visible only on xl |
.d--none .d--xl--block
|
hide on screens smaller than lg
<div class="d--lg--none">hide on lg and wider screens</div>
<div class="d--none d--lg--block">hide on screens smaller than lg</div>
Display in print
Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.
.d--print--none.d--print--inline.d--print--inline--block.d--print--block.d--print--table.d--print--table--row.d--print--table--cell.d--print--flex.d--print--inline--flex
The print and display classes can be combined.
Screen Only (Hide on print only)
Hide up to large on screen, but always show on print
<div class="d--print--none">Screen Only (Hide on print only)</div>
<div class="d--none d--print--block">Print Only (Hide on screen only)</div>
<div class="d--none d--lg--block d--print--block">Hide up to large on screen, but always show on print</div>
Embeds
Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
About
Rules are directly applied to <iframe>,
<embed>, <video>, and
<object> elements; optionally use an explicit descendant
class .embed-responsive-item when you want to match the styling for other
attributes.
Pro-Tip! You don’t need to include frameborder="0" in your
<iframe>s as we override that for you.
Example
Wrap any embed like an <iframe> in a parent element with
.embed-responsive and an aspect ratio. The .embed-responsive-item isn’t
strictly required, but we encourage it.
<div class="embed--responsive embed--responsive--16by9">
<iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Aspect ratios
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
<!-- 21:9 aspect ratio -->
<div class="embed--responsive embed--responsive--21by9">
<iframe class="embed--responsive--item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed--responsive embed--responsive--16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed--responsive embed--responsive--4by3">
<iframe class="embed--responsive--item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed--responsive embed--responsive--1by1">
<iframe class="embed--responsive--item" src="..."></iframe>
</div>
Within _variables.scss, you can change the aspect ratios you want to use. Here’s an example of the $embed-responsive-aspect-ratios list:
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
Enable flex behaviors
Apply display utilities to create a flexbox container and
transform direct children elements into flex items. Flex
containers and items are able to be modified further with additional flex
properties.
I'm a flexbox container!
<div class="d--flex p--2 border border--secondary bg--light">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d--inline-flex p--2 border border--secondary bg--light">I'm an inline flexbox container!</div>
Responsive variations also exist for .d--flex and
.d--inline--flex.
.d--flex.d--inline--flex.d--sm--flex.d--sm--inline--flex.d--md--flex.d--md--inline--flex.d--lg--flex.d--lg--inline--flex.d--xl--flex.d--xl--inline--flex
Direction
Set the direction of flex items in a flex container with direction
utilities. In most cases you can omit the horizontal class here as the
browser default is row. However, you may encounter situations
where you need to explicitly set this value (like responsive layouts).
Use .flex--row to set a horizontal direction (the browser
default), or .flex--row--reverse to start the horizontal
direction from the opposite side.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d--flex flex--row p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex flex--row p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
Use .flex--column to set a vertical direction, or
.flex--column--reverse to start the vertical direction from the
opposite side.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d--flex flex--column p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex flex--column--reverse p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
Responsive variations also exist for flex--direction.
.flex--row.flex--row--reverse.flex--column.flex--column--reverse.flex--sm--row.flex--sm--row--reverse.flex--sm--column.flex--sm--column--reverse.flex--md--row.flex--md--row--reverse.flex--md--column.flex--md--column--reverse.flex--lg--row.flex--lg--row--reverse.flex--lg--column.flex--lg--column--reverse.flex--xl--row.flex--xl--row--reverse.flex--xl--column.flex--xl--column--reverse
Justify content
Use justify-content utilities on flexbox containers to change
the alignment of flex items on the main axis (the x-axis to start, for
y-axis use flex-direction: column). Choose from "start" (browser default),
"end", "center", "between", or "around".
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d--flex justify--content--start p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex justify--content--end p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex justify--content--center p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex justify--content--between p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex justify--content--around p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
Responsive variations also exist for justify--content.
.justify--content--start.justify--content--end.justify--content--center.justify--content--between.justify--content--around.justify--content--sm--start.justify--content--sm--end.justify--content--sm--center.justify--content--sm--between.justify--content--sm--around.justify--content--md--start.justify--content--md--end.justify--content--md--center.justify--content--md--between.justify--content--md--around.justify--content--lg--start.justify--content--lg--end.justify--content--lg--center.justify--content--lg--between.justify--content--lg--around.justify--content--xl--start.justify--content--xl--end.justify--content--xl--center.justify--content--xl--between.justify--content--xl--around
Align items
Use align-items utilities on flexbox containers to change the
alignment of flex items on the cross axis (the y-axis to start, x-axis if
flex-direction: column). Choose from start,
end, center, baseline, or
stretch (browser default).
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d--flex align--items--start p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex align--items--end p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex align--items--center p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex align--items--baseline p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex align--items--stretch p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 2</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
Responsive variations also exist for align--items.
.align--items--start.align--items--end.align--items--center.align--items--baseline.align--items--stretch.align--items--sm--start.align--items--sm--end.align--items--sm--center.align--items--sm--baseline.align--items--sm--stretch.align--items--md--start.align--items--md--end.align--items--md--center.align--items--md--baseline.align--items--md--stretch.align--items--lg--start.align--items--lg--end.align--items--lg--center.align--items--lg--baseline.align--items--lg--stretch.align--items--xl--start.align--items--xl--end.align--items--xl--center.align--items--xl--baseline.align--items--xl--stretch
Align Self
Use align-self utilities on flexbox items to individually
change their alignment on the cross axis (the y-axis to start, x-axis if
flex-direction: column). Choose from the same options as
align-items: start, end, center,
baseline, or stretch (browser default).
Flex item 1
Aligned flex item
Flex item 3
Flex item 1
Aligned flex item
Flex item 3
Flex item 1
Aligned flex item
Flex item 3
Flex item 1
Aligned flex item
Flex item 3
Flex item 1
Aligned flex item
Flex item 3
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="align--self--start p--2 bg--primary border border--primary--darker text--white">Aligned flex item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex -1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="align--self--end p- p--2 bg--primary border border--primary--darker text--white">Aligned flex item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="align--self--center p--2 bg--primary border border--primary--darker text--white">Aligned flex item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex n p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="align--self--betwee p--2 bg--primary border border--primary--darker text--white">Aligned flex item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 1</div>
<div class="align--self--around p--2 bg--primary border border--primary--darker text--white">Aligned flex item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex item 3</div>
</div>
Responsive variations also exist for align--self.
.align--self--start.align--self--end.align--self--center.align--self--baseline.align--self--stretch.align--self--sm--start.align--self--sm--end.align--self--sm--center.align--self--sm--baseline.align--self--sm--stretch.align--self--md--start.align--self--md--end.align--self--md--center.align--self--md--baseline.align--self--md--stretch.align--self--lg--start.align--self--lg--end.align--self--lg--center.align--self--lg--baseline.align--self--lg--stretch.align--self--xl--start.align--self--xl--end.align--self--xl--center.align--self--xl--baseline.align--self--xl--stretch
Fill
Use the .flex--fill class on a series of sibling elements to
force them into widths equal to their content (or equal widths if their
content does not surpass their border-boxes) while taking up all available
horizontal space.
Flex item with a lot of content
Flex item
Flex item
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="flex--fill p--2 bg--primary border border--primary--darker text--white">Flex item with a lot of content</div>
<div class="flex--fill p--2 bg--primary border border--primary--darker text--white">Flex item</div>
<div class="flex--fill p--2 bg--primary border border--primary--darker text--white">Flex item </div>
</div>
Responsive variations also exist for align--fill.
.flex--fill.flex--sm--fill.flex--md--fill.flex--lg--fill.flex--xl--fill
Grow and Shrink
Use .flex--grow--* utilities to toggle a flex item’s ability to
grow to fill available space. In the example below, the
.flex--grow--1 elements uses all available space it can, while
allowing the remaining two flex items their necessary space.
Flex Item
Flex item
Third Flex Item
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="flex--grow--1 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Third Flex Item</div>
</div>
Use .flex--shrink--* utilities to toggle a flex item’s ability
to shrink if necessary. In the example below, the second flex item with
.flex--shrink--1 is forced to wrap its contents to a new line,
“shrinking” to allow more space for the previous flex item with
.w--100.
Flex Item
Flex item
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="w--100 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="flex--shrink--1 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
Responsive variations also exist for flex--grow and
flex--shrink.
.flex--{grow|shrink}--0.flex--{grow|shrink}--1.flex--sm--{grow|shrink}--0.flex--sm--{grow|shrink}--1.flex--md--{grow|shrink}--0.flex--md--{grow|shrink}--1.flex--lg--{grow|shrink}--0.flex--lg--{grow|shrink}--1.flex--xl--{grow|shrink}--0.flex--xl--{grow|shrink}--1
Auto margins
Flexbox can do some pretty awesome things when you mix flex alignments with
auto margins. Shown below are three examples of controlling flex items via
auto margins: default (no auto margin), pushing two items to the right
(.mr--auto), and pushing two items to the left
(.ml--auto).
Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify--content value. See this StackOverflow answer for more details.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="mr--auto p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
<div class="d--flex p--1 border border--secondary bg--light" style="height: 100px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="ml--auto p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
With align--items
Vertically move one flex item to the top or bottom of a container by mixing
align--items, flex--direction: column, and
margin-top: auto or
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex align--items--start flex--column p--1 border border--secondary bg--light" style="height: 200px">
<div class="mb--auto p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
<div class="d--flex align--items--start flex--column p--1 border border--secondary bg--light" style="height: 200px">
<div class="mr--auto p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="mt--auto p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
Wrap
Change how flex items wrap in a flex container. Choose from no wrapping at
all (the browser default) with .flex--nowrap, wrapping with
.flex--wrap, or reverse wrapping with
.flex--wrap--reverse.
Flex item
Flex item
Flex item
<div class="d--flex flex--nowrap p--1 border border--secondary bg--light" style="height: 200px">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex flex--wrap p--1 border border--secondary bg--light">
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
First flex item
Second flex item
Third flex item
<div class="d--flex flex--wrap--reverse p--1 border border--secondary bg--light">
<div class="order--3 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="order--2 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="order--1 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
Responsive variations also exist for order.
.flex--nowrap.flex--wrap.flex--wrap--reverse.flex--sm--nowrap.flex--sm--wrap.flex--sm--wrap--reverse.flex--md--nowrap.flex--md--wrap.flex--md--wrap--reverse.flex--lg--nowrap.flex--lg--wrap.flex--lg--wrap--reverse.flex--xl--nowrap.flex--xl--wrap.flex--xl--wrap--reverse
Order
Change the visual order of specific flex items with a handful of
order utilities. We only provide options for making an item
first or last, as well as a reset to use the DOM order. As
order takes any integer value (e.g., 5), add
custom CSS for any additional values needed.
First flex item
Second flex item
Third flex item
<div class="d--flex flex--wrap--reverse p--1 border border--secondary bg--light">
<div class="order--3 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="order--2 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
<div class="order--1 p--2 bg--primary border border--primary--darker text--white">Flex Item</div>
</div>
.order--0.order--1.order--2.order--3.order--4.order--5.order--6.order--7.order--8.order--9.order--10.order--11.order--12.order--sm--0.order--sm--1.order--sm--2.order--sm--3.order--sm--4.order--sm--5.order--sm--6.order--sm--7.order--sm--8.order--sm--9.order--sm--10.order--sm--11.order--sm--12.order--md--0.order--md--1.order--md--2.order--md--3.order--md--4.order--md--5.order--md--6.order--md--7.order--md--8.order--md--9.order--md--10.order--md--11.order--md--12.order--lg--0.order--lg--1.order--lg--2.order--lg--3.order--lg--4.order--lg--5.order--lg--6.order--lg--7.order--lg--8.order--lg--9.order--lg--10.order--lg--11.order--lg--12.order--xl--0.order--xl--1.order--xl--2.order--xl--3.order--xl--4.order--xl--5.order--xl--6.order--xl--7.order--xl--8.order--xl--9.order--xl--10.order--xl--11.order--xl--12
Align Content
Use align-content utilities on flexbox containers to align flex
items together on the cross axis. Choose from start (browser
default), end, center, between,
around, or stretch. To demonstrate these
utilities, we’ve enforced flex-wrap: wrap and increased the
number of flex items.
Heads up! This property has no effect on single rows of flex items.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex align--content--start flex--wrap">
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex align--content--end flex--wrap">
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex align--content--center flex--wrap">
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex align--content--between flex--wrap">
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex align--content--around flex--wrap">
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d--flex align--content--stretch flex--wrap">
</div>
Responsive variations also exist for align--content.
.align--content--start.align--content--end.align--content--center.align--content--around.align--content--stretch.align--content--sm--start.align--content--sm--end.align--content--sm--center.align--content--sm--around.align--content--sm--stretch.align--content--md--start.align--content--md--end.align--content--md--center.align--content--md--around.align--content--md--stretch.align--content--lg--start.align--content--lg--end.align--content--lg--center.align--content--lg--around.align--content--lg--stretch.align--content--xl--start.align--content--xl--end.align--content--xl--center.align--content--xl--around.align--content--xl--stretch
Float
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
Overview
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
Classes
Toggle a float with a class:
Float left on all viewport sizes
Float right on all viewport sizes
Don't float on all viewport sizes
<div class="float--left">Float left on all viewport sizes</div>
<div class="float--right">Float right on all viewport sizes</div>
<div class="float--none">Don't float on all viewport sizes</div>
Mixins
Or by Sass mixin:
.element {
@include float--left;
}
.another-element {
@include float--right;
}
.one-more {
@include float--none;
}
Responsive
Responsive variations also exist for each float value.
Float left on viewports sized SM (small) or wider
Float left on viewports sized MD (medium) or wider
Float left on viewports sized LG (large) or wider
Float left on viewports sized XL (extra-large) or wider
<div class="float--sm--left">Float left on viewports sized SM (small) or wider</div>
<div class="float--sm--left">Float left on viewports sized MD (medium) or wider</div>
<div class="float--sm--left">Float left on viewports sized LG (large) or wider</div>
<div class="float--sm--left">Float left on viewports sized XL (extra-large) or wider</div>
Here are all the support classes;
.float--left.float--right.float--none.float--sm--left.float--sm--right.float--sm--none.float--md--left.float--md--right.float--md--none.float--lg--left.float--lg--right.float--lg--none.float--xl--left.float--xl--right.float--xl--none
Interactions
Utility classes that change how users interact with the contents of a website.
Text selection
Change how the content is selected when the user interacts with it.
This paragraph will be entirely selected when clicked by the
user.
This paragraph has the default select behavior.
This paragraph will not be selectable when clicked by the user.
<p class="user--select--all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user--select--auto">This paragraph has the default select behavior.</p>
<p class="user--select--none">This paragraph will not be selectable when clicked by the user.</p>
Overflow
Use these shorthand utilities for quickly configuring how content overflows an element.
Barebones overflow functionality is provided for two values by
default, and they are not responsive.
This is an example of using
.overflow--auto on an element
with set width and height dimensions. By design, this content will
vertically scroll.
This is an example of using
.overflow--hidden on an element
with set width and height dimensions.
<div class="overflow--auto">...</div>
<div class="overflow--hidden">...</div>
Position
Use these shorthand utilities for quickly configuring the position of an element.
Common values
Quick positioning classes are available, though they are not responsive.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Fixed Top
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
<div class="fixed--top">...</div>
Fixed Bottom
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
<div class="fixed--bottom">...</div>
Sticky Top
Position an element at the top of the viewport, from edge to edge, but only
after you scroll past it. The .sticky-top utility uses CSS’s
position: sticky, which isn’t fully supported in all browsers.
IE11 and IE10 will render position: sticky as
position: relative. As such, we wrap the styles in a @supports
query, limiting the stickiness to only browsers that can render it properly.
<div class="sticky--top">...</div>
Screen Readers
Use screen reader utilities to hide elements on all devices except screen readers.
Hide an element to all devices except screen readers with
.sr--only. Combine .sr--only with
.sr--only--focusable to show the element again when it’s
focused (e.g. by a keyboard-only user). Can also be used as mixins.
<a class="sr--only sr--only--focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip--navigation {
@include sr-only;
@include sr-only-focusable;
}
Shadows
Add or remove shadows to elements with box-shadow utilities.
Examples
No shadow
shadow
Small Shadow Primary
Shadow Primary
Small shadow Secondary
Shadow Secondary
<div class="shadow--none">No Shadow</div>
<div class="has--shadow">Shadow</div>
<div class="has--sm-solid--shadow--primary">Small Shadow Primary</div>
<div class="has--solid--shadow--primary">Shadow Primary</div>
<div class="has--sm-solid--shadow--secondary">Small Shadow Secondary</div>
<div class="has--sm-solid--shadow--secondary">Shadow Secondary</div>
Sizing
Easily make an element as wide or as tall with our width and height utilities.
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="w--25">Width 25%</div>
<div class="w--50">Width 50%</div>
<div class="w--75">Width 75%</div>
<div class="w--100">Width 100%</div>
<div class="w--auto">Width auto</div>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div class="h--25">Height 25%</div>
<div class="h--50">Height 50%</div>
<div class="h--75">Height 75%</div>
<div class="h--100">Height 100%</div>
<div class="h--auto">Height auto</div>
You can also use max-width: 100%; and
max-height: 100%; utilities as needed.
Max-Width 100%
<div class="mw--100">Max-Width 100%</div>
Max-Height 100%
< div style="height: 300px; background-color: rgba(255,0,0,0.1);">
<div class="mh--100" style="300px; height: 600px; background-color: rgba(0,0,255,.1)">Max-Height 100%</div>
</div>
Relative to the viewport
You can also use utilities to set the width and height relative to the viewport.
<div class="min--vw--100">Min VW 100%</div>
<div class="min--vh--100">Min VH 100%</div>
<div class="vw--100">VW 100%</div>
<div class="vh--100">VH 100%</div>
Spacing
FDS includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
How it works
Assign responsive-friendly margin or
padding values to an element or a subset of its sides with
shorthand classes. Includes support for individual properties, all
properties, and vertical and horizontal properties. Classes are built from a
default Sass map ranging from .25rem to 8rem.
Notation
Spacing utilities that apply to all breakpoints, from xs to
xl, have no breakpoint abbreviation in them. This is because
those classes are applied from min-width: 0 and up, and thus
are not bound by a media query. The remaining breakpoints, however, do
include a breakpoint abbreviation.
The classes are named using the format
{property}{sides}-{size} for xs and
{property}{sides}-{breakpoint}-{size} for sm,
md, lg, and xl.
Where property is one of:
m- for classes that setmarginp- for classes that setpadding
Where sides is one of:
-
t- for classes that setmargin-toporpadding-top -
b- for classes that setmargin-bottomorpadding-bottom -
l- for classes that setmargin-leftorpadding-left -
r- for classes that setmargin-rightorpadding-right -
x- for classes that set both*-leftand*-right -
y- for classes that set both*-topand*-bottom -
blank - for classes that set a
marginorpaddingon all 4 sides of the element
Where size is one of:
-
0- for classes that eliminate themarginorpaddingby setting it to0 -
1- (by default) for classes that set themarginorpaddingtospacer * .25 -
2- (by default) for classes that set themarginorpaddingtospacer * .5 -
3- (by default) for classes that set themarginorpaddingtospacer -
4- (by default) for classes that set themarginorpaddingtospacer * 1.5 -
5- (by default) for classes that set themarginorpaddingtospacer * 2 -
6- (by default) for classes that set themarginorpaddingtospacer * 4 -
7- (by default) for classes that set themarginorpaddingtospacer * 8 -
auto- for classes that set themarginto auto
Examples
Here are some representative examples of these classes:
.mt--0 {
margin-top: 0 !important;
}
.ml--1 {
margin-left: ($spacer * .25) !important;
}
.px--2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p--3 {
padding: $spacer !important;
}
Horizontal centering
Additionally, FDS also includes an .mx--auto class for
horizontally centering fixed-width block level content—that is, content that
has display: block and a width set—by setting the
horizontal margins to auto.
Centered element
<div class="mx--auto" style="width: 200px;">Centered element</div>
Negative margin
In CSS, margin properties can utilize negative values (padding
cannot). As of 4.2, we’ve added negative margin utilities for every non-zero
integer size listed above (e.g., 1, 2,
3, 4, 5, 6,
7, 8). These utilities are ideal for customizing
grid column gutters across breakpoints.
The syntax is nearly the same as the default, positive margin utilities, but
with the addition of n before the requested size. Here’s an example class
that’s the opposite of .mt--1:
.mt--n1 {
margin-top: -0.25rem !important;
}
Here’s an example of customizing the FDS grid at the medium
(md) breakpoint and above. We’ve increased the
.col padding with .px--md--5 and then counteracted
that with .mx--md--n5 on the parent .row.
Custom column padding
Custom column padding
<div class="row mx--md--n5">
<div class="col px--md--5"><div class="p--3 border border--light bg--light">Custom column padding</div></div>
<div class="col px--md--5"><div class="p--3 border border--light bg--light">Custom column padding</div></div>
</div>
Text
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Text alignment
Easily realign text to components with text alignment classes.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
<p class="text--justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum.</p>
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.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
<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>
<p class="text--sm--left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text--md--left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text--lg--left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text--xl--left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Text wrapping and overflow
Wrap text with a .text--wrap class.
This text should wrap.
<div class="text--wrap">This text should wrap.</div>
Prevent text from wrapping with a .text--nowrap class.
This text should overflow the parent.
<div class="text--nowrap">This text should overflow the parent.</div>
For longer content, you can add a .text--truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.
Praeterea iter est quasdam res quas ex communi.
<div class="row">
<div class="col--2 text--truncate">Praeterea iter est quasdam res quas ex communi.</div>
</div>
<span class="d--inline--block text--truncate" style="max-width: 150px;">Praeterea iter est quasdam res quas ex communi.</span>
Word break
Prevent long strings of text from breaking your components’ layout by using
.text--break to set word-wrap: break-word and
word-break: break-word. We use word-wrap instead
of the more common overflow-wrap for wider browser support, and
add the deprecated word-break: break-word to avoid issues with
flex containers.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text--break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</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>
Note how .text--capitalize only changes the first letter of
each word, leaving the case of any other letters unaffected.
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 text.</p>
Monospace
Change a selection to our monospace font stack with
.text--monospace.
This is in monospace
<p class="text--monospace">This is in monospace</p>
Reset Color
Reset a text or link’s color with .text--reset, so that it
inherits the color from its parent.
Muted text with a reset link.
<p class="text--muted">Muted text with a <a href="#" class="text--reset">reset link</a>.</p>
Text decoration
Remove a text decoration with a .text--decoration--none class.
Non-underlined link
<a href="#" class="text--decoration--none">Non-underlined link</a>
Vertical Alignment
Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
Choose from .align--baseline, .align--top, .align--middle, .align--bottom, .align--text-bottom, and .align--text-top as needed.
With inline elements:
baseline
top
middle
bottom
text-top
text-bottom
<span class"align--baseline">baseline</span>
<span class"align--top">top</span>
<span class"align--middle">middle</span>
<span class"align--bottom">bottom</span>
<span class"align--text-top">text-top</span>
<span class"align--text-bottom">text-bottom</span>
With table cells:
| baseline | top | middle | bottom | text-top | text-bottom |
<table style="height: 100px;">
<tbody>
<tr>
<td class="align--baseline">baseline</td>
<td class="align--top">top</td>
<td class="align--middle">middle</td>
<td class="align--bottom">bottom</td>
<td class="align--text-top">text-top</td>
<td class="align--text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
Visibility
Control the visibility, without modifying the display, of elements with visibility utilities.
Set the visibility of elements with our visibility utilities.
These utility classes do not modify the display value at all and do not
affect layout – .invisible elements still take up space in the
page. Content will be hidden both visually and for assistive
technology/screen reader users.
Apply .visible or .invisible as needed.
<div class="visible">...</div>
<div class="invisible">...</div>
// Class
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
// Usage as a mixin
// Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
.element {
@include invisible(visible);
}
.element {
@include invisible(hidden);
}
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.
-
Center 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
FDS 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).
How to import button styles:
In order to use buttons in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/buttons'
How to customize button styles:
In order to customize buttons in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/buttons
<!--/ 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--primary--outline* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn--primary--outline">Primary</button>
<button type="button" class="btn btn--secondary--outline">Secondary</button>
<button type="button" class="btn btn--success--outline">Success</button>
<button type="button" class="btn btn--danger--outline">Danger</button>
<button type="button" class="btn btn--warning--outline">Warning</button>
<button type="button" class="btn btn--info--outline">Info</button>
<button type="button" class="btn btn--light--outline">Light</button>
<button type="button" class="btn btn--dark--outline">Dark</button>
Rounded
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--primary btnRounded* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn--primary btnRounded">Primary</button>
<button type="button" class="btn btn--secondary btnRounded">Secondary</button>
<button type="button" class="btn btn--success btnRounded">Success</button>
<button type="button" class="btn btn--danger btnRounded">Danger</button>
<button type="button" class="btn btn--warning btnRounded">Warning</button>
<button type="button" class="btn btn--info btnRounded">Info</button>
<button type="button" class="btn btn--light btnRounded">Light</button>
<button type="button" class="btn btn--dark btnRounded">Dark</button>
<button type="button" class="btn btn--dark btnRounded disabled">Dark</button>
Rounded Outline
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--primary--outline btnRounded* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn--primary--outline btnRounded">Primary</button>
<button type="button" class="btn btn--secondary--outline btnRounded">Secondary</button>
<button type="button" class="btn btn--success--outline btnRounded">Success</button>
<button type="button" class="btn btn--danger--outline btnRounded">Danger</button>
<button type="button" class="btn btn--warning--outline btnRounded">Warning</button>
<button type="button" class="btn btn--info--outline btnRounded">Info</button>
<button type="button" class="btn btn--light--outline btnRounded">Light</button>
<button type="button" class="btn btn--dark--outline btnRounded">Dark</button>
<button type="button" class="btn btn--dark--outline btnRounded disabled">Disabled</button>
Curved
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--primary curved* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn--primary curved">Primary</button>
<button type="button" class="btn btn--secondary curved">Secondary</button>
<button type="button" class="btn btn--success curved">Success</button>
<button type="button" class="btn btn--danger curved">Danger</button>
<button type="button" class="btn btn--warning curved">Warning</button>
<button type="button" class="btn btn--info curved">Info</button>
<button type="button" class="btn btn--light curved">Light</button>
<button type="button" class="btn btn--dark curved">Dark</button>
<button type="button" class="btn btn--dark curved disabled">Disabled</button>
Curved Outline
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--primary--outline curved* ">Primary</button>
( * name according to Theme Standard Colors )
<button type="button" class="btn btn--primary--outline curved">Primary</button>
<button type="button" class="btn btn--secondary--outline curved">Secondary</button>
<button type="button" class="btn btn--success--outline curved">Success</button>
<button type="button" class="btn btn--danger--outline curved">Danger</button>
<button type="button" class="btn btn--warning--outline curved">Warning</button>
<button type="button" class="btn btn--info--outline curved">Info</button>
<button type="button" class="btn btn--light--outline curved">Light</button>
<button type="button" class="btn btn--dark--outline curved">Dark</button>
<button type="button" class="btn btn--dark--outline curved disabled">Disabled</button>
Disabled Button
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--dark disabled* ">Disabled</button>
( * name according to Theme Standard Colors )
to add Accessibility please use aria-disabled="true".
For more details, visit the
Link
<button type="button" class="btn btn--dark disabled">Disabled</button>
<button type="button" class="btn btn--dark" aria-disabled="true">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--secondary btnRounded"> <span class="sr--only">Button</span> <i class="icon-info"></i> </button>
<button type="button" class="btn btn--icon btn--dark--outline"> <span class="sr--only">Button</span> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn--icon btn--success--outline btnRounded"> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn--icon btn--dark curved"> <span class="sr--only">Button</span> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn--icon btn--dark--outline curved"> <span class="sr--only">Button</span> <i class="icon-delete"></i> </button>
<button type="button" class="btn btn--icon btn--info--outline 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--1 expand--sm--only btn btn--primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb--1 expand--md--only btn btn--primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb--1 expand--lg--only btn btn--primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb--1 expand--xl--only btn btn--primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb--1 expand--md--up btn btn--primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb--1 expand--lg--up btn btn--primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb--1 expand--md--down btn btn--primary" type="button">Expand in Mobile Only</button>
<button class="btn--sm mb--1 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
FDS Design System includes several predefined social button styles. As
the social 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).
Filled
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--social btn--googleRed*" > <i class="icon-google"></i> <span >Primary</span> </button>
(* name according to Theme Standard Colors)
<button class="btn btn--social btn--googleRed" type="button"> <i class="icon-google"></i> <span>Google</span> </button> <button class="btn btn--social btn--googleBlue" type="button"> <i class="icon-google"></i> <span>Google Blue</span> </button> <button class="btn btn--social btn--facebook" type="button"> <i class="icon-facebook"></i> <span>Facebook</span> </button> <button class="btn btn--social btn--twitter" type="button"> <i class="icon-twitter"></i> <span>Twitter</span> </button> <button class="btn btn--social btn--linkedin" type="button"> <i class="icon-linkedin"></i> <span>Linked</span> </button> <button class="btn btn--social btn--instagram" type="button"> <i class="icon-instagram"></i> <span>Instagram</span> </button>
Outline
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--social btn--outline-googleRed*" > <i class="icon-google"></i> <span >Primary</span> </button>
(* name according to Theme Standard Colors)
<button class="btn btn--social btn--outline-googleRed" type="button"> <i class="icon-google"></i> <span>Google</span> </button> <button class="btn btn--social btn--outline-googleBlue" type="button"> <i class="icon-google"></i> <span>Google Blue</span> </button> <button class="btn btn--social btn--outline-facebook" type="button"> <i class="icon-facebook"></i> <span>Facebook</span> </button> <button class="btn btn--social btn--outline-twitter" type="button"> <i class="icon-twitter"></i> <span>Twitter</span> </button> <button class="btn btn--social btn--outline-linkedin" type="button"> <i class="icon-linkedin"></i> <span>Linked</span> </button> <button class="btn btn--social btn--outline-instagram" type="button"> <i class="icon-instagram"></i> <span>Instagram</span> </button>
Icon Filled
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--social btn--googleRed*" > <i class="icon-google"></i> </button>
(* name according to Theme Standard Colors)
<button class="btn btn--social btn--googleRed" type="button"> <i class="icon-google"></i> </button> <button class="btn btn--social btn--googleBlue" type="button"> <i class="icon-google"></i> </button> <button class="btn btn--social btn--outline-facebook" type="button"> <i class="icon-facebook"></i> </button> <button class="btn btn--social btn--twitter" type="button"> <i class="icon-twitter"></i> </button> <button class="btn btn--social btn--linkedin" type="button"> <i class="icon-linkedin"></i> </button> <button class="btn btn--social btn--instagram" type="button"> <i class="icon-instagram"></i> </button>
Icon Outline Rounded
Add following classes in either <Button> or <a> :
<button type="button" class="btn btn--social btn--roundedOutline-googleRed*" > <i class="icon-google"></i> </button>
(* name according to Theme Standard Colors)
<button class="btn btn--social btn--roundedOutline-googleRed" type="button"> <i class="icon-google"></i> </button> <button class="btn btn--social btn--roundedOutline-googleBlue" type="button"> <i class="icon-google"></i> </button> <button class="btn btn--social btn--roundedOutline-facebook" type="button"> <i class="icon-facebook"></i> </button> <button class="btn btn--social btn--roundedOutline-twitter" type="button"> <i class="icon-twitter"></i> </button> <button class="btn btn--social btn--roundedOutline-linkedin" type="button"> <i class="icon-linkedin"></i> </button> <button class="btn btn--social btn--roundedOutline-instagram" type="button"> <i class="icon-instagram"></i> </button>
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.
How to import form styles:
In order to use forms in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/forms'
How to customize form styles:
In order to customize forms in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/forms
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
Disabled and Readonly Input
Use additional classes on Input holder
( disabled, readonly ) and add
readonly or aria-disabled="true" on input
<div class="formGroup col-3"> <label for="emailReadonly" class="sr--only">Email Readonly</label> <div class="formControlWrap d--flex flex--wrap align--items--center"> <div class="formControlHolder d--flex align--items--center readonly"> <input type="email" class="formControl" placeholder="Readonly Input" id="emailReadonly" readonly="readonly" /> </div> </div> </div> <div class="formGroup col-3"> <label for="emailDisabled" class="sr--only">Email Disabled</label> <div class="formControlWrap d--flex flex--wrap align--items--center"> <div class="formControlHolder d--flex align--items--center disabled"> <input type="email" class="formControl" placeholder="Disabled Input" id="emailDisabled" aria-disabled="true" readonly="readonly" /> </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"> <span class="icon-cross p--2"></span> <input type="text" class="formControl" id="FirstName" name="FirstName" required /> <button type="button" class="p--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 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--2 icon-search searchInputBtn" aria-label="Label" ></button> <input type="search" class="formControl" id="FirstName2" name="FirstName" placeholder="Text" required /> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 show icon-check successOption"></span> <span class="hide pt-mi-1ext-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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 show icon-info errorOption"></span> <span class="pl--2 hide icon-check successOption"></span> <span class="pt-mi-1ext-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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 show icon-check successOption"></span> <span class="pt-mi-1ext-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--2" id="FirstNam444" name="FirstName" placeholder="Text" required /> <button type="button" class="p--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 show icon-check successOption"></span> <span class="pt-mi-1ext-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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 hide icon-info errorOption"></span> <span class="pl--2 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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 show icon-info errorOption"></span> <span class="pl--2 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--2 icon-search searchInputBtn" aria-label="Label" ></button> </div> <span class="pl--2 show icon-info errorOption"></span> <span class="pl--2 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>
File Upload Input
<div class="fds-fileUploade-holder position-relative"> <label for="uploaderd" class="fds-fileUploade-label mb--0 w--100 d--flex flex--column justify--content--center align--items--center font--weight--normal"> <figure> <span class="fds-uploadIcon icon-download"></span> </figure> <p class="mb--0"> Drag and Drop your or <span class="text__primary font--weight--bold px--2">Browse</span> your files </p> </label> <input class="position-absolute invisible top-0" id="uploaderd" type="file" multiple/> </div>
Range Slider
$0
$2,000,000
<div class="mb--5"> <div class="d--flex justify--content--between pb--2"> <span>$0</span> <span>$2,000,000</span> </div> <div class="slider-wrapper"> <div class="slider-track-wrapper"> <div class="slider-track-background"></div> <div class="slider-track-fill" style="transform: translateX(0px) scale3d(0.52, 1, 1);"></div> </div> <div class="slider-ticks-container"> <div class="slider-ticks" style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%);"></div> </div> <div class="slider-thumb-container" style="transform: translateX(-48%);"> <div class="slider-focus-ring"></div> <div class="slider-thumb" role="slider" tabindex="0"></div> <div class="slider-thumb-label"> <span class="slider-thumb-label-text">52</span> </div> </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--2 pl--3 pb--1 pr--1" 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--2 pl--3 pb--1 pr--1" 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--2 pl--3 pb--1 pr--1" 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--2 pl--3 pb--1 pr--5" 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--2 pl--3 pb--1 pr--5" 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--2 pl--3 pb--1 pr--5" placeholder="Text" ="textarea" id="textarea1" > </textarea> </div> <span class="icon-info errorOption"></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--2 pl--3 pb--1 pr--1" placeholder="Text" ="textarea" ></textarea> </div> <span class="pl--2 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--2 pl--3 pb--1 pr--1" placeholder="Text" ="textarea" ></textarea> </div> <span class="pl--2 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--2 pl--3 pb--1 pr--1" placeholder="Text" ="textarea" ></textarea> </div> <span class="pl--2 icon-info errorOption"></span> <span class="text--danger">Error Message</span> </div> </div>
SELECT
In FDS 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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--2 icon-info errorOption"></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--1"> <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--1 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--1"> <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--1"> <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--1"> <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--1"> <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--1 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--1"> <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--1"> <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--1"> <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--5">
<div class="row mb--3">
<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--3">
<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--3">
<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--3">
<!--simple select-->
<div class="formGroup col--12 mr--5">
<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 errorOption"></span>
</div>
</div>
<!--/Simple Select-->
</div>
<div class="row mb--4 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>
<fieldset class="col--3">
<strong class="mb--3 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>
</fieldset>
</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.
How to import tooltip styles:
In order to use tooltips in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/tooltip'
How to customize tooltip styles:
In order to customize tooltips in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/tooltip
Note: These imports also adds popover styles so we do not need to import them for popovers separately.
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--2 tooltip-holder sample icon-info"> <span class="dark curved py--2 px--3 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--2 tooltip-holder sample icon-info"> <span class="light curved py--2 px--3 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:
Top Start
This is a tooltip
Top End
This is a tooltip
Top
This is a tooltip
Left Start
This is a tooltip
Left
This is a tooltip
Left End
This is a tooltip
Right Start
This is a tooltip
Right
This is a tooltip
Right End
This is a tooltip
Bottom Start
This is a tooltip
Bottom
This is a tooltip
Bottom End
This is a tooltip
<span style="background-color: var(--primary); font-weight: bold; display:inline-block; vertical-align: top;" class="p--3 tooltip-holder"> Top Start <span class="dark py--2 px--3 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--3 tooltip-holder"> Top End <span class="dark py--2 px--3 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--3 tooltip-holder"> Top <span class="dark py--2 px--3 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--3 tooltip-holder"> Left Start <span class="dark py--2 px--3 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--3 tooltip-holder"> Left <span class="dark py--2 px--3 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--3 tooltip-holder"> Left End <span class="dark py--2 px--3 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--3 tooltip-holder"> Right Start <span class="dark py--2 px--3 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--3 tooltip-holder"> Right <span class="dark py--2 px--3 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--3 tooltip-holder"> Right End <span class="dark py--2 px--3 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--3 tooltip-holder"> Bottom Start <span class="dark py--2 px--3 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--3 tooltip-holder"> Bottom <span class="dark py--2 px--3 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--3 tooltip-holder"> Bottom End <span class="dark py--2 px--3 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--2 px--3" 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.
info-icon
info-icon
This is a title
A cupcake is a small cake designed to serve one person, which
may be baked in a small thin paper or aluminum cup.
close button
This is a title A cupcake is a
small cake designed to serve one person, which may be baked in
a small thin paper or aluminum cup.
close button
A cupcake is a small cake designed to serve one person, which
may be baked in a small thin paper or aluminum
cup. Learn More
close button
This is a title A cupcake is a
small cake designed to serve one person, which may be baked in
a small thin paper or aluminum cup.
close button
This is a title A cupcake is a
small cake designed to serve one person, which may be baked in
a small thin paper or aluminum cup.
close button
<div class="d--flex align--items--start dark p--3" data-arrow="false" data-position="top" data-type="popover" tabindex="1" > <span tabindex="1" class="icon icon-error mr--2"> <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--3"> <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--3" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr--3" ><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--3"> <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--3" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr--3" ><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--3"> <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--3 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--3" ><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--3"> <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--3" 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--3" ><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--3"> <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--3" 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--3" ><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--3"> <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--3" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <span tabindex="1" class="icon icon-error mr--3" ><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--3"> <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--3" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <div class="popupWrap"> <span tabindex="1" class="mb--3" ><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--3" ><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--3" 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--3"> <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--3" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <div class="popupWrap"> <span tabindex="1" class="mb--3" ><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--3"> <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--3" data-arrow="true" data-position="top" data-type="popover" tabindex="1" style="opacity: 1; visibility: visible;" > <div class="popupWrap"> <ul class="mb--3 popupActionList list--unstyled"> <li tabindex="1" class="mb--3"> <a class="d--flex" href="#" ><span class="mr--3 icon icon-note-add"></span>Add a Note</a > </li> <li tabindex="1" class="mb--3"> <a class="d--flex" href="#" ><span class="mr--3 icon icon-bookmarks"></span >Bookmark this</a > </li> <li tabindex="1" class="mb--3"> <a class="d--flex" href="#" ><span class="mr--3 icon icon-heart"></span>Like it</a > </li> <li tabindex="1" class="mb--3"> <a class="d--flex" href="#" ><span class="mr--3 icon icon-mail"></span>Email it</a > </li> </ul> <footer tabindex="1"> <a href="#" class="btn--close d--flex" ><span class="mr--3 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.
How to import modal styles:
In order to use modals in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/modal'
How to customize modal styles:
In order to customize modals in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/modal
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="modalHeader">
<button tabindex="1" type="button" class="icnClose icon-close" onclick="hideModal();"></button>
</div>
<div class="modalBody"></div>
<div class="modalFooter"></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.
Media
Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
About
Rules are directly applied to
<iframe>, <embed>, <video>, and
<p> elements; optionally use an explicit descendant
class .embed--responsive--item when you want to match the styling for
other attributes.
Pro-Tip! You don’t need to include frameborder="0" in
your <iframe>s as we override that for you.
Wrap any embed like an <iframe> in a parent element
with .embed--responsive and an aspect ratio. The .embed--responsive--item
isn’t strictly required, but we encourage it.
How to import media styles:
In order to use medias in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/media'
How to customize media styles:
In order to customize medias in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/media
Example 21 : 9
Example 16 : 9
Example 4 : 3
Example 3 : 2
Example 1 : 1
Example 21 : 9
Example 16 : 9
Example 4 : 3
Example 3 : 2
Example 1 : 1
<div class="embed--responsive embed--responsive--21by9"> <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe> </div> <div class="embed--responsive embed--responsive--16by9"> <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe> </div> <div class="embed--responsive embed--responsive--4by3"> <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe> </div> <div class="embed--responsive embed--responsive--3by2"> <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe> </div> <div class="embed--responsive embed--responsive--1by1"> <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe> </div> <div class="embed--responsive embed--responsive--21by9"> <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure> </div> <div class="embed--responsive embed--responsive--16by9"> <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure> </div> <div class="embed--responsive embed--responsive--4by3"> <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure> </div> <div class="embed--responsive embed--responsive--3by2"> <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure> </div> <div class="embed--responsive embed--responsive--1by1"> <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure> </div>
Cards
FDS cards provide a flexible and extensible content container with multiple variants and options.
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. cards can replace old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
By default there is no card shadow, if shadow is required on card, use
this class has--shadow, has--solid--shadow on image parent.
How to import card styles:
In order to use cards in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/card'
How to customize card styles:
In order to customize cards in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/card
Default
Box Shadow
Solid Shadow
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor, sed do eiusmod tempor.
“Lorem ipsum dolor sit amet, consectetur adipiscing elit”
Lorem ipsum dolor sit amet adipiscing!
Lorem ipsum dolor sit amet adipiscing!
<!--Simple Card--> <div class="fds-card"> <figure class="m--0"> <img src"../../images/img-01.png" alt="image description"> </figure> </div> <!--Shadow Card--> <div class="fds-card"> <figure class="m--0 has--shadow"> <img src"../../images/img-01.png" alt="image description"> </figure> </div> <!--Solid Shadow Card--> <div class="fds-card"> <figure class="mb--5 mr--5 has--solid--shadow"> <img src"../../images/img-01.png" alt="image description"> </figure> </div> <div class="col--4 d--flex mb--5"> <div class="fds-card d--flex align--items--center flex--column has--shadow p--5 text--center"> <div class="fds-card-head text--center"> <span class="icon-DesignThinking mb--5"></span> <h3 class="mb--5">Lorem Ipsum</h3> </div> <div class="fds-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> </div> <div class="fds-card-footer"> <button class="btn btn--primary--outline">Lorem Ipsum</button> </div> </div> </div> <div class="col--4 d--flex mb--5"> <div class="fds-card d--flex align--items--center flex--column has--shadow p--5 text--center"> <div class="fds-card-head text--center"> <span class="icon-DesignThinking mb--5"></span> <h3 class="mb--5">Lorem Ipsum</h3> </div> <div class="fds-card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor.</p> </div> <div class="fds-card-footer "> <button class="btn btn--primary--outline">Lorem Ipsum</button> </div> </div> </div> <div class="col--4"> <div class="fds-card d--flex align--items--center flex--column has--shadow p--5"> <div class="fds-card-head mb--5 text--center"> <h2 class="m--0">Lorem Ipsum</h2> <span class="divider"></span> <h3 class="m--0">Lorem Ipsum </h3> </div> <div class="fds-card-body text--left"> <p class="m--0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor, sed do eiusmod tempor.</p> </div> </div> </div> <div class="col--4 d--flex"> <div class="fds-card d--flex align--items--center flex--column border text--center p--5"> <figure> <img src="../../images/img-01.png" alt="image description"> </figure> <div class="fds-card-body"> <p>Lorem ipsum dolor sit amet adipiscing!</p> </div> <div class="fds-card-footer "> <h3 class="m--0">Lorem ipsum dolor</h3> </div> </div> </div> <div class="col--4 d--flex"> <div class="fds-card d--flex align--items--center flex--column border border-primary has--solid--shadow--primary p--5"> <figure class="m--0 d--flex justify--content--center"> <img src="../../images/img-01.png" alt="image description"> </figure> <div class="fds-card-body mb--5 text--center"> <p class="m--0">Lorem ipsum dolor sit amet adipiscing!</p> </div> <div class="fds-card-footer"> <a class="btn btn--primary--outline" href="javascript:void(0);">Lorem ipsum</a> </div> </div> </div> <div class="col--4 d--flex"> <div class="fds-card d--flex align--items--center flex--column border border-secondary has--solid--shadow--secondary p--5"> <figure class="m--0 d--flex justify--content--center"> <img src="../../images/img-01.png" alt="image description"> </figure> <div class="fds-card-body mb--5 text--center"> <p class="m--0">Lorem ipsum dolor sit amet adipiscing!</p> </div> <div class="fds-card-footer"> <a class="btn btn--secondary--outline" href="javascript:void(0);">Lorem ipsum</a> </div> </div> </div>
Progress
Documentation and examples for using FDS custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Progress components are built with two HTML elements, some CSS to set the
width, and a few attributes. We don’t use
the HTML5 <progress> element, ensuring you can stack
progress bars, animate them, and place text labels over them.
-
We use the
.progressas a wrapper to indicate the max value of the progress bar. -
We use the inner
.progress-barto indicate the progress so far. -
The
.progress-barrequires an inline style, utility class, or custom CSS to set their width. -
The
.progress-baralso requires someroleandariaattributes to make it accessible.
Put that all together, and you have the following examples
How to import progressbar styles:
In order to use progressbars in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/progressbar'
How to customize progressbar styles:
In order to customize progressbars in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/progressbar
<div class="progress-bar progress-primary" style="width: 50%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <span class="pt--2">(2 of 6)</span> </div>
<div id="fds--slider--stepper" class="fds-advanced-stepper fds--slider--stepper" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="fds--stepper--head position--relative d--flex align--items--center justify--content--between text--center"> <div classs="fds--stepper--content"> <span class="fds-box-counter position--relative d--inline-block bg--white mb--2"> <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">1</span> </span> <span class="fds--stepper--title d--block">Prequalification</span> </div> <div classs="fds--stepper--content"> <span class="fds-box-counter position--relative d--inline-block bg--white mb--2"> <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">2</span> </span> <span class="fds--stepper--title d--block">Product Recommendation</span> </div> <div classs="fds--stepper--content"> <span class="fds-box-counter position--relative d--inline-block bg--white mb--2"> <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">3</span> </span> <span class="fds--stepper--title d--block">Prescreening</span> </div> <div classs="fds--stepper--content"> <span class="fds-box-counter position--relative d--inline-block bg--white mb--2"> <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">4</span> </span> <span class="fds--stepper--title d--block">Client Info</span> </div> <div classs="fds--stepper--content"> <span class="fds-box-counter position--relative d--inline-block bg--white mb--2"> <span class="fds--stepper--counter btn btn--icon btn--dark--outline rounded--circle mx--5">5</span> </span> <span class="fds--stepper--title d--block">Decision</span> </div> </div> </div>
Notification List
Documentation and example for using FDS custom notification list.
How to import notification-list styles:
In order to use notification-lists in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/notification-list'
How to customize notification-list styles:
In order to customize notification-lists in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/notification-list
-
10:32 PM, 09/13/2020
-
12:00 PM, 09/12/2020
Lorem ipsum dolor sit amet.
-
10:32 PM, 09/13/2020
Lorem ipsum dolor sit amet.
-
12:00 PM, 09/12/2020
Lorem ipsum dolor sit amet.
-
10:32 PM, 09/13/2020
Sit amet adipisicing elit.
-
12:00 PM, 09/12/2020
Lorem ipsum dolor sit amet.
-
10:32 PM, 09/13/2020
Sit amet adipisicing elit.
-
12:00 PM, 09/12/2020
Lorem ipsum dolor sit amet.
-
10:32 PM, 09/13/2020
Lorem amet consectetur.
-
12:00 PM, 09/12/2020
Ipsum dolor consectetur.
-
10:32 PM, 09/13/2020
Lorem amet consectetur.
-
12:00 PM, 09/12/2020
Ipsum dolor consectetur.
<div class="notification-list has--shadow white-bg"> <ul class="mb--0 p--4"> <li class="d--flex align--items--center mb--3"> <span class="icon-bell pr--3"></span> <div class="text"> <span class="pb-1">10:32 PM, 09/13/2020</span> <p class="mb--0">Lorem ipsum dolor sit amet.</p> </div> </li> <li class="d--flex align--items--center mb--3"> <span class="icon-bell pr--3"></span> <div class="text"> <span class="pb-1">12:00 PM, 09/12/2020</span> <p class="mb--0">Lorem ipsum dolor sit amet.</p> </div> </li> <li class="d--flex align--items--center mb--3"> <span class="icon-bell pr--3"></span> <div class="text"> <span class="pb-1">10:32 PM, 09/13/2020</span> <p class="mb--0">Lorem ipsum dolor sit amet.</p> </div> </li> <li class="d--flex align--items--center"> <span class="icon-bell pr--3"></span> <div class="text"> <span class="pb-1">12:00 PM, 09/12/2020</span> <p class="mb--0">Lorem ipsum dolor sit amet.</p> </div> </li> </ul> </div>
Collapse
The collapse is used to show and hide content. Buttons or anchors are used to toggle specific elements.
How to import accordion/collapse styles:
In order to use accordions in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/accordion'
How to customize accordion/collapse styles:
In order to customize accordions in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/accordion
I'm the first content!
I'm the second content!
I'm the third content!
I'm the fourth content!
I'm the fifth content!
<button class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1" data-toggle="fds-collapse" data-target=".fds-collapse.first" data-text="Collapse"> <span>First Button</span> <i class="icon-arrow-down-fill"></i> </button> <div class="fds-collapse first"> <div class="fds-collapse-content"> <p class="mb--0">I'm the first content!</p> </div> </div> <button class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1" data-toggle="fds-collapse" data-target=".fds-collapse.second" data-text="Collapse"> <span>Second Button</span> <i class="icon-arrow-down-fill"></i> </button> <div class="fds-collapse second"> <div class="fds-collapse-content"> <p class="mb--0">I'm the second content!</p> </div> </div> <button class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1" data-toggle="fds-collapse" data-target=".fds-collapse.third" data-text="Collapse"> <span>Third Button</span> <i class="icon-arrow-down-fill"></i> </button> <div class="fds-collapse third"> <div class="fds-collapse-content"> <p class="mb--0">I'm the third content!</p> </div> </div> <button class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1" data-toggle="fds-collapse" data-target=".fds-collapse.fourth" data-text="Collapse"> <span>Fourth Button</span> <i class="icon-arrow-down-fill"></i> </button> <div class="fds-collapse fourth"> <div class="fds-collapse-content"> <p class="mb--0">I'm the fourth content!</p> </div> </div> <button class="fds--btncollapse font--weight--bold btn--primary border--0 d--flex justify--content--between w--100 mb--1" data-toggle="fds-collapse" data-target=".fds-collapse.fifth" data-text="Collapse"> <span>Fifth</span> <i class="icon-arrow-down-fill"></i> </button> <div class="fds-collapse fifth"> <div class="fds-collapse-content"> <p class="mb--0">I'm the fifth content!</p> </div> </div>
Accordion
With some additional classes, the default collapse component is converted to Accordion.
I'm the first content!
I'm the second content!
I'm the third content!
I'm the fourth content!
I'm the fifth content!
Tables
A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables appear in print media, handwritten notes, computer software, architectural ornamentation, traffic signs, and many other places.
How to import table styles:
In order to use tables in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/components/table'
How to customize table styles:
In order to customize tables in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/table
Default Table
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Dark Table
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Dark Table Head
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Light Table Head
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Striped rows
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Striped rows Even
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Hoverable Rows
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Default Table
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Dark Table
| Category | January | February | March |
|---|---|---|---|
| Total (16 years and over) | 6.6 | 6.7 | 6.7 |
| Less than a high school diploma | 9.6 | 9.8 | 9.6 |
| High school graduates, no college | 6.5 | 6.4 | 6.3 |
| Some college or associate degree | 6.0 | 6.2 | 6.1 |
| Bachelor’s degree and higher | 3.2 | 3.4 | 3.4 |
Toast Notification
A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive.
How to import notification-toast styles:
In order to use notification-toasts in your project, import following path in your main styles:
@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/notification-toast'
How to customize notification-toast styles:
In order to customize notification-toasts in your theme as per requirements, import following path in your theme-settings file:
@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/notification-toast
Success
info-icon
info-icon
This is the toast Notification
close button
This is the toast Notification Message
This is the toast Notification
close button
This is the toast Notification Message
Error
info-icon
info-icon
This is the toast Notification
close button
This is the toast Notification Message
This is the toast Notification
close button
This is the toast Notification Message
Warning
info-icon
info-icon
This is the toast Notification
close button
This is the toast Notification Message
This is the toast Notification
close button
This is the toast Notification Message
Info
info-icon
info-icon
This is the toast Notification
close button
This is the toast Notification Message
This is the toast Notification
close button
This is the toast Notification Message
Accessibility
The purpose of Web accessibility is to make websites accessible for people with following disabilities:
- auditory
- cognitive
- neurological
- physical
- speech
- visual
Web accessibility is also useful for people without disabilities:
- Those using mobile phones, smart watches, smart TVs, and other devices with small screens.
- Elder people with changing abilities due to ageing.
- People with “temporary disabilities” such as a broken arm or lost glasses
Essential Web-Accessibility requirements:
Skip Links:
The main objective of skip links is to bypass long navigations in header section for example. Such links make our page more accessible for users with keyboards. Also they are helpful for quickly moving to required page sections without going through complete page.
how to implement:
Such links can be created anywhere in the page preferably on page top, usually they are invisible and made visible on focus:
Keyboard Support
Menubar
| Key | Function |
|---|---|
| Space / Down Arrow | Opens submenu and moves focus to first item in the submenu. |
| Enter | Activates menu item, causing the link to be activated. |
| Right Arrow | Moves focus to the next item in the menubar. |
| Left Arrow | Moves focus to the previous item in the menubar. |
Submenu
| Key | Function |
|---|---|
| Enter | Activates menu item, causing the link to be activated. |
| Escape | Closes submenu and Moves focus to parent menubar item. |
| Right Arrow | Moves focus to the next item in the submenu. |
| Left Arrow | Moves focus to the previous item in the submenu. |
| Down Arrow | Moves focus to the next item in the submenu. |
| Up Arrow |
|
Roles, States, Property and Attibutes on Elements
To add links inside the navbar, use a
<ul> element with id="megaMenu" and
provide role="menubar" to Identifies the element as a
menubar container for a set of menuitem elements.
Then add <li> elements and provide
role="none" because the parent ul is
serving as a menu so the li elements are not in their
required list context.
Add <a> element inside every
<li> element and provide
role="menuitem" to Identifies the element as a menu
item. Also set Attibutes aria-haspopup="true" to
identifies which menu item has submenu and
aria-haspopup="false" which menu item has not submenu.
And also which menu item has submenu, Adds attibutes
aria-expanded="true" Indicates the submenu is in
expanded state and aria-expanded="false" Indicates the
submenu is in collapsed state.
Add submenu <div> after menu item and provide
role="menu" to serve as submenu.
To add links inside submenu use <ul> element with
role="list", inside <ul> use
<li> element with
role="listitem" and inside <li> use
<a> element with role="menuitem".
In Mobile View, provide aria-expanded="true" to the
Hamburger Toggle button, indicates the Navbar is Expanded and
provide aria-expanded="false" indicates the Navbar is
Collapsed.
Focus Trap
To Trap Focus while Navbar is Expanded in Mobile View, Provide
aria-hidden="true" to each element (Skip Link Button,
Main and Footer) on the website except the Navbar element (Header),
when it is in expanded state and remove the
aria-hidden attribute when it is in collapsed state and
Also use Javascript Focus Function to shift focus to the Navbar
Brand from the Last Navbar Item.
<header>
<div id="mainNavigation" class="fds--navbar">
<div class="fds--navbar--brand">
<a href="#" class="fds--brand--link">
<img src="./../../images/Logo.png" alt="MobileLIVE Site Logo">
</a>
</div>
<button id="navOpenerBtn" class="fds--nav--opener" aria-label="Open Navigation Menu" aria-expanded="false" onclick="openNav()"></button>
<nav class="fds--nav" aria-label="Main Navigation">
<ul id="megaMenu" role="menubar" class="fds--main--nav">
<li id="home" class="fds--has--drop fds--main--nav--item" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">Home <i class="icon-arrow-down"></i></a>
<button class="down-arrow" aria-label="Click here to open sub menu" aria-expanded="false">
<i class="icon-arrow-down"></i>
</button>
<div class="fds--droplet" role="menu">
<div class="fds--droplet--holder">
<div role="group" aria-labelledby="headingA1" class="fds--droplet--col">
<strong id="headingA1">Heading 1</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
<div role="group" aria-labelledby="headingA2" class="fds--droplet--col">
<strong id="headingA2">Heading 2</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
<div role="group" aria-labelledby="headingA3" class="fds--droplet--col">
<strong id="headingA3">Heading 3</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
</div>
</div>
</li>
<li id="about" class="fds--has--drop fds--main--nav--item" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">About <i class="icon-arrow-down"></i></a>
<button class="down-arrow" aria-label="Click here to open sub menu" aria-expanded="false">
<i class="icon-arrow-down"></i>
</button>
<div class="fds--droplet" role="menu">
<div class="fds--droplet--holder">
<div role="group" aria-labelledby="headingB1" class="fds--droplet--col">
<strong id="headingB1">Heading 1</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
<div role="group" aria-labelledby="headingB2" class="fds--droplet--col">
<strong id="headingB2">Heading 2</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
<div role="group" aria-labelledby="headingB3" class="fds--droplet--col">
<strong id="headingB3">Heading 3</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
</div>
</div>
</li>
<li id="news" class="fds--has--drop fds--main--nav--item" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">News <i class="icon-arrow-down"></i></a>
<button class="down-arrow" aria-label="Click here to open sub menu" aria-expanded="false">
<i class="icon-arrow-down"></i>
</button>
<div class="fds--droplet" role="menu">
<div class="fds--droplet--holder">
<div role="group" aria-labelledby="headingC1" class="fds--droplet--col">
<strong id="headingC1">Heading 1</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
<div role="group" aria-labelledby="headingC2" class="fds--droplet--col">
<strong id="headingC2">Heading 2</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
<div role="group" aria-labelledby="headingC3" class="fds--droplet--col">
<strong id="headingC3">Heading 3</strong>
<ul role="list">
<li role="listitem"><a href="#" role="menuitem">Item 1</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 2</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 3</a></li>
<li role="listitem"><a href="#" role="menuitem">Item 4</a></li>
</ul>
</div>
</div>
</div>
</li>
<li id="contact" class="fds--main--nav--item" role="none">
<a href="#" role="menuitem" aria-haspopup="false">Contact</a>
</li>
<li id="sitemap" class="fds--main--nav--item" role="none">
<a id="lastNavItem" href="#" role="menuitem" aria-haspopup="false">Sitemap</a>
</li>
</ul>
</nav>
</div>
</header>
Within _navbar.scss, you can change the Navbar styling you want to use.
Add JQuery <script> into <head> before all other javascript to load.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var isNavOpen = false;
var windowSize = $(window).width();
window.addEventListener('resize', getWindowSize);
function getWindowSize() {
windowSize = $(window).width();
}
function getBreakpointValue(name){
let value = getComputedStyle(document.documentElement).getPropertyValue(name);
return parseInt(value,10);
}
document
.getElementById('lastNavItem')
.addEventListener('keydown', focusTrap);
function focusTrap(e) {
if(isNavOpen === true && e.which === 9){
if($(window).width() < getBreakpointValue('--breakpoint-lg')){
e.preventDefault();
$('.fds--brand--link').focus();
}
}
}
function initMegaMenu() {
var megaMenu = document.getElementById('megaMenu');
// keyboard stuff
$(megaMenu).delegate('li a', 'keydown', keyboardHandler);
// mouse stuff
$(' > li.fds--has--drop', megaMenu).each(function () {
var dropdown = $('.fds--droplet', $(this)[0]);
$(this).hover(
function () {
if (windowSize >= getBreakpointValue('--breakpoint-lg')){
$(this).addClass('active');
$(this).children('a').attr('aria-expanded', 'true');
$('.fds--droplet', megaMenu).each(function (index, drop) {
if (drop !== dropdown) {
$(drop).hide();
}
});
$(dropdown).attr("aria-hidden", "false");
$(dropdown).slideDown(0);
}
},
function () {
if (windowSize >= getBreakpointValue('--breakpoint-lg')){
$(this).removeClass('active');
$(this).children('a').attr('aria-expanded', 'false');
$(dropdown).slideUp(0);
}
}
);
});
}
function openNav() {
var x = document.getElementById('mainNavigation');
var y = document.getElementById('navOpenerBtn');
var classes = x.className.split(' ');
var i = classes.indexOf('open');
if (i >= 0) {
x.classList.remove('open');
y.setAttribute('aria-label', 'Open Navigation Menu');
y.setAttribute('aria-expanded', 'false');
isNavOpen = false;
document
.getElementById('skipNavBTN')
.setAttribute('aria-hidden', false);
document.getElementById('main').setAttribute('aria-hidden', false);
document.getElementById('footer').setAttribute('aria-hidden', false);
} else {
x.classList.add('open');
y.setAttribute('aria-label', 'Close Navigation Menu');
y.setAttribute('aria-expanded', 'true');
isNavOpen = true;
document
.getElementById('skipNavBTN')
.setAttribute('aria-hidden', true);
document.getElementById('main').setAttribute('aria-hidden', true);
document.getElementById('footer').setAttribute('aria-hidden', true);
}
}
$('.down-arrow').on('click', function () {
var parent_id = $(this).parent().attr('id');
var x = document.getElementById(parent_id);
var y = $(this);
var li_has_class = x.classList.contains('active');
const childrens = document.querySelectorAll('.fds--has--drop');
childrens.forEach(function (elem) {
elem.classList.remove('active');
let caretBtn = elem.querySelector('.down-arrow');
let label = caretBtn.getAttribute('aria-label');
let updateLabel = label.replace('close', 'open');
caretBtn.setAttribute('aria-label', updateLabel);
caretBtn.setAttribute('aria-expanded', false);
});
if (!li_has_class) {
x.classList.add('active');
let caretBtn = x.querySelector('.down-arrow');
let label = caretBtn.getAttribute('aria-label');
let updateLabel = label.replace('open', 'close');
caretBtn.setAttribute('aria-label', updateLabel);
caretBtn.setAttribute('aria-expanded', true);
}
});
function setAttributes(el, attrs) {
for (var key in attrs) {
el.querySelector('.down-arrow').setAttribute(key, attrs[key]);
}
}
function keyboardHandler(keyVent) {
var target = keyVent.target;
var which = keyVent.which;
if (which === 39) {
// RIGHT
if (isTopLevel(target)) {
// top level item
var nextTopItem = adjacentTopLevelItem(target, 'next');
if (nextTopItem) {
keyVent.preventDefault();
nextTopItem.focus();
}
} else {
// dropdown item
var nextDropletItem = adjacentDropdownItem(target, 'next');
if (nextDropletItem) {
keyVent.preventDefault();
nextDropletItem.focus();
}
}
} else if (which === 37) {
// LEFT
if (isTopLevel(target)) {
// top level item
var prevTopItem = adjacentTopLevelItem(target, 'prev');
if (prevTopItem) {
keyVent.preventDefault();
prevTopItem.focus();
}
} else {
// dropdown item
var prevDropItem = adjacentDropdownItem(target, 'prev');
if (prevDropItem) {
keyVent.preventDefault();
prevDropItem.focus();
}
}
} else if (which === 40) {
// DOWN
if (isTopLevel(target) && hasDropdown(target)) {
// top level item w/ dropdown -- open dropdown
openDropdown(target);
} else {
// dropdown item
var nextDropItem = adjacentDropdownItem(target, 'next');
if (nextDropItem) {
keyVent.preventDefault();
nextDropItem.focus();
}
}
} else if (which === 38) {
// UP
if (!isTopLevel(target)) {
if (isFirstDropItem(target)) {
keyVent.preventDefault();
var top = closeDropdown(target);
setTimeout(function () {
top.focus();
}, 0);
} else {
var prevDropAnchor = adjacentDropdownItem(target, 'prev');
if (prevDropAnchor) {
keyVent.preventDefault();
prevDropAnchor.focus();
}
}
}
} else if (which === 27) {
// ESCAPE
if (!isTopLevel(target)) {
var topper = closeDropdown(target);
setTimeout(function () {
topper.focus();
}, 0);
}
} else if (which === 9 && keyVent.shiftKey) {
// SHIFT + TAB
if (!isTopLevel(target) && isFirstDropItem(target)) {
keyVent.preventDefault();
var topA = closeDropdown(target);
setTimeout(function () {
topA.focus();
}, 0);
}
} else if (which === 9) {
// TAB
if (!isTopLevel(target) && isLastDropItem(target)) {
keyVent.preventDefault();
var topItem = closeDropdown(target);
var nextLi = $(topItem.parentNode).next()[0];
var nextAnchor = $('a', nextLi)[0];
nextAnchor.focus();
}
} else if (which === 32) {
if (
isTopLevel(target) &&
$(target.parentNode).hasClass('fds--has--drop')
) {
openDropdown(target);
}
}
}
// determines if the item is a top-level one
function isTopLevel(item) {
return $(item).is('#megaMenu > li > a');
}
// determines if the item has a dropdown
function hasDropdown(item) {
return $(item.parentNode).hasClass('fds--has--drop');
}
// determines if the item is the first in the dropdown
function isFirstDropItem(item) {
var drop = $(item).closest('.fds--droplet')[0];
var firstInDrop = $('li a', drop)[0];
return firstInDrop === item;
}
// determines if the item is the last in the dropdown
function isLastDropItem(item) {
var drop = $(item).closest('.fds--droplet')[0];
var lastInDrop = $('li a', drop).last()[0];
return lastInDrop === item;
}
// finds the adjacent top level item
function adjacentTopLevelItem(item, dir) {
var li = item.parentNode; // <li />
var adjacentLi = dir === 'next' ? $(li).next()[0] : $(li).prev()[0];
var adjacentItem = adjacentLi && $('a', adjacentLi)[0];
return adjacentItem;
}
// finds the next or prev dropdown item
function adjacentDropdownItem(item, dir) {
var adjacentDropItem;
var li = item.parentNode;
var adjacentSameCol =
dir === 'next' ? $(li).next()[0] : $(li).prev()[0];
if (adjacentSameCol) {
// there is one in the same col
adjacentDropItem = $('a', adjacentSameCol)[0];
} else {
// lets look for one in the adjacent column
var col = $(li).closest('.fds--droplet--col')[0];
var adjacentCol =
dir === 'next' ? $(col).next()[0] : $(col).prev()[0];
if (adjacentCol) {
// we've found the adjacent column
var adjacentItem =
dir === 'next'
? $('li a', adjacentCol)[0]
: $('li a', adjacentCol).last()[0];
if (adjacentItem) {
adjacentDropItem = adjacentItem;
}
}
}
return adjacentDropItem;
}
function openDropdown(item) {
$(item.parentNode).addClass('active');
$(item).attr('aria-expanded', 'true');
var caret = $(item).next()[0];
var droplet = $(caret).next()[0];
$(droplet).attr('aria-hidden', 'false');
// open the dropdown...
$(droplet).slideDown(100);
// ...and focus the first item
setTimeout(function () {
$('a', droplet)[0].focus();
}, 100);
}
function closeDropdown(item) {
var droplet = $(item).closest('.fds--droplet')[0];
$(droplet).attr('aria-hidden', 'true');
var caret = $(droplet).prev()[0];
var topLevelItem = $(caret).prev()[0];
$(topLevelItem).attr('aria-expanded', 'false');
$(topLevelItem.parentNode).removeClass('active');
$(droplet).slideUp(100);
return topLevelItem;
}
////////////////////////////////////
$(document).ready(initMegaMenu);
////////////////////////////////////
//
</script>