**/
.mds {
background: var(--mds_foundations_body_background-color);
color: var(--mds_foundations_body_text-color);
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizelegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/*
@name: mds
@category: Typography
@usage:
Use mds class to apply typography styles to the content.
@example:
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* Render the `main` element consistently in IE.
*/
}
.mds main {
display: block;
}
.mds {
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
}
.mds h1 {
font-size: 2em;
margin: 0.67em 0;
}
.mds {
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
}
.mds hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
.mds {
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
}
.mds pre {
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
.mds {
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
}
.mds a {
background-color: transparent;
}
.mds {
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
}
.mds abbr[title] {
border-bottom-width: 0; /* 1 */
text-decoration: underline; /* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted; /* 2 */
}
.mds {
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
}
.mds b,
.mds strong {
font-weight: bolder;
}
.mds {
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
}
.mds code,
.mds kbd,
.mds samp {
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
.mds {
/**
* Add the correct font size in all browsers.
*/
}
.mds small {
font-size: 80%;
}
.mds {
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
}
.mds sub,
.mds sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.mds sub {
bottom: -0.25em;
}
.mds sup {
top: -0.5em;
}
.mds {
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
}
.mds img {
border-style: none;
}
.mds {
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
}
.mds button,
.mds input,
.mds optgroup,
.mds select,
.mds textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
.mds {
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
}
.mds button,
.mds input {
/* 1 */
overflow: visible;
}
.mds {
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
}
.mds button,
.mds select {
/* 1 */
text-transform: none;
}
.mds {
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
}
.mds button,
.mds [type=button],
.mds [type=reset],
.mds [type=submit] {
-webkit-appearance: button;
}
.mds {
/**
* Remove the inner border and padding in Firefox.
*/
}
.mds button::-moz-focus-inner,
.mds [type=button]::-moz-focus-inner,
.mds [type=reset]::-moz-focus-inner,
.mds [type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
.mds {
/**
* Restore the focus styles unset by the previous rule.
*/
}
.mds button:-moz-focusring,
.mds [type=button]:-moz-focusring,
.mds [type=reset]:-moz-focusring,
.mds [type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
.mds {
/**
* Correct the padding in Firefox.
*/
}
.mds fieldset {
border-width: 0;
padding: 0;
margin: 0;
}
.mds {
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
}
.mds legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
.mds {
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
}
.mds progress {
vertical-align: baseline;
}
.mds {
/**
* Remove the default vertical scrollbar in IE 10+.
*/
}
.mds textarea {
overflow: auto;
}
.mds {
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
}
.mds [type=checkbox],
.mds [type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
.mds {
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
}
.mds [type=number]::-webkit-inner-spin-button,
.mds [type=number]::-webkit-outer-spin-button {
height: auto;
}
.mds {
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
}
.mds [type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
.mds {
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
}
.mds [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
.mds {
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
}
.mds ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
.mds {
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
}
.mds details {
display: block;
}
.mds {
/*
* Add the correct display in all browsers.
*/
}
.mds summary {
display: list-item;
}
.mds {
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
}
.mds template {
display: none;
}
.mds {
/**
* Add the correct display in IE 10.
*/
}
.mds [hidden] {
display: none;
}
.mds * {
box-sizing: border-box;
}
.mds footer,
.mds main {
display: block;
}
.mds button,
.mds input,
.mds optgroup,
.mds select,
.mds textarea {
font-family: inherit;
}
.mds code {
word-break: normal;
overflow-wrap: anywhere;
}
.mds [slot=label],
.mds [slot=errormessage],
.mds [slot=hint],
.mds [slot=legend] {
display: flex;
align-items: center;
gap: var(--mds_foundations_slot_gap);
}
.mds mc-modal h1,
.mds mc-tab-bar h1,
.mds mc-popover h1,
.mds mc-c-accordion h1 {
margin: calc(var(--mds_foundations_typography_heading-1_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-1_margin-bottom) / 2) 0;
}
.mds mc-modal h2,
.mds mc-tab-bar h2,
.mds mc-popover h2,
.mds mc-c-accordion h2 {
margin: calc(var(--mds_foundations_typography_heading-2_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-2_margin-bottom) / 2) 0;
}
.mds mc-modal h3,
.mds mc-tab-bar h3,
.mds mc-popover h3,
.mds mc-c-accordion h3 {
margin: calc(var(--mds_foundations_typography_heading-3_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-3_margin-bottom) / 2) 0;
}
.mds mc-modal h4,
.mds mc-tab-bar h4,
.mds mc-popover h4,
.mds mc-c-accordion h4 {
margin: calc(var(--mds_foundations_typography_heading-4_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-4_margin-bottom) / 2) 0;
}
.mds mc-modal h5,
.mds mc-tab-bar h5,
.mds mc-popover h5,
.mds mc-c-accordion h5 {
margin: calc(var(--mds_foundations_typography_heading-4_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-4_margin-bottom) / 2) 0;
}
.mds mc-modal h6,
.mds mc-tab-bar h6,
.mds mc-popover h6,
.mds mc-c-accordion h6 {
margin: calc(var(--mds_foundations_typography_heading-4_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-4_margin-bottom) / 2) 0;
}
.mds mc-modal p,
.mds mc-tab-bar p,
.mds mc-popover p,
.mds mc-c-accordion p {
margin: calc(var(--mds_foundations_typography_paragraph_margin-top) / 2) 0 calc(var(--mds_foundations_typography_paragraph_margin-bottom) / 2) 0;
}
.mds mc-modal hr,
.mds mc-tab-bar hr,
.mds mc-popover hr,
.mds mc-c-accordion hr {
margin: calc(var(----mds_foundations_horizontal-rule_margin-top) / 2) 0 calc(var(--mds_foundations_horizontal-rule_margin-bottom) / 2) 0;
}
.mds mc-modal ol,
.mds mc-modal ul,
.mds mc-tab-bar ol,
.mds mc-tab-bar ul,
.mds mc-popover ol,
.mds mc-popover ul,
.mds mc-c-accordion ol,
.mds mc-c-accordion ul {
margin: calc(var(--mds_foundations_list_margin-top) / 2) 0 calc(var(--mds_foundations_list_margin-bottom) / 2) 0;
}
.mds {
/**
* These SASS variables are auto-generated out of their counter-part design-tokens
* during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs
**/
/*
@description:
A breadcrumb is a secondary navigation component used to show users their location within a website or application hierarchy.
Breadcrumbs should provide context and an easy way for users to navigate up the site hierarchy.
They are not intended to replace primary navigation but to enhance the user’s understanding of where they are within the website or application.
Use a breadcrumb for applications with a hierarchy of more than 2 levels.
@basicExample:
// Basic breadcrumb with 5 levels
@advancedExample:
// Advanced breadcrumb with truncation
*/
}
.mds .mds-breadcrumb {
/*
@name: mds-breadcrumb
@category: Navigation
@usage:
Use breadcrumbs to give context and help users navigate.
All breadcrumbs items except the current page should be clickable links.
Use concise and descriptive link text for each level in the breadcrumb.
Avoid using dynamic or changing breadcrumbs, since it can confuse users.
Use truncation if the breadcrumb has more than 5 levels.
The breadcrumb should never wrap to the second line.
Place the breadcrumb consistently on each page across the website or application.
Don’t use a breadcrumb for simple and flat hierarchies e.g. a 2 level hierarchy.
@example:
*/
}
.mds .mds-breadcrumb ol {
list-style: none;
flex-flow: row wrap;
gap: 0;
margin: 0;
padding: 0;
}
.mds .mds-breadcrumb ol li {
display: flex;
padding: 0;
}
.mds .mds-breadcrumb ol a {
text-decoration: none;
color: var(--mds_foundations_breadcrumb_item_text-color);
align-items: center;
}
.mds .mds-breadcrumb ol a:hover {
text-decoration: underline;
}
.mds .mds-breadcrumb ol a mc-icon::part(icon) {
fill: var(--mds_foundations_breadcrumb_item_text-color);
}
.mds .mds-breadcrumb ol li::after {
padding: 0 var(--mds_foundations_breadcrumb_item_padding);
color: var(--mds_brand_appearance_neutral_weakest_text-color);
content: "/";
}
.mds .mds-breadcrumb ol li:last-child {
color: var(--mds_foundations_breadcrumb_item_text-color);
}
.mds .mds-breadcrumb ol li:last-child::after {
content: "";
}
.mds .mds-breadcrumb ol li:last-child {
font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
font-size: var(--mds_brand_typography_text_small_mobile_font-size);
line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}
@media screen and (min-width: 1025px) {
.mds .mds-breadcrumb ol li:last-child {
font-size: var(--mds_brand_typography_text_small_desktop_font-size);
line-height: var(--mds_brand_typography_text_small_desktop_line-height);
}
}
.mds .mds-breadcrumb ol li:last-child {
font-style: var(--mds_brand_typography_text_small_normal_font-style);
font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}
.mds .mds-breadcrumb ol .mds-breadcrumb__long-and-truncated {
/*
@name: mds-breadcrumb__long-and-truncated
@category: Navigation
@usage:
It is recommended to limit the breadcrumb to 3-5 levels. If the website or application has a deeper hierarchy or is too long, then use truncation. Displaying more than 5 levels will make it hard for the user to comprehend the structure and in most cases there also starts to be a problem with space.
When truncated the breadcrumb only shows the first and the last two levels and the levels in between is replaced by an ellipsis.
@example:
*/
flex: 0.5;
display: block;
max-width: max-content;
padding-right: var(--mds_foundations_breadcrumb_truncated_item_padding);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.mds .mds-breadcrumb ol .mds-breadcrumb__long-and-truncated a {
display: inline;
}
.mds .mds-breadcrumb ol .mds-breadcrumb__long-and-truncated::after {
position: absolute;
top: 0;
right: 0;
}
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li {
display: none;
}
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:first-child,
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3),
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2),
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:last-child {
display: flex;
}
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) ~ li.mds-breadcrumb__long-and-truncated,
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2) ~ li.mds-breadcrumb__long-and-truncated {
display: block;
}
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) a {
display: none;
}
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3)::after {
content: "...";
padding: 0 var(--mds_foundations_breadcrumb_collapsed_padding) 0 0;
color: var(--mds_foundations_breadcrumb_item_text-color);
}
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2)::before {
content: "/";
padding: 0 var(--mds_foundations_breadcrumb_item_padding);
color: var(--mds_foundations_breadcrumb_separator_text-color);
}
.mds .mds-breadcrumb {
font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
font-size: var(--mds_brand_typography_text_small_mobile_font-size);
line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}
@media screen and (min-width: 1025px) {
.mds .mds-breadcrumb {
font-size: var(--mds_brand_typography_text_small_desktop_font-size);
line-height: var(--mds_brand_typography_text_small_desktop_line-height);
}
}
.mds .mds-breadcrumb {
font-style: var(--mds_brand_typography_text_small_normal_font-style);
font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}
@media only screen and (max-width: 640px) {
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li {
display: none;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:first-child,
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3),
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2),
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:last-child {
display: flex;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) ~ li.mds-breadcrumb__long-and-truncated,
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2) ~ li.mds-breadcrumb__long-and-truncated {
display: block;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) a {
display: none;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3)::after {
content: "...";
padding: 0 var(--mds_foundations_breadcrumb_collapsed_padding) 0 0;
color: var(--mds_foundations_breadcrumb_item_text-color);
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2)::before {
content: "/";
padding: 0 var(--mds_foundations_breadcrumb_item_padding);
color: var(--mds_foundations_breadcrumb_separator_text-color);
}
}
@container (max-width: 640px) {
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li {
display: none;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:first-child,
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3),
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2),
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:last-child {
display: flex;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) ~ li.mds-breadcrumb__long-and-truncated,
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2) ~ li.mds-breadcrumb__long-and-truncated {
display: block;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) a {
display: none;
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3)::after {
content: "...";
padding: 0 var(--mds_foundations_breadcrumb_collapsed_padding) 0 0;
color: var(--mds_foundations_breadcrumb_item_text-color);
}
.mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2)::before {
content: "/";
padding: 0 var(--mds_foundations_breadcrumb_item_padding);
color: var(--mds_foundations_breadcrumb_separator_text-color);
}
}
.mds {
/*
@description:
Tree Navigation used for organizing and navigating hierarchical content with expandable and collapsible navigation items.
Tree navigation is styled using the mds-tree-nav class. It supports nested lists and can be used with details and summary elements for expandable sections.
The styles can be customized using the mds-tree-nav__active class for active links and mds-tree-nav__external class for external links.
Tree navigation is designed to be accessible, with support for keyboard navigation and screen readers.
Tree navigation is often used in mc-side-bar or as part of a larger navigation system, allowing users to easily explore and navigate through complex structures.
@basicExample:
@advancedExample:
*/
}
.mds .mds-tree-nav {
/*
@name: mds-tree-nav
@category: Tree Navigation
@usage:
Use mds-tree-nav class to style tree navigation elements.
@example:
*/
}
.mds .mds-tree-nav ul,
.mds .mds-tree-nav ol {
display: flex;
flex-direction: column;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.mds .mds-tree-nav ul,
.mds .mds-tree-nav ol {
font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
font-size: var(--mds_brand_typography_text_small_mobile_font-size);
line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}
@media screen and (min-width: 1025px) {
.mds .mds-tree-nav ul,
.mds .mds-tree-nav ol {
font-size: var(--mds_brand_typography_text_small_desktop_font-size);
line-height: var(--mds_brand_typography_text_small_desktop_line-height);
}
}
.mds .mds-tree-nav ul,
.mds .mds-tree-nav ol {
font-style: var(--mds_brand_typography_text_small_normal_font-style);
font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}
.mds .mds-tree-nav li {
margin: 0;
padding: 0;
}
.mds .mds-tree-nav li.mds-tree-nav--separator {
/*
@name: mds-tree-nav--separator
@category: Tree Navigation
@usage:
Use mds-tree-nav--separator class to create a separator line in tree navigation.
@example:
*/
border-top: 1px solid var(--mds_brand_appearance_neutral_weak_border-color);
margin: 10px 0;
padding: 0;
}
.mds .mds-tree-nav summary,
.mds .mds-tree-nav a {
position: relative;
border-radius: var(--mds_brand_border_medium_radius);
cursor: pointer;
display: flex;
justify-content: flex-start;
margin-bottom: 2px;
overflow: hidden;
padding: 6px 36px 6px 16px;
-webkit-text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.mds .mds-tree-nav summary mc-icon,
.mds .mds-tree-nav a mc-icon {
margin-right: 8px;
}
.mds .mds-tree-nav summary mc-icon::part(icon),
.mds .mds-tree-nav a mc-icon::part(icon) {
fill: var(--mds_brand_appearance_neutral_weak_text-color);
}
.mds .mds-tree-nav summary:visited,
.mds .mds-tree-nav a:visited {
color: var(--mds_brand_appearance_neutral_weak_text-color);
}
.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
background-color: var(--mds_brand_appearance_state_neutral_default_hover_background-color);
color: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds .mds-tree-nav summary:hover mc-icon::part(icon), .mds .mds-tree-nav summary:active mc-icon::part(icon),
.mds .mds-tree-nav a:hover mc-icon::part(icon),
.mds .mds-tree-nav a:active mc-icon::part(icon) {
fill: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
font-size: var(--mds_brand_typography_text_small_mobile_font-size);
line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}
@media screen and (min-width: 1025px) {
.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
font-size: var(--mds_brand_typography_text_small_desktop_font-size);
line-height: var(--mds_brand_typography_text_small_desktop_line-height);
}
}
.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
font-style: var(--mds_brand_typography_text_small_normal_font-style);
font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}
.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
color: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds .mds-tree-nav summary:focus-visible,
.mds .mds-tree-nav a:focus-visible {
outline: 0;
box-shadow: inset var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}
.mds .mds-tree-nav summary,
.mds .mds-tree-nav a {
color: var(--mds_brand_appearance_neutral_weak_text-color);
}
.mds .mds-tree-nav a.mds-tree-nav__active {
/*
@name: mds-tree-nav__active
@category: Tree Navigation
@usage:
Use mds-tree-nav__active class to style currently active item in tree navigation.
@example:
Active Item
*/
color: var(--mds_brand_appearance_neutral_default_text-color);
background-color: var(--mds_brand_appearance_state_neutral_default_hover_background-color);
}
.mds .mds-tree-nav a.mds-tree-nav__active::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 16px;
width: 3px;
background-color: var(--mds_brand_appearance_static_brand);
}
.mds .mds-tree-nav a.mds-tree-nav__active mc-icon::part(icon) {
fill: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds .mds-tree-nav a.mds-tree-nav__active {
font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
font-size: var(--mds_brand_typography_text_small_mobile_font-size);
line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}
@media screen and (min-width: 1025px) {
.mds .mds-tree-nav a.mds-tree-nav__active {
font-size: var(--mds_brand_typography_text_small_desktop_font-size);
line-height: var(--mds_brand_typography_text_small_desktop_line-height);
}
}
.mds .mds-tree-nav a.mds-tree-nav__active {
font-style: var(--mds_brand_typography_text_small_medium_font-style);
font-weight: var(--mds_brand_typography_text_small_medium_font-weight);
}
.mds .mds-tree-nav a.mds-tree-nav__external::after {
/*
@name: mds-tree-nav__external
@category: Tree Navigation
@usage:
Use mds-tree-nav__external class to style external links in tree navigation with icon to the right.
@example:
External Link
*/
margin-left: 16px;
display: inline;
height: 20px;
width: 20px;
background-color: var(--mds_brand_appearance_neutral_weak_text-color);
content: "";
mask: url('data:image/svg+xml,') no-repeat 50% 50%;
mask-size: cover;
}
.mds .mds-tree-nav summary {
list-style-type: none;
border-radius: var(--mds_brand_border_large_radius);
}
.mds .mds-tree-nav summary::-webkit-details-marker {
display: none;
}
.mds .mds-tree-nav details[open] {
color: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds .mds-tree-nav details > summary::after,
.mds .mds-tree-nav a.mds-tree-nav__external::after {
position: absolute;
right: 8px;
}
.mds .mds-tree-nav details > summary::after {
margin-left: 16px;
height: 20px;
width: 20px;
background-color: var(--mds_brand_appearance_neutral_weak_text-color);
content: "";
mask: url('data:image/svg+xml,') no-repeat 50% 50%;
mask-size: cover;
}
.mds .mds-tree-nav details[open] > summary::after {
mask: url('data:image/svg+xml,') no-repeat 50% 50%;
}
.mds .mds-tree-nav details[open] > summary {
font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
font-size: var(--mds_brand_typography_text_small_mobile_font-size);
line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}
@media screen and (min-width: 1025px) {
.mds .mds-tree-nav details[open] > summary {
font-size: var(--mds_brand_typography_text_small_desktop_font-size);
line-height: var(--mds_brand_typography_text_small_desktop_line-height);
}
}
.mds .mds-tree-nav details[open] > summary {
font-style: var(--mds_brand_typography_text_small_medium_font-style);
font-weight: var(--mds_brand_typography_text_small_medium_font-weight);
}
.mds .mds-tree-nav details > summary:hover::after {
background-color: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds .mds-tree-nav summary:has(mc-badge),
.mds .mds-tree-nav a:has(mc-badge) {
padding-right: 8px;
}
.mds .mds-tree-nav summary:has(mc-badge[position=right]),
.mds .mds-tree-nav a:has(mc-badge[position=right]) {
justify-content: space-between;
}
.mds .mds-tree-nav summary mc-badge[position=right] {
padding-right: 28px;
}
.mds .mds-tree-nav .mds-tree-nav__external mc-badge[position=right] {
padding-right: 28px;
}
.mds .mds-tree-nav li details li a,
.mds .mds-tree-nav li details li summary {
padding-left: 32px;
}
.mds .mds-tree-nav li details li details li a,
.mds .mds-tree-nav li details li details li summary {
padding-left: 48px;
}
.mds .mds-tree-nav li details li details li details li a,
.mds .mds-tree-nav li details li details li details li summary {
padding-left: 64px;
}
.mds .mds-tree-nav li details li details li details li details li a,
.mds .mds-tree-nav li details li details li details li details li summary {
padding-left: 80px;
}
.mds .mds-tree-nav li details li details li details li details li details li a,
.mds .mds-tree-nav li details li details li details li details li details li summary {
padding-left: 96px;
}
.mds {
/*
@description:
Color system for the Maersk Design System.
It includes a set of color appearances and variants that can be used for text, background, borders, and links.
The color system is designed to be flexible, making it suitable for various design needs.
It includes a set of predefined colors that can be used throughout the UI.
@basicExample:
Text with default color
Box with default border
Div with weak background and text that has the right contrast ratio for that background
*/
}
.mds .mds-neutral__text-color {
/*
@name: mds-neutral__text-color
@category: Colors
@usage:
Use mds-neutral__text-color class to get the neutral color for text.
@example:
text color in neutral appearance
*/
}
.mds .mds-neutral__text-color {
color: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds .mds-neutral--weakest__text-color {
/*
@name: mds-neutral--weakest__text-color
@category: Colors
@usage:
Use mds-neutral--weakest__text-color class to get the neutral weakest color for text.
@example:
text color in neutral weakest appearance
*/
}
.mds .mds-neutral--weakest__text-color {
color: var(--mds_brand_appearance_neutral_weakest_text-color);
}
.mds .mds-neutral--weak__text-color {
/*
@name: mds-neutral--weak__text-color
@category: Colors
@usage:
Use mds-neutral--weak__text-color class to get the neutral weak color for text.
@example:
text color in neutral weak appearance
*/
}
.mds .mds-neutral--weak__text-color {
color: var(--mds_brand_appearance_neutral_weak_text-color);
}
.mds .mds-neutral--strong__text-color {
/*
@name: mds-neutral--strong__text-color
@category: Colors
@usage:
Use mds-neutral--strong__text-color class to get the neutral strong color for text.
@example:
text color in neutral strong appearance
*/
}
.mds .mds-neutral--strong__text-color {
color: var(--mds_brand_appearance_neutral_strong_text-color);
}
.mds .mds-neutral--strongest__text-color {
/*
@name: mds-neutral--strongest__text-color
@category: Colors
@usage:
Use mds-neutral--strongest__text-color class to get the neutral strongest color for text.
@example:
text color in neutral strongest appearance
*/
}
.mds .mds-neutral--strongest__text-color {
color: var(--mds_brand_appearance_neutral_strongest_text-color);
}
.mds .mds-neutral--inverse__text-color {
/*
@name: mds-neutral--inverse__text-color
@category: Colors
@usage:
Use mds-neutral--inverse__text-color class to get the neutral inverse color for text.
@example:
text color in neutral inverse appearance
*/
}
.mds .mds-neutral--inverse__text-color {
color: var(--mds_brand_appearance_neutral_inverse_text-color);
}
.mds .mds-neutral--subtle__text-color {
/*
@name: mds-neutral--subtle__text-color
@category: Colors
@usage:
Use mds-neutral--subtle__text-color class to get the neutral subtle color for text.
@example:
text color in neutral subtle appearance
*/
}
.mds .mds-neutral--subtle__text-color {
color: var(--mds_brand_appearance_neutral_subtle_text-color);
}
.mds .mds-neutral--alt__text-color {
/*
@name: mds-neutral--alt__text-color
@category: Colors
@usage:
Use mds-neutral--alt__text-color class to get the neutral alt color for text.
@example:
text color in neutral alt appearance
*/
}
.mds .mds-neutral--alt__text-color {
color: var(--mds_brand_appearance_neutral_alt_text-color);
}
.mds .mds-neutral__background-color {
/*
@name: mds-neutral__background-color
@category: Colors
@usage:
Use mds-neutral__background-color class to get the neutral color for background.
@example:
background color in neutral appearance
*/
}
.mds .mds-neutral__background-color {
background-color: var(--mds_brand_appearance_neutral_default_background-color);
}
.mds .mds-neutral--weakest__background-color {
/*
@name: mds-neutral--weakest__background-color
@category: Colors
@usage:
Use mds-neutral--weakest__background-color class to get the neutral weakest color for background.
@example:
background color in neutral weakest appearance
*/
}
.mds .mds-neutral--weakest__background-color {
background-color: var(--mds_brand_appearance_neutral_weakest_background-color);
}
.mds .mds-neutral--weak__background-color {
/*
@name: mds-neutral--weak__background-color
@category: Colors
@usage:
Use mds-neutral--weak__background-color class to get the neutral weak color for background.
@example:
background color in neutral weak appearance
*/
}
.mds .mds-neutral--weak__background-color {
background-color: var(--mds_brand_appearance_neutral_weak_background-color);
}
.mds .mds-neutral--strong__background-color {
/*
@name: mds-neutral--strong__background-color
@category: Colors
@usage:
Use mds-neutral--strong__background-color class to get the neutral strong color for background.
@example:
background color in neutral strong appearance
*/
}
.mds .mds-neutral--strong__background-color {
background-color: var(--mds_brand_appearance_neutral_strong_background-color);
}
.mds .mds-neutral--strongest__background-color {
/*
@name: mds-neutral--strongest__background-color
@category: Colors
@usage:
Use mds-neutral--strongest__background-color class to get the neutral strongest color for background.
@example:
background color in neutral strongest appearance
*/
}
.mds .mds-neutral--strongest__background-color {
background-color: var(--mds_brand_appearance_neutral_strongest_background-color);
}
.mds .mds-neutral--inverse__background-color {
/*
@name: mds-neutral--inverse__background-color
@category: Colors
@usage:
Use mds-neutral--inverse__background-color class to get the neutral inverse color for background.
@example:
background color in neutral inverse appearance
*/
}
.mds .mds-neutral--inverse__background-color {
background-color: var(--mds_brand_appearance_neutral_inverse_background-color);
}
.mds .mds-neutral--subtle__background-color {
/*
@name: mds-neutral--subtle__background-color
@category: Colors
@usage:
Use mds-neutral--subtle__background-color class to get the neutral subtle color for background.
@example:
background color in neutral subtle appearance
*/
}
.mds .mds-neutral--subtle__background-color {
background-color: var(--mds_brand_appearance_neutral_subtle_background-color);
}
.mds .mds-neutral--alt__background-color {
/*
@name: mds-neutral--alt__background-color
@category: Colors
@usage:
Use mds-neutral--alt__background-color class to get the neutral alt color for background.
@example:
background color in neutral alt appearance
*/
}
.mds .mds-neutral--alt__background-color {
background-color: var(--mds_brand_appearance_neutral_alt_background-color);
}
.mds .mds-neutral__on-background-color {
/*
@name: mds-neutral__on-background-color
@category: Colors
@usage:
Use mds-neutral__on-background-color class to get the neutral color for on-background.
@example:
on-background color in neutral appearance
*/
}
.mds .mds-neutral__on-background-color {
color: var(--mds_brand_appearance_neutral_default_on-background-color);
}
.mds .mds-neutral--weakest__on-background-color {
/*
@name: mds-neutral--weakest__on-background-color
@category: Colors
@usage:
Use mds-neutral--weakest__on-background-color class to get the neutral weakest color for on-background.
@example:
on-background color in neutral weakest appearance
*/
}
.mds .mds-neutral--weakest__on-background-color {
color: var(--mds_brand_appearance_neutral_weakest_on-background-color);
}
.mds .mds-neutral--weak__on-background-color {
/*
@name: mds-neutral--weak__on-background-color
@category: Colors
@usage:
Use mds-neutral--weak__on-background-color class to get the neutral weak color for on-background.
@example:
on-background color in neutral weak appearance
*/
}
.mds .mds-neutral--weak__on-background-color {
color: var(--mds_brand_appearance_neutral_weak_on-background-color);
}
.mds .mds-neutral--strong__on-background-color {
/*
@name: mds-neutral--strong__on-background-color
@category: Colors
@usage:
Use mds-neutral--strong__on-background-color class to get the neutral strong color for on-background.
@example:
on-background color in neutral strong appearance
*/
}
.mds .mds-neutral--strong__on-background-color {
color: var(--mds_brand_appearance_neutral_strong_on-background-color);
}
.mds .mds-neutral--strongest__on-background-color {
/*
@name: mds-neutral--strongest__on-background-color
@category: Colors
@usage:
Use mds-neutral--strongest__on-background-color class to get the neutral strongest color for on-background.
@example:
on-background color in neutral strongest appearance
*/
}
.mds .mds-neutral--strongest__on-background-color {
color: var(--mds_brand_appearance_neutral_strongest_on-background-color);
}
.mds .mds-neutral--inverse__on-background-color {
/*
@name: mds-neutral--inverse__on-background-color
@category: Colors
@usage:
Use mds-neutral--inverse__on-background-color class to get the neutral inverse color for on-background.
@example:
on-background color in neutral inverse appearance
*/
}
.mds .mds-neutral--inverse__on-background-color {
color: var(--mds_brand_appearance_neutral_inverse_on-background-color);
}
.mds .mds-neutral--subtle__on-background-color {
/*
@name: mds-neutral--subtle__on-background-color
@category: Colors
@usage:
Use mds-neutral--subtle__on-background-color class to get the neutral subtle color for on-background.
@example:
on-background color in neutral subtle appearance
*/
}
.mds .mds-neutral--subtle__on-background-color {
color: var(--mds_brand_appearance_neutral_subtle_on-background-color);
}
.mds .mds-neutral--alt__on-background-color {
/*
@name: mds-neutral--alt__on-background-color
@category: Colors
@usage:
Use mds-neutral--alt__on-background-color class to get the neutral alt color for on-background.
@example:
on-background color in neutral alt appearance
*/
}
.mds .mds-neutral--alt__on-background-color {
color: var(--mds_brand_appearance_neutral_alt_on-background-color);
}
.mds .mds-neutral__border-color {
/*
@name: mds-neutral__border-color
@category: Colors
@usage:
Use mds-neutral__border-color class to get the neutral color for border.
@example:
border color in neutral appearance
*/
}
.mds .mds-neutral__border-color {
border-color: var(--mds_brand_appearance_neutral_default_border-color);
}
.mds .mds-neutral--weakest__border-color {
/*
@name: mds-neutral--weakest__border-color
@category: Colors
@usage:
Use mds-neutral--weakest__border-color class to get the neutral weakest color for border.
@example:
border color in neutral weakest appearance
*/
}
.mds .mds-neutral--weakest__border-color {
border-color: var(--mds_brand_appearance_neutral_weakest_border-color);
}
.mds .mds-neutral--weak__border-color {
/*
@name: mds-neutral--weak__border-color
@category: Colors
@usage:
Use mds-neutral--weak__border-color class to get the neutral weak color for border.
@example:
border color in neutral weak appearance
*/
}
.mds .mds-neutral--weak__border-color {
border-color: var(--mds_brand_appearance_neutral_weak_border-color);
}
.mds .mds-neutral--strong__border-color {
/*
@name: mds-neutral--strong__border-color
@category: Colors
@usage:
Use mds-neutral--strong__border-color class to get the neutral strong color for border.
@example:
border color in neutral strong appearance
*/
}
.mds .mds-neutral--strong__border-color {
border-color: var(--mds_brand_appearance_neutral_strong_border-color);
}
.mds .mds-neutral--strongest__border-color {
/*
@name: mds-neutral--strongest__border-color
@category: Colors
@usage:
Use mds-neutral--strongest__border-color class to get the neutral strongest color for border.
@example:
border color in neutral strongest appearance
*/
}
.mds .mds-neutral--strongest__border-color {
border-color: var(--mds_brand_appearance_neutral_strongest_border-color);
}
.mds .mds-neutral--inverse__border-color {
/*
@name: mds-neutral--inverse__border-color
@category: Colors
@usage:
Use mds-neutral--inverse__border-color class to get the neutral inverse color for border.
@example:
border color in neutral inverse appearance
*/
}
.mds .mds-neutral--inverse__border-color {
border-color: var(--mds_brand_appearance_neutral_inverse_border-color);
}
.mds .mds-neutral--subtle__border-color {
/*
@name: mds-neutral--subtle__border-color
@category: Colors
@usage:
Use mds-neutral--subtle__border-color class to get the neutral subtle color for border.
@example:
border color in neutral subtle appearance
*/
}
.mds .mds-neutral--subtle__border-color {
border-color: var(--mds_brand_appearance_neutral_subtle_border-color);
}
.mds .mds-neutral--alt__border-color {
/*
@name: mds-neutral--alt__border-color
@category: Colors
@usage:
Use mds-neutral--alt__border-color class to get the neutral alt color for border.
@example:
border color in neutral alt appearance
*/
}
.mds .mds-neutral--alt__border-color {
border-color: var(--mds_brand_appearance_neutral_alt_border-color);
}
.mds a.mds-neutral__text-color,
.mds a.mds-neutral__text-color:active,
.mds a.mds-neutral__text-color:visited {
/*
@name: mds-neutral__text-color
@category: Hyperlink
@usage:
Use mds-neutral__text-color class to get hyperlink to have the neutral color.
@example:
text color in neutral appearance
*/
}
.mds a.mds-neutral__text-color,
.mds a.mds-neutral__text-color:active,
.mds a.mds-neutral__text-color:visited {
color: var(--mds_brand_appearance_neutral_default_text-color);
}
.mds a.mds-neutral--weakest__text-color,
.mds a.mds-neutral--weakest__text-color:active,
.mds a.mds-neutral--weakest__text-color:visited {
/*
@name: mds-neutral--weakest__text-color
@category: Hyperlink
@usage:
Use mds-neutral--weakest__text-color class to get hyperlink to have the neutral weakest color.
@example:
text color in neutral weakest appearance
*/
}
.mds a.mds-neutral--weakest__text-color,
.mds a.mds-neutral--weakest__text-color:active,
.mds a.mds-neutral--weakest__text-color:visited {
color: var(--mds_brand_appearance_neutral_weakest_text-color);
}
.mds a.mds-neutral--weak__text-color,
.mds a.mds-neutral--weak__text-color:active,
.mds a.mds-neutral--weak__text-color:visited {
/*
@name: mds-neutral--weak__text-color
@category: Hyperlink
@usage:
Use mds-neutral--weak__text-color class to get hyperlink to have the neutral weak color.
@example:
text color in neutral weak appearance
*/
}
.mds a.mds-neutral--weak__text-color,
.mds a.mds-neutral--weak__text-color:active,
.mds a.mds-neutral--weak__text-color:visited {
color: var(--mds_brand_appearance_neutral_weak_text-color);
}
.mds a.mds-neutral--strong__text-color,
.mds a.mds-neutral--strong__text-color:active,
.mds a.mds-neutral--strong__text-color:visited {
/*
@name: mds-neutral--strong__text-color
@category: Hyperlink
@usage:
Use mds-neutral--strong__text-color class to get hyperlink to have the neutral strong color.
@example:
text color in neutral strong appearance
*/
}
.mds a.mds-neutral--strong__text-color,
.mds a.mds-neutral--strong__text-color:active,
.mds a.mds-neutral--strong__text-color:visited {
color: var(--mds_brand_appearance_neutral_strong_text-color);
}
.mds a.mds-neutral--strongest__text-color,
.mds a.mds-neutral--strongest__text-color:active,
.mds a.mds-neutral--strongest__text-color:visited {
/*
@name: mds-neutral--strongest__text-color
@category: Hyperlink
@usage:
Use mds-neutral--strongest__text-color class to get hyperlink to have the neutral strongest color.
@example:
text color in neutral strongest appearance
*/
}
.mds a.mds-neutral--strongest__text-color,
.mds a.mds-neutral--strongest__text-color:active,
.mds a.mds-neutral--strongest__text-color:visited {
color: var(--mds_brand_appearance_neutral_strongest_text-color);
}
.mds a.mds-neutral--inverse__text-color,
.mds a.mds-neutral--inverse__text-color:active,
.mds a.mds-neutral--inverse__text-color:visited {
/*
@name: mds-neutral--inverse__text-color
@category: Hyperlink
@usage:
Use mds-neutral--inverse__text-color class to get hyperlink to have the neutral inverse color.
@example:
text color in neutral inverse appearance
*/
}
.mds a.mds-neutral--inverse__text-color,
.mds a.mds-neutral--inverse__text-color:active,
.mds a.mds-neutral--inverse__text-color:visited {
color: var(--mds_brand_appearance_neutral_inverse_text-color);
}
.mds a.mds-neutral--subtle__text-color,
.mds a.mds-neutral--subtle__text-color:active,
.mds a.mds-neutral--subtle__text-color:visited {
/*
@name: mds-neutral--subtle__text-color
@category: Hyperlink
@usage:
Use mds-neutral--subtle__text-color class to get hyperlink to have the neutral subtle color.
@example:
text color in neutral subtle appearance
*/
}
.mds a.mds-neutral--subtle__text-color,
.mds a.mds-neutral--subtle__text-color:active,
.mds a.mds-neutral--subtle__text-color:visited {
color: var(--mds_brand_appearance_neutral_subtle_text-color);
}
.mds a.mds-neutral--alt__text-color,
.mds a.mds-neutral--alt__text-color:active,
.mds a.mds-neutral--alt__text-color:visited {
/*
@name: mds-neutral--alt__text-color
@category: Hyperlink
@usage:
Use mds-neutral--alt__text-color class to get hyperlink to have the neutral alt color.
@example:
text color in neutral alt appearance
*/
}
.mds a.mds-neutral--alt__text-color,
.mds a.mds-neutral--alt__text-color:active,
.mds a.mds-neutral--alt__text-color:visited {
color: var(--mds_brand_appearance_neutral_alt_text-color);
}
.mds .mds-primary__text-color {
/*
@name: mds-primary__text-color
@category: Colors
@usage:
Use mds-primary__text-color class to get the primary color for text.
@example:
text color in primary appearance
*/
}
.mds .mds-primary__text-color {
color: var(--mds_brand_appearance_primary_default_text-color);
}
.mds .mds-primary--weak__text-color {
/*
@name: mds-primary--weak__text-color
@category: Colors
@usage:
Use mds-primary--weak__text-color class to get the primary weak color for text.
@example:
text color in primary weak appearance
*/
}
.mds .mds-primary--weak__text-color {
color: var(--mds_brand_appearance_primary_weak_text-color);
}
.mds .mds-primary--subtle__text-color {
/*
@name: mds-primary--subtle__text-color
@category: Colors
@usage:
Use mds-primary--subtle__text-color class to get the primary subtle color for text.
@example:
text color in primary subtle appearance
*/
}
.mds .mds-primary--subtle__text-color {
color: var(--mds_brand_appearance_primary_subtle_text-color);
}
.mds .mds-primary__background-color {
/*
@name: mds-primary__background-color
@category: Colors
@usage:
Use mds-primary__background-color class to get the primary color for background.
@example:
background color in primary appearance
*/
}
.mds .mds-primary__background-color {
background-color: var(--mds_brand_appearance_primary_default_background-color);
}
.mds .mds-primary--weak__background-color {
/*
@name: mds-primary--weak__background-color
@category: Colors
@usage:
Use mds-primary--weak__background-color class to get the primary weak color for background.
@example:
background color in primary weak appearance
*/
}
.mds .mds-primary--weak__background-color {
background-color: var(--mds_brand_appearance_primary_weak_background-color);
}
.mds .mds-primary--subtle__background-color {
/*
@name: mds-primary--subtle__background-color
@category: Colors
@usage:
Use mds-primary--subtle__background-color class to get the primary subtle color for background.
@example:
background color in primary subtle appearance
*/
}
.mds .mds-primary--subtle__background-color {
background-color: var(--mds_brand_appearance_primary_subtle_background-color);
}
.mds .mds-primary__on-background-color {
/*
@name: mds-primary__on-background-color
@category: Colors
@usage:
Use mds-primary__on-background-color class to get the primary color for on-background.
@example:
on-background color in primary appearance
*/
}
.mds .mds-primary__on-background-color {
color: var(--mds_brand_appearance_primary_default_on-background-color);
}
.mds .mds-primary--weak__on-background-color {
/*
@name: mds-primary--weak__on-background-color
@category: Colors
@usage:
Use mds-primary--weak__on-background-color class to get the primary weak color for on-background.
@example:
on-background color in primary weak appearance
*/
}
.mds .mds-primary--weak__on-background-color {
color: var(--mds_brand_appearance_primary_weak_on-background-color);
}
.mds .mds-primary--subtle__on-background-color {
/*
@name: mds-primary--subtle__on-background-color
@category: Colors
@usage:
Use mds-primary--subtle__on-background-color class to get the primary subtle color for on-background.
@example:
on-background color in primary subtle appearance
*/
}
.mds .mds-primary--subtle__on-background-color {
color: var(--mds_brand_appearance_primary_subtle_on-background-color);
}
.mds .mds-primary__border-color {
/*
@name: mds-primary__border-color
@category: Colors
@usage:
Use mds-primary__border-color class to get the primary color for border.
@example:
border color in primary appearance
*/
}
.mds .mds-primary__border-color {
border-color: var(--mds_brand_appearance_primary_default_border-color);
}
.mds .mds-primary--weak__border-color {
/*
@name: mds-primary--weak__border-color
@category: Colors
@usage:
Use mds-primary--weak__border-color class to get the primary weak color for border.
@example:
border color in primary weak appearance
*/
}
.mds .mds-primary--weak__border-color {
border-color: var(--mds_brand_appearance_primary_weak_border-color);
}
.mds .mds-primary--subtle__border-color {
/*
@name: mds-primary--subtle__border-color
@category: Colors
@usage:
Use mds-primary--subtle__border-color class to get the primary subtle color for border.
@example:
border color in primary subtle appearance
*/
}
.mds .mds-primary--subtle__border-color {
border-color: var(--mds_brand_appearance_primary_subtle_border-color);
}
.mds a.mds-primary__text-color,
.mds a.mds-primary__text-color:active,
.mds a.mds-primary__text-color:visited {
/*
@name: mds-primary__text-color
@category: Hyperlink
@usage:
Use mds-primary__text-color class to get hyperlink to have the primary color.
@example:
text color in primary appearance
*/
}
.mds a.mds-primary__text-color,
.mds a.mds-primary__text-color:active,
.mds a.mds-primary__text-color:visited {
color: var(--mds_brand_appearance_primary_default_text-color);
}
.mds a.mds-primary--weak__text-color,
.mds a.mds-primary--weak__text-color:active,
.mds a.mds-primary--weak__text-color:visited {
/*
@name: mds-primary--weak__text-color
@category: Hyperlink
@usage:
Use mds-primary--weak__text-color class to get hyperlink to have the primary weak color.
@example:
text color in primary weak appearance
*/
}
.mds a.mds-primary--weak__text-color,
.mds a.mds-primary--weak__text-color:active,
.mds a.mds-primary--weak__text-color:visited {
color: var(--mds_brand_appearance_primary_weak_text-color);
}
.mds a.mds-primary--subtle__text-color,
.mds a.mds-primary--subtle__text-color:active,
.mds a.mds-primary--subtle__text-color:visited {
/*
@name: mds-primary--subtle__text-color
@category: Hyperlink
@usage:
Use mds-primary--subtle__text-color class to get hyperlink to have the primary subtle color.
@example:
text color in primary subtle appearance
*/
}
.mds a.mds-primary--subtle__text-color,
.mds a.mds-primary--subtle__text-color:active,
.mds a.mds-primary--subtle__text-color:visited {
color: var(--mds_brand_appearance_primary_subtle_text-color);
}
.mds .mds-secondary__text-color {
/*
@name: mds-secondary__text-color
@category: Colors
@usage:
Use mds-secondary__text-color class to get the secondary color for text.
@example:
text color in secondary appearance
*/
}
.mds .mds-secondary__text-color {
color: var(--mds_brand_appearance_secondary_default_text-color);
}
.mds .mds-secondary--weak__text-color {
/*
@name: mds-secondary--weak__text-color
@category: Colors
@usage:
Use mds-secondary--weak__text-color class to get the secondary weak color for text.
@example:
text color in secondary weak appearance
*/
}
.mds .mds-secondary--weak__text-color {
color: var(--mds_brand_appearance_secondary_weak_text-color);
}
.mds .mds-secondary--subtle__text-color {
/*
@name: mds-secondary--subtle__text-color
@category: Colors
@usage:
Use mds-secondary--subtle__text-color class to get the secondary subtle color for text.
@example:
text color in secondary subtle appearance
*/
}
.mds .mds-secondary--subtle__text-color {
color: var(--mds_brand_appearance_secondary_subtle_text-color);
}
.mds .mds-secondary__background-color {
/*
@name: mds-secondary__background-color
@category: Colors
@usage:
Use mds-secondary__background-color class to get the secondary color for background.
@example:
background color in secondary appearance
*/
}
.mds .mds-secondary__background-color {
background-color: var(--mds_brand_appearance_secondary_default_background-color);
}
.mds .mds-secondary--weak__background-color {
/*
@name: mds-secondary--weak__background-color
@category: Colors
@usage:
Use mds-secondary--weak__background-color class to get the secondary weak color for background.
@example:
background color in secondary weak appearance
*/
}
.mds .mds-secondary--weak__background-color {
background-color: var(--mds_brand_appearance_secondary_weak_background-color);
}
.mds .mds-secondary--subtle__background-color {
/*
@name: mds-secondary--subtle__background-color
@category: Colors
@usage:
Use mds-secondary--subtle__background-color class to get the secondary subtle color for background.
@example:
background color in secondary subtle appearance
*/
}
.mds .mds-secondary--subtle__background-color {
background-color: var(--mds_brand_appearance_secondary_subtle_background-color);
}
.mds .mds-secondary__on-background-color {
/*
@name: mds-secondary__on-background-color
@category: Colors
@usage:
Use mds-secondary__on-background-color class to get the secondary color for on-background.
@example:
on-background color in secondary appearance
*/
}
.mds .mds-secondary__on-background-color {
color: var(--mds_brand_appearance_secondary_default_on-background-color);
}
.mds .mds-secondary--weak__on-background-color {
/*
@name: mds-secondary--weak__on-background-color
@category: Colors
@usage:
Use mds-secondary--weak__on-background-color class to get the secondary weak color for on-background.
@example:
on-background color in secondary weak appearance
*/
}
.mds .mds-secondary--weak__on-background-color {
color: var(--mds_brand_appearance_secondary_weak_on-background-color);
}
.mds .mds-secondary--subtle__on-background-color {
/*
@name: mds-secondary--subtle__on-background-color
@category: Colors
@usage:
Use mds-secondary--subtle__on-background-color class to get the secondary subtle color for on-background.
@example:
on-background color in secondary subtle appearance
*/
}
.mds .mds-secondary--subtle__on-background-color {
color: var(--mds_brand_appearance_secondary_subtle_on-background-color);
}
.mds .mds-secondary__border-color {
/*
@name: mds-secondary__border-color
@category: Colors
@usage:
Use mds-secondary__border-color class to get the secondary color for border.
@example:
border color in secondary appearance
*/
}
.mds .mds-secondary__border-color {
border-color: var(--mds_brand_appearance_secondary_default_border-color);
}
.mds .mds-secondary--weak__border-color {
/*
@name: mds-secondary--weak__border-color
@category: Colors
@usage:
Use mds-secondary--weak__border-color class to get the secondary weak color for border.
@example:
border color in secondary weak appearance
*/
}
.mds .mds-secondary--weak__border-color {
border-color: var(--mds_brand_appearance_secondary_weak_border-color);
}
.mds .mds-secondary--subtle__border-color {
/*
@name: mds-secondary--subtle__border-color
@category: Colors
@usage:
Use mds-secondary--subtle__border-color class to get the secondary subtle color for border.
@example:
border color in secondary subtle appearance
*/
}
.mds .mds-secondary--subtle__border-color {
border-color: var(--mds_brand_appearance_secondary_subtle_border-color);
}
.mds a.mds-secondary__text-color,
.mds a.mds-secondary__text-color:active,
.mds a.mds-secondary__text-color:visited {
/*
@name: mds-secondary__text-color
@category: Hyperlink
@usage:
Use mds-secondary__text-color class to get hyperlink to have the secondary color.
@example:
text color in secondary appearance
*/
}
.mds a.mds-secondary__text-color,
.mds a.mds-secondary__text-color:active,
.mds a.mds-secondary__text-color:visited {
color: var(--mds_brand_appearance_secondary_default_text-color);
}
.mds a.mds-secondary--weak__text-color,
.mds a.mds-secondary--weak__text-color:active,
.mds a.mds-secondary--weak__text-color:visited {
/*
@name: mds-secondary--weak__text-color
@category: Hyperlink
@usage:
Use mds-secondary--weak__text-color class to get hyperlink to have the secondary weak color.
@example:
text color in secondary weak appearance
*/
}
.mds a.mds-secondary--weak__text-color,
.mds a.mds-secondary--weak__text-color:active,
.mds a.mds-secondary--weak__text-color:visited {
color: var(--mds_brand_appearance_secondary_weak_text-color);
}
.mds a.mds-secondary--subtle__text-color,
.mds a.mds-secondary--subtle__text-color:active,
.mds a.mds-secondary--subtle__text-color:visited {
/*
@name: mds-secondary--subtle__text-color
@category: Hyperlink
@usage:
Use mds-secondary--subtle__text-color class to get hyperlink to have the secondary subtle color.
@example:
text color in secondary subtle appearance
*/
}
.mds a.mds-secondary--subtle__text-color,
.mds a.mds-secondary--subtle__text-color:active,
.mds a.mds-secondary--subtle__text-color:visited {
color: var(--mds_brand_appearance_secondary_subtle_text-color);
}
.mds .mds-info__text-color {
/*
@name: mds-info__text-color
@category: Colors
@usage:
Use mds-info__text-color class to get the info color for text.
@example:
text color in info appearance
*/
}
.mds .mds-info__text-color {
color: var(--mds_brand_appearance_info_default_text-color);
}
.mds .mds-info--weak__text-color {
/*
@name: mds-info--weak__text-color
@category: Colors
@usage:
Use mds-info--weak__text-color class to get the info weak color for text.
@example:
text color in info weak appearance
*/
}
.mds .mds-info--weak__text-color {
color: var(--mds_brand_appearance_info_weak_text-color);
}
.mds .mds-info--subtle__text-color {
/*
@name: mds-info--subtle__text-color
@category: Colors
@usage:
Use mds-info--subtle__text-color class to get the info subtle color for text.
@example:
text color in info subtle appearance
*/
}
.mds .mds-info--subtle__text-color {
color: var(--mds_brand_appearance_info_subtle_text-color);
}
.mds .mds-info__background-color {
/*
@name: mds-info__background-color
@category: Colors
@usage:
Use mds-info__background-color class to get the info color for background.
@example:
background color in info appearance
*/
}
.mds .mds-info__background-color {
background-color: var(--mds_brand_appearance_info_default_background-color);
}
.mds .mds-info--weak__background-color {
/*
@name: mds-info--weak__background-color
@category: Colors
@usage:
Use mds-info--weak__background-color class to get the info weak color for background.
@example:
background color in info weak appearance
*/
}
.mds .mds-info--weak__background-color {
background-color: var(--mds_brand_appearance_info_weak_background-color);
}
.mds .mds-info--subtle__background-color {
/*
@name: mds-info--subtle__background-color
@category: Colors
@usage:
Use mds-info--subtle__background-color class to get the info subtle color for background.
@example:
background color in info subtle appearance
*/
}
.mds .mds-info--subtle__background-color {
background-color: var(--mds_brand_appearance_info_subtle_background-color);
}
.mds .mds-info__on-background-color {
/*
@name: mds-info__on-background-color
@category: Colors
@usage:
Use mds-info__on-background-color class to get the info color for on-background.
@example:
on-background color in info appearance
*/
}
.mds .mds-info__on-background-color {
color: var(--mds_brand_appearance_info_default_on-background-color);
}
.mds .mds-info--weak__on-background-color {
/*
@name: mds-info--weak__on-background-color
@category: Colors
@usage:
Use mds-info--weak__on-background-color class to get the info weak color for on-background.
@example:
on-background color in info weak appearance
*/
}
.mds .mds-info--weak__on-background-color {
color: var(--mds_brand_appearance_info_weak_on-background-color);
}
.mds .mds-info--subtle__on-background-color {
/*
@name: mds-info--subtle__on-background-color
@category: Colors
@usage:
Use mds-info--subtle__on-background-color class to get the info subtle color for on-background.
@example:
on-background color in info subtle appearance
*/
}
.mds .mds-info--subtle__on-background-color {
color: var(--mds_brand_appearance_info_subtle_on-background-color);
}
.mds .mds-info__border-color {
/*
@name: mds-info__border-color
@category: Colors
@usage:
Use mds-info__border-color class to get the info color for border.
@example:
border color in info appearance
*/
}
.mds .mds-info__border-color {
border-color: var(--mds_brand_appearance_info_default_border-color);
}
.mds .mds-info--weak__border-color {
/*
@name: mds-info--weak__border-color
@category: Colors
@usage:
Use mds-info--weak__border-color class to get the info weak color for border.
@example:
border color in info weak appearance
*/
}
.mds .mds-info--weak__border-color {
border-color: var(--mds_brand_appearance_info_weak_border-color);
}
.mds .mds-info--subtle__border-color {
/*
@name: mds-info--subtle__border-color
@category: Colors
@usage:
Use mds-info--subtle__border-color class to get the info subtle color for border.
@example:
border color in info subtle appearance
*/
}
.mds .mds-info--subtle__border-color {
border-color: var(--mds_brand_appearance_info_subtle_border-color);
}
.mds a.mds-info__text-color,
.mds a.mds-info__text-color:active,
.mds a.mds-info__text-color:visited {
/*
@name: mds-info__text-color
@category: Hyperlink
@usage:
Use mds-info__text-color class to get hyperlink to have the info color.
@example:
text color in info appearance
*/
}
.mds a.mds-info__text-color,
.mds a.mds-info__text-color:active,
.mds a.mds-info__text-color:visited {
color: var(--mds_brand_appearance_info_default_text-color);
}
.mds a.mds-info--weak__text-color,
.mds a.mds-info--weak__text-color:active,
.mds a.mds-info--weak__text-color:visited {
/*
@name: mds-info--weak__text-color
@category: Hyperlink
@usage:
Use mds-info--weak__text-color class to get hyperlink to have the info weak color.
@example:
text color in info weak appearance
*/
}
.mds a.mds-info--weak__text-color,
.mds a.mds-info--weak__text-color:active,
.mds a.mds-info--weak__text-color:visited {
color: var(--mds_brand_appearance_info_weak_text-color);
}
.mds a.mds-info--subtle__text-color,
.mds a.mds-info--subtle__text-color:active,
.mds a.mds-info--subtle__text-color:visited {
/*
@name: mds-info--subtle__text-color
@category: Hyperlink
@usage:
Use mds-info--subtle__text-color class to get hyperlink to have the info subtle color.
@example:
text color in info subtle appearance
*/
}
.mds a.mds-info--subtle__text-color,
.mds a.mds-info--subtle__text-color:active,
.mds a.mds-info--subtle__text-color:visited {
color: var(--mds_brand_appearance_info_subtle_text-color);
}
.mds .mds-error__text-color {
/*
@name: mds-error__text-color
@category: Colors
@usage:
Use mds-error__text-color class to get the error color for text.
@example:
text color in error appearance
*/
}
.mds .mds-error__text-color {
color: var(--mds_brand_appearance_error_default_text-color);
}
.mds .mds-error--weak__text-color {
/*
@name: mds-error--weak__text-color
@category: Colors
@usage:
Use mds-error--weak__text-color class to get the error weak color for text.
@example:
text color in error weak appearance
*/
}
.mds .mds-error--weak__text-color {
color: var(--mds_brand_appearance_error_weak_text-color);
}
.mds .mds-error--subtle__text-color {
/*
@name: mds-error--subtle__text-color
@category: Colors
@usage:
Use mds-error--subtle__text-color class to get the error subtle color for text.
@example:
text color in error subtle appearance
*/
}
.mds .mds-error--subtle__text-color {
color: var(--mds_brand_appearance_error_subtle_text-color);
}
.mds .mds-error__background-color {
/*
@name: mds-error__background-color
@category: Colors
@usage:
Use mds-error__background-color class to get the error color for background.
@example:
background color in error appearance
*/
}
.mds .mds-error__background-color {
background-color: var(--mds_brand_appearance_error_default_background-color);
}
.mds .mds-error--weak__background-color {
/*
@name: mds-error--weak__background-color
@category: Colors
@usage:
Use mds-error--weak__background-color class to get the error weak color for background.
@example:
background color in error weak appearance
*/
}
.mds .mds-error--weak__background-color {
background-color: var(--mds_brand_appearance_error_weak_background-color);
}
.mds .mds-error--subtle__background-color {
/*
@name: mds-error--subtle__background-color
@category: Colors
@usage:
Use mds-error--subtle__background-color class to get the error subtle color for background.
@example:
background color in error subtle appearance
*/
}
.mds .mds-error--subtle__background-color {
background-color: var(--mds_brand_appearance_error_subtle_background-color);
}
.mds .mds-error__on-background-color {
/*
@name: mds-error__on-background-color
@category: Colors
@usage:
Use mds-error__on-background-color class to get the error color for on-background.
@example:
on-background color in error appearance
*/
}
.mds .mds-error__on-background-color {
color: var(--mds_brand_appearance_error_default_on-background-color);
}
.mds .mds-error--weak__on-background-color {
/*
@name: mds-error--weak__on-background-color
@category: Colors
@usage:
Use mds-error--weak__on-background-color class to get the error weak color for on-background.
@example:
on-background color in error weak appearance
*/
}
.mds .mds-error--weak__on-background-color {
color: var(--mds_brand_appearance_error_weak_on-background-color);
}
.mds .mds-error--subtle__on-background-color {
/*
@name: mds-error--subtle__on-background-color
@category: Colors
@usage:
Use mds-error--subtle__on-background-color class to get the error subtle color for on-background.
@example:
on-background color in error subtle appearance
*/
}
.mds .mds-error--subtle__on-background-color {
color: var(--mds_brand_appearance_error_subtle_on-background-color);
}
.mds .mds-error__border-color {
/*
@name: mds-error__border-color
@category: Colors
@usage:
Use mds-error__border-color class to get the error color for border.
@example:
border color in error appearance
*/
}
.mds .mds-error__border-color {
border-color: var(--mds_brand_appearance_error_default_border-color);
}
.mds .mds-error--weak__border-color {
/*
@name: mds-error--weak__border-color
@category: Colors
@usage:
Use mds-error--weak__border-color class to get the error weak color for border.
@example:
border color in error weak appearance
*/
}
.mds .mds-error--weak__border-color {
border-color: var(--mds_brand_appearance_error_weak_border-color);
}
.mds .mds-error--subtle__border-color {
/*
@name: mds-error--subtle__border-color
@category: Colors
@usage:
Use mds-error--subtle__border-color class to get the error subtle color for border.
@example:
border color in error subtle appearance
*/
}
.mds .mds-error--subtle__border-color {
border-color: var(--mds_brand_appearance_error_subtle_border-color);
}
.mds a.mds-error__text-color,
.mds a.mds-error__text-color:active,
.mds a.mds-error__text-color:visited {
/*
@name: mds-error__text-color
@category: Hyperlink
@usage:
Use mds-error__text-color class to get hyperlink to have the error color.
@example:
text color in error appearance
*/
}
.mds a.mds-error__text-color,
.mds a.mds-error__text-color:active,
.mds a.mds-error__text-color:visited {
color: var(--mds_brand_appearance_error_default_text-color);
}
.mds a.mds-error--weak__text-color,
.mds a.mds-error--weak__text-color:active,
.mds a.mds-error--weak__text-color:visited {
/*
@name: mds-error--weak__text-color
@category: Hyperlink
@usage:
Use mds-error--weak__text-color class to get hyperlink to have the error weak color.
@example:
text color in error weak appearance
*/
}
.mds a.mds-error--weak__text-color,
.mds a.mds-error--weak__text-color:active,
.mds a.mds-error--weak__text-color:visited {
color: var(--mds_brand_appearance_error_weak_text-color);
}
.mds a.mds-error--subtle__text-color,
.mds a.mds-error--subtle__text-color:active,
.mds a.mds-error--subtle__text-color:visited {
/*
@name: mds-error--subtle__text-color
@category: Hyperlink
@usage:
Use mds-error--subtle__text-color class to get hyperlink to have the error subtle color.
@example:
text color in error subtle appearance
*/
}
.mds a.mds-error--subtle__text-color,
.mds a.mds-error--subtle__text-color:active,
.mds a.mds-error--subtle__text-color:visited {
color: var(--mds_brand_appearance_error_subtle_text-color);
}
.mds .mds-warning__text-color {
/*
@name: mds-warning__text-color
@category: Colors
@usage:
Use mds-warning__text-color class to get the warning color for text.
@example:
text color in warning appearance
*/
}
.mds .mds-warning__text-color {
color: var(--mds_brand_appearance_warning_default_text-color);
}
.mds .mds-warning--weak__text-color {
/*
@name: mds-warning--weak__text-color
@category: Colors
@usage:
Use mds-warning--weak__text-color class to get the warning weak color for text.
@example:
text color in warning weak appearance
*/
}
.mds .mds-warning--weak__text-color {
color: var(--mds_brand_appearance_warning_weak_text-color);
}
.mds .mds-warning--subtle__text-color {
/*
@name: mds-warning--subtle__text-color
@category: Colors
@usage:
Use mds-warning--subtle__text-color class to get the warning subtle color for text.
@example:
text color in warning subtle appearance
*/
}
.mds .mds-warning--subtle__text-color {
color: var(--mds_brand_appearance_warning_subtle_text-color);
}
.mds .mds-warning__background-color {
/*
@name: mds-warning__background-color
@category: Colors
@usage:
Use mds-warning__background-color class to get the warning color for background.
@example:
background color in warning appearance
*/
}
.mds .mds-warning__background-color {
background-color: var(--mds_brand_appearance_warning_default_background-color);
}
.mds .mds-warning--weak__background-color {
/*
@name: mds-warning--weak__background-color
@category: Colors
@usage:
Use mds-warning--weak__background-color class to get the warning weak color for background.
@example:
background color in warning weak appearance
*/
}
.mds .mds-warning--weak__background-color {
background-color: var(--mds_brand_appearance_warning_weak_background-color);
}
.mds .mds-warning--subtle__background-color {
/*
@name: mds-warning--subtle__background-color
@category: Colors
@usage:
Use mds-warning--subtle__background-color class to get the warning subtle color for background.
@example:
background color in warning subtle appearance
*/
}
.mds .mds-warning--subtle__background-color {
background-color: var(--mds_brand_appearance_warning_subtle_background-color);
}
.mds .mds-warning__on-background-color {
/*
@name: mds-warning__on-background-color
@category: Colors
@usage:
Use mds-warning__on-background-color class to get the warning color for on-background.
@example:
on-background color in warning appearance
*/
}
.mds .mds-warning__on-background-color {
color: var(--mds_brand_appearance_warning_default_on-background-color);
}
.mds .mds-warning--weak__on-background-color {
/*
@name: mds-warning--weak__on-background-color
@category: Colors
@usage:
Use mds-warning--weak__on-background-color class to get the warning weak color for on-background.
@example:
on-background color in warning weak appearance
*/
}
.mds .mds-warning--weak__on-background-color {
color: var(--mds_brand_appearance_warning_weak_on-background-color);
}
.mds .mds-warning--subtle__on-background-color {
/*
@name: mds-warning--subtle__on-background-color
@category: Colors
@usage:
Use mds-warning--subtle__on-background-color class to get the warning subtle color for on-background.
@example:
on-background color in warning subtle appearance
*/
}
.mds .mds-warning--subtle__on-background-color {
color: var(--mds_brand_appearance_warning_subtle_on-background-color);
}
.mds .mds-warning__border-color {
/*
@name: mds-warning__border-color
@category: Colors
@usage:
Use mds-warning__border-color class to get the warning color for border.
@example:
border color in warning appearance
*/
}
.mds .mds-warning__border-color {
border-color: var(--mds_brand_appearance_warning_default_border-color);
}
.mds .mds-warning--weak__border-color {
/*
@name: mds-warning--weak__border-color
@category: Colors
@usage:
Use mds-warning--weak__border-color class to get the warning weak color for border.
@example:
border color in warning weak appearance
*/
}
.mds .mds-warning--weak__border-color {
border-color: var(--mds_brand_appearance_warning_weak_border-color);
}
.mds .mds-warning--subtle__border-color {
/*
@name: mds-warning--subtle__border-color
@category: Colors
@usage:
Use mds-warning--subtle__border-color class to get the warning subtle color for border.
@example:
border color in warning subtle appearance
*/
}
.mds .mds-warning--subtle__border-color {
border-color: var(--mds_brand_appearance_warning_subtle_border-color);
}
.mds a.mds-warning__text-color,
.mds a.mds-warning__text-color:active,
.mds a.mds-warning__text-color:visited {
/*
@name: mds-warning__text-color
@category: Hyperlink
@usage:
Use mds-warning__text-color class to get hyperlink to have the warning color.
@example:
text color in warning appearance
*/
}
.mds a.mds-warning__text-color,
.mds a.mds-warning__text-color:active,
.mds a.mds-warning__text-color:visited {
color: var(--mds_brand_appearance_warning_default_text-color);
}
.mds a.mds-warning--weak__text-color,
.mds a.mds-warning--weak__text-color:active,
.mds a.mds-warning--weak__text-color:visited {
/*
@name: mds-warning--weak__text-color
@category: Hyperlink
@usage:
Use mds-warning--weak__text-color class to get hyperlink to have the warning weak color.
@example:
text color in warning weak appearance
*/
}
.mds a.mds-warning--weak__text-color,
.mds a.mds-warning--weak__text-color:active,
.mds a.mds-warning--weak__text-color:visited {
color: var(--mds_brand_appearance_warning_weak_text-color);
}
.mds a.mds-warning--subtle__text-color,
.mds a.mds-warning--subtle__text-color:active,
.mds a.mds-warning--subtle__text-color:visited {
/*
@name: mds-warning--subtle__text-color
@category: Hyperlink
@usage:
Use mds-warning--subtle__text-color class to get hyperlink to have the warning subtle color.
@example:
text color in warning subtle appearance
*/
}
.mds a.mds-warning--subtle__text-color,
.mds a.mds-warning--subtle__text-color:active,
.mds a.mds-warning--subtle__text-color:visited {
color: var(--mds_brand_appearance_warning_subtle_text-color);
}
.mds .mds-success__text-color {
/*
@name: mds-success__text-color
@category: Colors
@usage:
Use mds-success__text-color class to get the success color for text.
@example:
text color in success appearance
*/
}
.mds .mds-success__text-color {
color: var(--mds_brand_appearance_success_default_text-color);
}
.mds .mds-success--weak__text-color {
/*
@name: mds-success--weak__text-color
@category: Colors
@usage:
Use mds-success--weak__text-color class to get the success weak color for text.
@example:
text color in success weak appearance
*/
}
.mds .mds-success--weak__text-color {
color: var(--mds_brand_appearance_success_weak_text-color);
}
.mds .mds-success--subtle__text-color {
/*
@name: mds-success--subtle__text-color
@category: Colors
@usage:
Use mds-success--subtle__text-color class to get the success subtle color for text.
@example:
text color in success subtle appearance
*/
}
.mds .mds-success--subtle__text-color {
color: var(--mds_brand_appearance_success_subtle_text-color);
}
.mds .mds-success__background-color {
/*
@name: mds-success__background-color
@category: Colors
@usage:
Use mds-success__background-color class to get the success color for background.
@example:
background color in success appearance
*/
}
.mds .mds-success__background-color {
background-color: var(--mds_brand_appearance_success_default_background-color);
}
.mds .mds-success--weak__background-color {
/*
@name: mds-success--weak__background-color
@category: Colors
@usage:
Use mds-success--weak__background-color class to get the success weak color for background.
@example:
background color in success weak appearance
*/
}
.mds .mds-success--weak__background-color {
background-color: var(--mds_brand_appearance_success_weak_background-color);
}
.mds .mds-success--subtle__background-color {
/*
@name: mds-success--subtle__background-color
@category: Colors
@usage:
Use mds-success--subtle__background-color class to get the success subtle color for background.
@example:
background color in success subtle appearance
*/
}
.mds .mds-success--subtle__background-color {
background-color: var(--mds_brand_appearance_success_subtle_background-color);
}
.mds .mds-success__on-background-color {
/*
@name: mds-success__on-background-color
@category: Colors
@usage:
Use mds-success__on-background-color class to get the success color for on-background.
@example:
on-background color in success appearance
*/
}
.mds .mds-success__on-background-color {
color: var(--mds_brand_appearance_success_default_on-background-color);
}
.mds .mds-success--weak__on-background-color {
/*
@name: mds-success--weak__on-background-color
@category: Colors
@usage:
Use mds-success--weak__on-background-color class to get the success weak color for on-background.
@example:
on-background color in success weak appearance
*/
}
.mds .mds-success--weak__on-background-color {
color: var(--mds_brand_appearance_success_weak_on-background-color);
}
.mds .mds-success--subtle__on-background-color {
/*
@name: mds-success--subtle__on-background-color
@category: Colors
@usage:
Use mds-success--subtle__on-background-color class to get the success subtle color for on-background.
@example:
on-background color in success subtle appearance
*/
}
.mds .mds-success--subtle__on-background-color {
color: var(--mds_brand_appearance_success_subtle_on-background-color);
}
.mds .mds-success__border-color {
/*
@name: mds-success__border-color
@category: Colors
@usage:
Use mds-success__border-color class to get the success color for border.
@example:
border color in success appearance
*/
}
.mds .mds-success__border-color {
border-color: var(--mds_brand_appearance_success_default_border-color);
}
.mds .mds-success--weak__border-color {
/*
@name: mds-success--weak__border-color
@category: Colors
@usage:
Use mds-success--weak__border-color class to get the success weak color for border.
@example:
border color in success weak appearance
*/
}
.mds .mds-success--weak__border-color {
border-color: var(--mds_brand_appearance_success_weak_border-color);
}
.mds .mds-success--subtle__border-color {
/*
@name: mds-success--subtle__border-color
@category: Colors
@usage:
Use mds-success--subtle__border-color class to get the success subtle color for border.
@example:
border color in success subtle appearance
*/
}
.mds .mds-success--subtle__border-color {
border-color: var(--mds_brand_appearance_success_subtle_border-color);
}
.mds a.mds-success__text-color,
.mds a.mds-success__text-color:active,
.mds a.mds-success__text-color:visited {
/*
@name: mds-success__text-color
@category: Hyperlink
@usage:
Use mds-success__text-color class to get hyperlink to have the success color.
@example:
text color in success appearance
*/
}
.mds a.mds-success__text-color,
.mds a.mds-success__text-color:active,
.mds a.mds-success__text-color:visited {
color: var(--mds_brand_appearance_success_default_text-color);
}
.mds a.mds-success--weak__text-color,
.mds a.mds-success--weak__text-color:active,
.mds a.mds-success--weak__text-color:visited {
/*
@name: mds-success--weak__text-color
@category: Hyperlink
@usage:
Use mds-success--weak__text-color class to get hyperlink to have the success weak color.
@example:
text color in success weak appearance
*/
}
.mds a.mds-success--weak__text-color,
.mds a.mds-success--weak__text-color:active,
.mds a.mds-success--weak__text-color:visited {
color: var(--mds_brand_appearance_success_weak_text-color);
}
.mds a.mds-success--subtle__text-color,
.mds a.mds-success--subtle__text-color:active,
.mds a.mds-success--subtle__text-color:visited {
/*
@name: mds-success--subtle__text-color
@category: Hyperlink
@usage:
Use mds-success--subtle__text-color class to get hyperlink to have the success subtle color.
@example:
text color in success subtle appearance
*/
}
.mds a.mds-success--subtle__text-color,
.mds a.mds-success--subtle__text-color:active,
.mds a.mds-success--subtle__text-color:visited {
color: var(--mds_brand_appearance_success_subtle_text-color);
}
.mds {
/**
* These SASS variables are auto-generated out of their counter-part design-tokens
* during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs
**/
/*
@description:
The building blocks for creating responsive layouts. Layout is divided into three distinct regions: Top Bar, Side Bar, and Page.
It provides a flexible grid system that allows for easy arrangement of content in rows and columns, making it suitable for various screen sizes and orientations.
It includes a set of utility classes for common layout patterns, such as centering content, full-width layouts, and responsive design.
The layout is designed to be modular and reusable, allowing developers to create complex layouts with minimal effort.
It also includes a set of responsive design utilities that adapt the layout based on the viewport size, ensuring a consistent user experience across devices.
@basicExample:
// Basic layout with a top bar, side bar, and main content area
Skip to contentSkip to footer
1
2
3
4
5
6
7
8
9
10
11
12
@advancedExample:
// Advanced layout with top bar, side bar, sticky footer, and main content area in full-width content
Skip to contentSkip to footer
1
2
3
4
5
6
7
8
9
10
11
12
*/
}
.mds .mds-layout {
/*
@name: mds-layout
@category: Layout
@usage:
Use mds-layout class to create a layout with a top bar, side bar, and main content area.
@example:
...
*/
height: 100vh;
width: 100vw;
overflow: hidden;
display: grid;
transition: none;
}
.mds .mds-layout mc-top-bar {
/*
@name: mc-top-bar
@category: Layout
@usage:
Use mc-top-bar component to create a top bar in the layout.
@example:
*/
grid-area: top-bar;
height: 64px;
width: 100%;
background-color: var(--mds_brand_appearance_neutral_default_background-color);
border-bottom: 1px solid var(--mds_brand_appearance_neutral_weak_border-color);
}
@media only screen and (max-width: 1024px) {
.mds .mds-layout mc-top-bar {
padding: 0 16px 0 52px;
}
}
@media only screen and (min-width: 1025px) {
.mds .mds-layout mc-top-bar {
padding: 0 24px 0 60px;
}
}
.mds .mds-layout mc-side-bar {
/*
@name: mc-side-bar
@category: Layout
@usage:
Use mc-side-bar component to create a side bar in the layout.
@example:
*/
grid-area: side-bar;
}
.mds .mds-layout mc-side-bar:not([open]) .mds-tree-nav {
opacity: 0;
}
@media only screen and (max-width: 1024px) {
.mds .mds-layout mc-side-bar {
height: 64px;
left: 0;
position: fixed;
top: 0;
width: 52px;
}
}
@media only screen and (min-width: 1025px) {
.mds .mds-layout mc-side-bar {
width: 100%;
position: relative;
}
}
@media only screen and (min-width: 1025px) {
.mds .mds-layout:has(mc-side-bar:not([open])) {
grid-template-columns: 0 1fr;
}
}
.mds .mds-layout .mds-page {
/*
@name: mds-page
@category: Layout
@usage:
Use mds-page class to create a page area in the layout that contains
- 12 columns grid system in 'md' breakpoint (for 1025px + viewport).
- 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport).
- 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport).
@example:
...
*/
grid-area: page;
overflow-y: auto;
height: auto;
}
.mds .mds-layout .mds-page > .mds-grid {
padding-left: 24px;
padding-right: 24px;
}
@media only screen and (max-width: 1024px) {
.mds .mds-layout .mds-page > .mds-grid {
margin: 24px 0;
}
}
@media only screen and (min-width: 1025px) {
.mds .mds-layout .mds-page > .mds-grid {
margin: 24px auto;
max-width: 1080px;
}
}
.mds .mds-layout .mds-page .mds-grid.mds-full-width {
max-width: none;
}
@media only screen and (min-width: 1025px) {
.mds .mds-layout .mds-page .mds-grid.mds-full-width {
margin: 24px 0;
max-width: none;
}
}
.mds .mds-layout .mds-footer {
/*
@name: mds-footer
@category: Layout
@usage:
Use mds-footer class to create a footer in the layout.
@example:
*/
grid-area: footer;
}
.mds .mds-layout.mds-layout-no-side-bar {
/*
@name: mds-layout-no-side-bar
@category: Layout
@usage:
Use mds-layout-no-side-bar class to create a layout without a side bar.
@example:
...
*/
grid-template-columns: 0 1fr;
}
@media only screen and (max-width: 640px) {
.mds .mds-layout.mds-layout-no-side-bar mc-top-bar {
padding-left: 16px;
}
}
@media only screen and (min-width: 641px) {
.mds .mds-layout.mds-layout-no-side-bar mc-top-bar {
padding-left: 24px;
}
}
@media only screen and (max-width: 1024px) {
.mds .mds-layout {
grid-template-areas: "top-bar top-bar" "page page" "footer footer";
grid-template-rows: 64px 1fr auto;
grid-template-columns: 1fr;
}
}
@media only screen and (min-width: 1025px) {
.mds .mds-layout {
grid-template-areas: "top-bar top-bar" "side-bar page" "side-bar footer";
grid-template-rows: 64px 1fr auto;
grid-template-columns: 300px 1fr;
}
.mds .mds-layout:has(mc-side-bar:hover), .mds .mds-layout:has(mc-side-bar:focus-within) {
will-change: grid-template-columns;
transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
.mds .mds-page-centered {
/*
@name: mds-page-centered
@category: Layout
@usage:
Use mds-page-centered class to create a centered page area in the layout.
@example:
...
*/
padding-left: 24px;
padding-right: 24px;
}
@media only screen and (max-width: 1024px) {
.mds .mds-page-centered {
margin: 24px 0;
}
}
@media only screen and (min-width: 1025px) {
.mds .mds-page-centered {
margin: 24px auto;
max-width: 1080px;
}
}
.mds .mds-page-full-width {
/*
@name: mds-page-full-width
@category: Layout
@usage:
Use mds-page-full-width class to create a full-width page area in the layout.
@example:
...
*/
max-width: none;
}
@media only screen and (min-width: 1025px) {
.mds .mds-page-full-width {
margin: 24px 0;
max-width: none;
}
}
.mds .mds-skip-to {
/*
@name: mds-skip-to
@category: Accessibility
@usage:
Use mds-skip-to class to create a skip link that allows users to skip directly to the main content or footer of the page.
@example:
Skip to contentSkip to footer
...
*/
opacity: 0;
position: absolute;
left: -9999px;
z-index: 999;
padding: 1em;
line-height: 86px;
height: 86px;
background-color: #f7f7f7;
color: #0073ab;
justify-content: center;
outline: none;
}
.mds .mds-skip-to:focus {
left: 50%;
transform: translateX(-50%);
opacity: 1;
box-shadow: none;
}
.mds {
/**
* These SASS variables are auto-generated out of their counter-part design-tokens
* during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs
**/
/*
@description:
Base grid system utilities for layouts.
The grid system provides a flexible layout structure, allowing for consistent alignment and spacing of elements and is independent of container or viewport size.
It includes utilities for defining rows, columns, and spans, enabling developers to create complex layouts with ease.
For responsive layouts, use the container-based grid system in _container-grid.css or viewport-based grid system in _viewport-grid.css.
@basicExample:
// Basic grid layout with: 12 columns grid system in all breakpoints. If you need a grid that depends on the screen size, use container grid.
1
2
3
4
5
6
7
8
9
10
11
12
@advancedExample:
Cell 1 (always at the beginning)
Cell 2 (always at the end)
Cell 1 (first row, spans over 12 columns)
Cell 2 (second row, cell don't span)
Cell 3 (third row, spans over 12 columns)
*/
}
.mds .mds-container .mds-grid {
display: grid;
}
.mds .mds-container .mds-grid .mds-grid-row-1 {
/*
@name: mds-grid-row-1
@category: Grid
@usage:
Use mds-grid-row-1 class to position the cell in the 1 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 1 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-row-2 {
/*
@name: mds-grid-row-2
@category: Grid
@usage:
Use mds-grid-row-2 class to position the cell in the 2 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 2 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-row-3 {
/*
@name: mds-grid-row-3
@category: Grid
@usage:
Use mds-grid-row-3 class to position the cell in the 3 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 3 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-row-4 {
/*
@name: mds-grid-row-4
@category: Grid
@usage:
Use mds-grid-row-4 class to position the cell in the 4 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 4 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-row-5 {
/*
@name: mds-grid-row-5
@category: Grid
@usage:
Use mds-grid-row-5 class to position the cell in the 5 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 5 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-row-6 {
/*
@name: mds-grid-row-6
@category: Grid
@usage:
Use mds-grid-row-6 class to position the cell in the 6 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 6 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-row-7 {
/*
@name: mds-grid-row-7
@category: Grid
@usage:
Use mds-grid-row-7 class to position the cell in the 7 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 7 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-row-8 {
/*
@name: mds-grid-row-8
@category: Grid
@usage:
Use mds-grid-row-8 class to position the cell in the 8 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 8 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-row-9 {
/*
@name: mds-grid-row-9
@category: Grid
@usage:
Use mds-grid-row-9 class to position the cell in the 9 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 9 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-row-10 {
/*
@name: mds-grid-row-10
@category: Grid
@usage:
Use mds-grid-row-10 class to position the cell in the 10 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 10 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-row-11 {
/*
@name: mds-grid-row-11
@category: Grid
@usage:
Use mds-grid-row-11 class to position the cell in the 11 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 11 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-row-12 {
/*
@name: mds-grid-row-12
@category: Grid
@usage:
Use mds-grid-row-12 class to position the cell in the 12 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 12 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-row-13 {
/*
@name: mds-grid-row-13
@category: Grid
@usage:
Use mds-grid-row-13 class to position the cell in the 13 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 13 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 13;
}
.mds .mds-container .mds-grid .mds-grid-row-14 {
/*
@name: mds-grid-row-14
@category: Grid
@usage:
Use mds-grid-row-14 class to position the cell in the 14 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 14 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 14;
}
.mds .mds-container .mds-grid .mds-grid-row-15 {
/*
@name: mds-grid-row-15
@category: Grid
@usage:
Use mds-grid-row-15 class to position the cell in the 15 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 15 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 15;
}
.mds .mds-container .mds-grid .mds-grid-row-16 {
/*
@name: mds-grid-row-16
@category: Grid
@usage:
Use mds-grid-row-16 class to position the cell in the 16 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 16 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 16;
}
.mds .mds-container .mds-grid .mds-grid-row-17 {
/*
@name: mds-grid-row-17
@category: Grid
@usage:
Use mds-grid-row-17 class to position the cell in the 17 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 17 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 17;
}
.mds .mds-container .mds-grid .mds-grid-row-18 {
/*
@name: mds-grid-row-18
@category: Grid
@usage:
Use mds-grid-row-18 class to position the cell in the 18 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 18 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 18;
}
.mds .mds-container .mds-grid .mds-grid-row-19 {
/*
@name: mds-grid-row-19
@category: Grid
@usage:
Use mds-grid-row-19 class to position the cell in the 19 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 19 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 19;
}
.mds .mds-container .mds-grid .mds-grid-row-20 {
/*
@name: mds-grid-row-20
@category: Grid
@usage:
Use mds-grid-row-20 class to position the cell in the 20 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 20 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 20;
}
.mds .mds-container .mds-grid .mds-grid-row-21 {
/*
@name: mds-grid-row-21
@category: Grid
@usage:
Use mds-grid-row-21 class to position the cell in the 21 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 21 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 21;
}
.mds .mds-container .mds-grid .mds-grid-row-22 {
/*
@name: mds-grid-row-22
@category: Grid
@usage:
Use mds-grid-row-22 class to position the cell in the 22 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 22 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 22;
}
.mds .mds-container .mds-grid .mds-grid-row-23 {
/*
@name: mds-grid-row-23
@category: Grid
@usage:
Use mds-grid-row-23 class to position the cell in the 23 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 23 for all breakpoints.
@example:
Cell in row 1
Cell in row 2
...
*/
grid-row-start: 23;
}
.mds .mds-container .mds-grid .mds-grid-row-24 {
/*
@name: mds-grid-row-24
@category: Grid
@usage:
Use mds-grid-row-24 class to position the cell in the 24 row of the grid.
The class is independent of the breakpoint, so when applied, the cell will only be in row 24 for all breakpoints.
@example:
*/
grid-column-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-col-2 {
/*
@name: mds-grid-col-2
@category: Grid
@usage:
Use mds-grid-col-2 class to position the cell in the 2 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 2 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-col-3 {
/*
@name: mds-grid-col-3
@category: Grid
@usage:
Use mds-grid-col-3 class to position the cell in the 3 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 3 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-col-4 {
/*
@name: mds-grid-col-4
@category: Grid
@usage:
Use mds-grid-col-4 class to position the cell in the 4 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 4 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-col-5 {
/*
@name: mds-grid-col-5
@category: Grid
@usage:
Use mds-grid-col-5 class to position the cell in the 5 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 5 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-col-6 {
/*
@name: mds-grid-col-6
@category: Grid
@usage:
Use mds-grid-col-6 class to position the cell in the 6 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 6 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-col-7 {
/*
@name: mds-grid-col-7
@category: Grid
@usage:
Use mds-grid-col-7 class to position the cell in the 7 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 7 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-col-8 {
/*
@name: mds-grid-col-8
@category: Grid
@usage:
Use mds-grid-col-8 class to position the cell in the 8 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 8 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-col-9 {
/*
@name: mds-grid-col-9
@category: Grid
@usage:
Use mds-grid-col-9 class to position the cell in the 9 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 9 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-col-10 {
/*
@name: mds-grid-col-10
@category: Grid
@usage:
Use mds-grid-col-10 class to position the cell in the 10 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 10 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-col-11 {
/*
@name: mds-grid-col-11
@category: Grid
@usage:
Use mds-grid-col-11 class to position the cell in the 11 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 11 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-col-12 {
/*
@name: mds-grid-col-12
@category: Grid
@usage:
Use mds-grid-col-12 class to position the cell in the 12 column of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 12 in all screen sizes.
@example:
Cell in column 1 in all breakpoints
Cell in column 2 in all breakpoints
...
*/
grid-column-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-col-1-reverse {
/*
@name: mds-grid-col-1-reverse
@category: Grid
@usage:
Use mds-grid-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 1 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -2;
}
.mds .mds-container .mds-grid .mds-grid-col-2-reverse {
/*
@name: mds-grid-col-2-reverse
@category: Grid
@usage:
Use mds-grid-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 2 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -3;
}
.mds .mds-container .mds-grid .mds-grid-col-3-reverse {
/*
@name: mds-grid-col-3-reverse
@category: Grid
@usage:
Use mds-grid-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 3 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -4;
}
.mds .mds-container .mds-grid .mds-grid-col-4-reverse {
/*
@name: mds-grid-col-4-reverse
@category: Grid
@usage:
Use mds-grid-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 4 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -5;
}
.mds .mds-container .mds-grid .mds-grid-col-5-reverse {
/*
@name: mds-grid-col-5-reverse
@category: Grid
@usage:
Use mds-grid-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 5 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -6;
}
.mds .mds-container .mds-grid .mds-grid-col-6-reverse {
/*
@name: mds-grid-col-6-reverse
@category: Grid
@usage:
Use mds-grid-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 6 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -7;
}
.mds .mds-container .mds-grid .mds-grid-col-7-reverse {
/*
@name: mds-grid-col-7-reverse
@category: Grid
@usage:
Use mds-grid-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 7 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -8;
}
.mds .mds-container .mds-grid .mds-grid-col-8-reverse {
/*
@name: mds-grid-col-8-reverse
@category: Grid
@usage:
Use mds-grid-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 8 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -9;
}
.mds .mds-container .mds-grid .mds-grid-col-9-reverse {
/*
@name: mds-grid-col-9-reverse
@category: Grid
@usage:
Use mds-grid-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 9 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -10;
}
.mds .mds-container .mds-grid .mds-grid-col-10-reverse {
/*
@name: mds-grid-col-10-reverse
@category: Grid
@usage:
Use mds-grid-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 10 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -11;
}
.mds .mds-container .mds-grid .mds-grid-col-11-reverse {
/*
@name: mds-grid-col-11-reverse
@category: Grid
@usage:
Use mds-grid-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 11 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -12;
}
.mds .mds-container .mds-grid .mds-grid-col-12-reverse {
/*
@name: mds-grid-col-12-reverse
@category: Grid
@usage:
Use mds-grid-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 12 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -13;
}
.mds .mds-container .mds-grid .mds-grid-col-13-reverse {
/*
@name: mds-grid-col-13-reverse
@category: Grid
@usage:
Use mds-grid-col-13-reverse class to position the cell in the reverse order in the 13 column (from the end) of the grid.
The class is independent of the breakpoint, so when applied, the cell will persist to be in column 13 from the end in all screen sizes.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -14;
}
.mds .mds-container .mds-grid .mds-grid-col-span-to-end {
grid-column-end: -1;
}
.mds .mds-container .mds-grid .mds-grid-col-span-to-start {
grid-column-end: 1;
}
.mds .mds-container .mds-grid .mds-grid-col-span-1 {
/*
@name: mds-grid-col-span-1
@category: Grid
@usage:
Use mds-grid-col-span-1 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 1;
}
.mds .mds-container .mds-grid .mds-grid-col-span-2 {
/*
@name: mds-grid-col-span-2
@category: Grid
@usage:
Use mds-grid-col-span-2 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 2;
}
.mds .mds-container .mds-grid .mds-grid-col-span-3 {
/*
@name: mds-grid-col-span-3
@category: Grid
@usage:
Use mds-grid-col-span-3 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 3;
}
.mds .mds-container .mds-grid .mds-grid-col-span-4 {
/*
@name: mds-grid-col-span-4
@category: Grid
@usage:
Use mds-grid-col-span-4 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 4;
}
.mds .mds-container .mds-grid .mds-grid-col-span-5 {
/*
@name: mds-grid-col-span-5
@category: Grid
@usage:
Use mds-grid-col-span-5 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 5;
}
.mds .mds-container .mds-grid .mds-grid-col-span-6 {
/*
@name: mds-grid-col-span-6
@category: Grid
@usage:
Use mds-grid-col-span-6 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 6;
}
.mds .mds-container .mds-grid .mds-grid-col-span-7 {
/*
@name: mds-grid-col-span-7
@category: Grid
@usage:
Use mds-grid-col-span-7 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 7;
}
.mds .mds-container .mds-grid .mds-grid-col-span-8 {
/*
@name: mds-grid-col-span-8
@category: Grid
@usage:
Use mds-grid-col-span-8 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 8;
}
.mds .mds-container .mds-grid .mds-grid-col-span-9 {
/*
@name: mds-grid-col-span-9
@category: Grid
@usage:
Use mds-grid-col-span-9 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 9;
}
.mds .mds-container .mds-grid .mds-grid-col-span-10 {
/*
@name: mds-grid-col-span-10
@category: Grid
@usage:
Use mds-grid-col-span-10 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 10;
}
.mds .mds-container .mds-grid .mds-grid-col-span-11 {
/*
@name: mds-grid-col-span-11
@category: Grid
@usage:
Use mds-grid-col-span-11 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 11;
}
.mds .mds-container .mds-grid .mds-grid-col-span-12 {
/*
@name: mds-grid-col-span-12
@category: Grid
@usage:
Use mds-grid-col-span-12 class to span multiple cells in your grid.
The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
@example:
Cell in column 1 that spans over 2 columns in all breakpoints
Cell in column 3 that spans over 3 columns in all breakpoints
...
*/
grid-column-end: span 12;
}
.mds .mds-container .mds-grid.mds-grid-cols-1 {
/*
@name: mds-grid-cols-1
@category: Grid
@usage:
Use mds-grid-cols-1 class to define a grid with 1 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 1 number of columns in all breakpoints.
*/
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-2 {
/*
@name: mds-grid-cols-2
@category: Grid
@usage:
Use mds-grid-cols-2 class to define a grid with 2 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 2 number of columns in all breakpoints.
*/
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-3 {
/*
@name: mds-grid-cols-3
@category: Grid
@usage:
Use mds-grid-cols-3 class to define a grid with 3 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 3 number of columns in all breakpoints.
*/
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-4 {
/*
@name: mds-grid-cols-4
@category: Grid
@usage:
Use mds-grid-cols-4 class to define a grid with 4 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 4 number of columns in all breakpoints.
*/
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-5 {
/*
@name: mds-grid-cols-5
@category: Grid
@usage:
Use mds-grid-cols-5 class to define a grid with 5 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 5 number of columns in all breakpoints.
*/
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-6 {
/*
@name: mds-grid-cols-6
@category: Grid
@usage:
Use mds-grid-cols-6 class to define a grid with 6 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 6 number of columns in all breakpoints.
*/
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-7 {
/*
@name: mds-grid-cols-7
@category: Grid
@usage:
Use mds-grid-cols-7 class to define a grid with 7 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 7 number of columns in all breakpoints.
*/
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-8 {
/*
@name: mds-grid-cols-8
@category: Grid
@usage:
Use mds-grid-cols-8 class to define a grid with 8 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 8 number of columns in all breakpoints.
*/
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-9 {
/*
@name: mds-grid-cols-9
@category: Grid
@usage:
Use mds-grid-cols-9 class to define a grid with 9 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 9 number of columns in all breakpoints.
*/
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-10 {
/*
@name: mds-grid-cols-10
@category: Grid
@usage:
Use mds-grid-cols-10 class to define a grid with 10 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 10 number of columns in all breakpoints.
*/
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-11 {
/*
@name: mds-grid-cols-11
@category: Grid
@usage:
Use mds-grid-cols-11 class to define a grid with 11 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 11 number of columns in all breakpoints.
*/
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-cols-12 {
/*
@name: mds-grid-cols-12
@category: Grid
@usage:
Use mds-grid-cols-12 class to define a grid with 12 columns. The default number of columns is 12, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
@example:
Grid will have 12 number of columns in all breakpoints.
*/
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-rows-1 {
/*
@name: mds-grid-rows-1
@category: Grid
@usage:
Use mds-grid-rows-1 class to define a grid with 1 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 1 number of rows in all breakpoints.
*/
grid-template-rows: repeat(1, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-2 {
/*
@name: mds-grid-rows-2
@category: Grid
@usage:
Use mds-grid-rows-2 class to define a grid with 2 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 2 number of rows in all breakpoints.
*/
grid-template-rows: repeat(2, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-3 {
/*
@name: mds-grid-rows-3
@category: Grid
@usage:
Use mds-grid-rows-3 class to define a grid with 3 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 3 number of rows in all breakpoints.
*/
grid-template-rows: repeat(3, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-4 {
/*
@name: mds-grid-rows-4
@category: Grid
@usage:
Use mds-grid-rows-4 class to define a grid with 4 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 4 number of rows in all breakpoints.
*/
grid-template-rows: repeat(4, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-5 {
/*
@name: mds-grid-rows-5
@category: Grid
@usage:
Use mds-grid-rows-5 class to define a grid with 5 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 5 number of rows in all breakpoints.
*/
grid-template-rows: repeat(5, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-6 {
/*
@name: mds-grid-rows-6
@category: Grid
@usage:
Use mds-grid-rows-6 class to define a grid with 6 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 6 number of rows in all breakpoints.
*/
grid-template-rows: repeat(6, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-7 {
/*
@name: mds-grid-rows-7
@category: Grid
@usage:
Use mds-grid-rows-7 class to define a grid with 7 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 7 number of rows in all breakpoints.
*/
grid-template-rows: repeat(7, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-8 {
/*
@name: mds-grid-rows-8
@category: Grid
@usage:
Use mds-grid-rows-8 class to define a grid with 8 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 8 number of rows in all breakpoints.
*/
grid-template-rows: repeat(8, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-9 {
/*
@name: mds-grid-rows-9
@category: Grid
@usage:
Use mds-grid-rows-9 class to define a grid with 9 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 9 number of rows in all breakpoints.
*/
grid-template-rows: repeat(9, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-10 {
/*
@name: mds-grid-rows-10
@category: Grid
@usage:
Use mds-grid-rows-10 class to define a grid with 10 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 10 number of rows in all breakpoints.
*/
grid-template-rows: repeat(10, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-11 {
/*
@name: mds-grid-rows-11
@category: Grid
@usage:
Use mds-grid-rows-11 class to define a grid with 11 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 11 number of rows in all breakpoints.
*/
grid-template-rows: repeat(11, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-12 {
/*
@name: mds-grid-rows-12
@category: Grid
@usage:
Use mds-grid-rows-12 class to define a grid with 12 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 12 number of rows in all breakpoints.
*/
grid-template-rows: repeat(12, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-13 {
/*
@name: mds-grid-rows-13
@category: Grid
@usage:
Use mds-grid-rows-13 class to define a grid with 13 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 13 number of rows in all breakpoints.
*/
grid-template-rows: repeat(13, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-14 {
/*
@name: mds-grid-rows-14
@category: Grid
@usage:
Use mds-grid-rows-14 class to define a grid with 14 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 14 number of rows in all breakpoints.
*/
grid-template-rows: repeat(14, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-15 {
/*
@name: mds-grid-rows-15
@category: Grid
@usage:
Use mds-grid-rows-15 class to define a grid with 15 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 15 number of rows in all breakpoints.
*/
grid-template-rows: repeat(15, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-16 {
/*
@name: mds-grid-rows-16
@category: Grid
@usage:
Use mds-grid-rows-16 class to define a grid with 16 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 16 number of rows in all breakpoints.
*/
grid-template-rows: repeat(16, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-17 {
/*
@name: mds-grid-rows-17
@category: Grid
@usage:
Use mds-grid-rows-17 class to define a grid with 17 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 17 number of rows in all breakpoints.
*/
grid-template-rows: repeat(17, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-18 {
/*
@name: mds-grid-rows-18
@category: Grid
@usage:
Use mds-grid-rows-18 class to define a grid with 18 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 18 number of rows in all breakpoints.
*/
grid-template-rows: repeat(18, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-19 {
/*
@name: mds-grid-rows-19
@category: Grid
@usage:
Use mds-grid-rows-19 class to define a grid with 19 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 19 number of rows in all breakpoints.
*/
grid-template-rows: repeat(19, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-20 {
/*
@name: mds-grid-rows-20
@category: Grid
@usage:
Use mds-grid-rows-20 class to define a grid with 20 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 20 number of rows in all breakpoints.
*/
grid-template-rows: repeat(20, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-21 {
/*
@name: mds-grid-rows-21
@category: Grid
@usage:
Use mds-grid-rows-21 class to define a grid with 21 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 21 number of rows in all breakpoints.
*/
grid-template-rows: repeat(21, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-22 {
/*
@name: mds-grid-rows-22
@category: Grid
@usage:
Use mds-grid-rows-22 class to define a grid with 22 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 22 number of rows in all breakpoints.
*/
grid-template-rows: repeat(22, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-23 {
/*
@name: mds-grid-rows-23
@category: Grid
@usage:
Use mds-grid-rows-23 class to define a grid with 23 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 23 number of rows in all breakpoints.
*/
grid-template-rows: repeat(23, auto);
}
.mds .mds-container .mds-grid.mds-grid-rows-24 {
/*
@name: mds-grid-rows-24
@category: Grid
@usage:
Use mds-grid-rows-24 class to define a grid with 24 rows. The default number of rows is 1, but you can override it using this class.
The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
@example:
Grid will have 24 number of rows in all breakpoints.
*/
grid-template-rows: repeat(24, auto);
}
.mds {
/**
* These SASS variables are auto-generated out of their counter-part design-tokens
* during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs
**/
/**
* These SASS variables are auto-generated out of their counter-part design-tokens
* during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs
**/
/**
* These SASS variables are auto-generated out of their counter-part design-tokens
* during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs
**/
/*
@description:
Container and grid system utilities for responsive layouts with default gap.
Container-based grid respond to the width of the container rather than the entire viewport.
This enables more granular control over layout behavior—allowing components to adapt based on their immediate context.
It’s especially effective in complex or modular layouts where sections of a page need to remain visually consistent, even within wider screens.
It includes utilities for defining rows, columns, and spans, enabling developers to create complex layouts with ease.
@minimalExample:
// Basic grid layout that is responsive to the width of parent container: 12 columns grid system in 'md' breakpoint (for 1025px + viewport), 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport) and 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport) with default gap.
1
2
3
4
5
6
7
8
9
10
11
12
@basicExample:
// Basic grid layout that is responsive to the width of parent container: 12 columns grid system in 'md' breakpoint (for 1025px + viewport), 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport) and 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport) with default gap. Example consists of 3 cells with different column spans in different breakpoints, and different number of rows in different breakpoints.
1
2
3
@advancedExample:
// Advanced grid layout that is responsive to the width of parent container: 12 columns grid system in 'md' breakpoint (for 1025px + viewport), 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport) and 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport) with default gap. Example consists of multiple cells with different column and row spans in different breakpoints, and different number of rows in different breakpoints.
1
2
3
4
5
6
7
8
*/
}
.mds .mds-container {
/*
@name: mds-container
@category: Grid
*/
container-type: inline-size;
contain: layout;
position: relative;
z-index: 1;
}
@container (max-width: 640px) {
.mds .mds-container .mds-grid {
gap: var(--mds_foundations_grid_xs_column-gap) var(--mds_foundations_grid_xs_row-gap);
grid-template-columns: repeat(var(--mds_foundations_grid_xs_columns), minmax(0, 1fr));
}
.mds .mds-container .mds-grid .mds-grid-xs-col-1 {
/*
@name: mds-grid-xs-col-1
@category: Grid
@usage:
Use mds-grid-xs-col-1 class to position the cell in the 1 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 1 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-2 {
/*
@name: mds-grid-xs-col-2
@category: Grid
@usage:
Use mds-grid-xs-col-2 class to position the cell in the 2 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 2 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-3 {
/*
@name: mds-grid-xs-col-3
@category: Grid
@usage:
Use mds-grid-xs-col-3 class to position the cell in the 3 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 3 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-4 {
/*
@name: mds-grid-xs-col-4
@category: Grid
@usage:
Use mds-grid-xs-col-4 class to position the cell in the 4 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 4 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-5 {
/*
@name: mds-grid-xs-col-5
@category: Grid
@usage:
Use mds-grid-xs-col-5 class to position the cell in the 5 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 5 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-6 {
/*
@name: mds-grid-xs-col-6
@category: Grid
@usage:
Use mds-grid-xs-col-6 class to position the cell in the 6 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 6 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-7 {
/*
@name: mds-grid-xs-col-7
@category: Grid
@usage:
Use mds-grid-xs-col-7 class to position the cell in the 7 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 7 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-8 {
/*
@name: mds-grid-xs-col-8
@category: Grid
@usage:
Use mds-grid-xs-col-8 class to position the cell in the 8 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 8 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-9 {
/*
@name: mds-grid-xs-col-9
@category: Grid
@usage:
Use mds-grid-xs-col-9 class to position the cell in the 9 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 9 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-10 {
/*
@name: mds-grid-xs-col-10
@category: Grid
@usage:
Use mds-grid-xs-col-10 class to position the cell in the 10 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 10 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-11 {
/*
@name: mds-grid-xs-col-11
@category: Grid
@usage:
Use mds-grid-xs-col-11 class to position the cell in the 11 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 11 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-12 {
/*
@name: mds-grid-xs-col-12
@category: Grid
@usage:
Use mds-grid-xs-col-12 class to position the cell in the 12 column of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 12 for xs breakpoint.
@example:
Cell in column 1 for xs breakpoint
Cell in column 2 for xs breakpoint
...
*/
grid-column-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-1-reverse {
/*
@name: mds-grid-xs-col-1-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 1 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -2;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-2-reverse {
/*
@name: mds-grid-xs-col-2-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 2 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -3;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-3-reverse {
/*
@name: mds-grid-xs-col-3-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 3 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -4;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-4-reverse {
/*
@name: mds-grid-xs-col-4-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 4 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -5;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-5-reverse {
/*
@name: mds-grid-xs-col-5-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 5 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -6;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-6-reverse {
/*
@name: mds-grid-xs-col-6-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 6 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -7;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-7-reverse {
/*
@name: mds-grid-xs-col-7-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 7 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -8;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-8-reverse {
/*
@name: mds-grid-xs-col-8-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 8 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -9;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-9-reverse {
/*
@name: mds-grid-xs-col-9-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 9 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -10;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-10-reverse {
/*
@name: mds-grid-xs-col-10-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 10 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -11;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-11-reverse {
/*
@name: mds-grid-xs-col-11-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 11 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -12;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-12-reverse {
/*
@name: mds-grid-xs-col-12-reverse
@category: Grid
@usage:
Use mds-grid-xs-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 12 from the end for xs breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -13;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-1 {
/*
@name: mds-grid-xs-col-span-1
@category: Grid
@usage:
Use mds-grid-xs-col-span-1 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-1 class to position the cell in the 1 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 1;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-2 {
/*
@name: mds-grid-xs-col-span-2
@category: Grid
@usage:
Use mds-grid-xs-col-span-2 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-2 class to position the cell in the 2 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 2;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-3 {
/*
@name: mds-grid-xs-col-span-3
@category: Grid
@usage:
Use mds-grid-xs-col-span-3 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-3 class to position the cell in the 3 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 3;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-4 {
/*
@name: mds-grid-xs-col-span-4
@category: Grid
@usage:
Use mds-grid-xs-col-span-4 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-4 class to position the cell in the 4 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 4;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-5 {
/*
@name: mds-grid-xs-col-span-5
@category: Grid
@usage:
Use mds-grid-xs-col-span-5 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-5 class to position the cell in the 5 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 5;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-6 {
/*
@name: mds-grid-xs-col-span-6
@category: Grid
@usage:
Use mds-grid-xs-col-span-6 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-6 class to position the cell in the 6 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 6;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-7 {
/*
@name: mds-grid-xs-col-span-7
@category: Grid
@usage:
Use mds-grid-xs-col-span-7 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-7 class to position the cell in the 7 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 7;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-8 {
/*
@name: mds-grid-xs-col-span-8
@category: Grid
@usage:
Use mds-grid-xs-col-span-8 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-8 class to position the cell in the 8 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 8;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-9 {
/*
@name: mds-grid-xs-col-span-9
@category: Grid
@usage:
Use mds-grid-xs-col-span-9 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-9 class to position the cell in the 9 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 9;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-10 {
/*
@name: mds-grid-xs-col-span-10
@category: Grid
@usage:
Use mds-grid-xs-col-span-10 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-10 class to position the cell in the 10 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 10;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-11 {
/*
@name: mds-grid-xs-col-span-11
@category: Grid
@usage:
Use mds-grid-xs-col-span-11 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-11 class to position the cell in the 11 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 11;
}
.mds .mds-container .mds-grid .mds-grid-xs-col-span-12 {
/*
@name: mds-grid-xs-col-span-12
@category: Grid
@usage:
Use mds-grid-xs-col-span-12 class to span multiple cells in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
Use it in combination with mds-grid-xs-col-12 class to position the cell in the 12 column of the grid in xs breakpoint.
@example:
Cell in column 1 that spans over 2 columns in xs breakpoints
...
*/
grid-column-end: span 12;
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-1 {
/*
@name: mds-grid-xs-cols-1
@category: Grid
@usage:
Use mds-grid-xs-cols-1 class to define a grid with 1 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 1 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-2 {
/*
@name: mds-grid-xs-cols-2
@category: Grid
@usage:
Use mds-grid-xs-cols-2 class to define a grid with 2 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 2 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-3 {
/*
@name: mds-grid-xs-cols-3
@category: Grid
@usage:
Use mds-grid-xs-cols-3 class to define a grid with 3 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 3 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-4 {
/*
@name: mds-grid-xs-cols-4
@category: Grid
@usage:
Use mds-grid-xs-cols-4 class to define a grid with 4 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 4 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-5 {
/*
@name: mds-grid-xs-cols-5
@category: Grid
@usage:
Use mds-grid-xs-cols-5 class to define a grid with 5 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 5 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-6 {
/*
@name: mds-grid-xs-cols-6
@category: Grid
@usage:
Use mds-grid-xs-cols-6 class to define a grid with 6 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 6 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-7 {
/*
@name: mds-grid-xs-cols-7
@category: Grid
@usage:
Use mds-grid-xs-cols-7 class to define a grid with 7 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 7 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-8 {
/*
@name: mds-grid-xs-cols-8
@category: Grid
@usage:
Use mds-grid-xs-cols-8 class to define a grid with 8 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 8 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-9 {
/*
@name: mds-grid-xs-cols-9
@category: Grid
@usage:
Use mds-grid-xs-cols-9 class to define a grid with 9 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 9 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-10 {
/*
@name: mds-grid-xs-cols-10
@category: Grid
@usage:
Use mds-grid-xs-cols-10 class to define a grid with 10 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 10 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-11 {
/*
@name: mds-grid-xs-cols-11
@category: Grid
@usage:
Use mds-grid-xs-cols-11 class to define a grid with 11 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 11 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-xs-cols-12 {
/*
@name: mds-grid-xs-cols-12
@category: Grid
@usage:
Use mds-grid-xs-cols-12 class to define a grid with 12 columns for xs breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
@example:
Grid will have 12 number of columns in xs breakpoint.
*/
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.mds .mds-container .mds-grid .mds-grid-xs-row-1 {
/*
@name: mds-grid-xs-row-1
@category: Grid
@usage:
Use mds-grid-xs-row-1 class to position the cell in the 1 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 1 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-2 {
/*
@name: mds-grid-xs-row-2
@category: Grid
@usage:
Use mds-grid-xs-row-2 class to position the cell in the 2 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 2 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-3 {
/*
@name: mds-grid-xs-row-3
@category: Grid
@usage:
Use mds-grid-xs-row-3 class to position the cell in the 3 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 3 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-4 {
/*
@name: mds-grid-xs-row-4
@category: Grid
@usage:
Use mds-grid-xs-row-4 class to position the cell in the 4 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 4 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-5 {
/*
@name: mds-grid-xs-row-5
@category: Grid
@usage:
Use mds-grid-xs-row-5 class to position the cell in the 5 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 5 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-6 {
/*
@name: mds-grid-xs-row-6
@category: Grid
@usage:
Use mds-grid-xs-row-6 class to position the cell in the 6 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 6 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-7 {
/*
@name: mds-grid-xs-row-7
@category: Grid
@usage:
Use mds-grid-xs-row-7 class to position the cell in the 7 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 7 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-8 {
/*
@name: mds-grid-xs-row-8
@category: Grid
@usage:
Use mds-grid-xs-row-8 class to position the cell in the 8 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 8 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-9 {
/*
@name: mds-grid-xs-row-9
@category: Grid
@usage:
Use mds-grid-xs-row-9 class to position the cell in the 9 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 9 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-10 {
/*
@name: mds-grid-xs-row-10
@category: Grid
@usage:
Use mds-grid-xs-row-10 class to position the cell in the 10 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 10 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-11 {
/*
@name: mds-grid-xs-row-11
@category: Grid
@usage:
Use mds-grid-xs-row-11 class to position the cell in the 11 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 11 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-12 {
/*
@name: mds-grid-xs-row-12
@category: Grid
@usage:
Use mds-grid-xs-row-12 class to position the cell in the 12 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 12 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-13 {
/*
@name: mds-grid-xs-row-13
@category: Grid
@usage:
Use mds-grid-xs-row-13 class to position the cell in the 13 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 13 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 13;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-14 {
/*
@name: mds-grid-xs-row-14
@category: Grid
@usage:
Use mds-grid-xs-row-14 class to position the cell in the 14 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 14 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 14;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-15 {
/*
@name: mds-grid-xs-row-15
@category: Grid
@usage:
Use mds-grid-xs-row-15 class to position the cell in the 15 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 15 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 15;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-16 {
/*
@name: mds-grid-xs-row-16
@category: Grid
@usage:
Use mds-grid-xs-row-16 class to position the cell in the 16 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 16 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 16;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-17 {
/*
@name: mds-grid-xs-row-17
@category: Grid
@usage:
Use mds-grid-xs-row-17 class to position the cell in the 17 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 17 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 17;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-18 {
/*
@name: mds-grid-xs-row-18
@category: Grid
@usage:
Use mds-grid-xs-row-18 class to position the cell in the 18 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 18 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 18;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-19 {
/*
@name: mds-grid-xs-row-19
@category: Grid
@usage:
Use mds-grid-xs-row-19 class to position the cell in the 19 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 19 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 19;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-20 {
/*
@name: mds-grid-xs-row-20
@category: Grid
@usage:
Use mds-grid-xs-row-20 class to position the cell in the 20 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 20 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 20;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-21 {
/*
@name: mds-grid-xs-row-21
@category: Grid
@usage:
Use mds-grid-xs-row-21 class to position the cell in the 21 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 21 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 21;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-22 {
/*
@name: mds-grid-xs-row-22
@category: Grid
@usage:
Use mds-grid-xs-row-22 class to position the cell in the 22 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 22 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 22;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-23 {
/*
@name: mds-grid-xs-row-23
@category: Grid
@usage:
Use mds-grid-xs-row-23 class to position the cell in the 23 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 23 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 23;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-24 {
/*
@name: mds-grid-xs-row-24
@category: Grid
@usage:
Use mds-grid-xs-row-24 class to position the cell in the 24 row of the grid in xs breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 24 for xs breakpoint.
@example:
Cell in row 1 for xs breakpoint
Cell in row 2 for xs breakpoint
...
*/
grid-row-start: 24;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-1 {
/*
@name: mds-grid-xs-row-span-1
@category: Grid
@usage:
Use mds-grid-xs-row-span-1 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 1 rows in xs breakpoints
...
*/
grid-row-end: span 1;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-2 {
/*
@name: mds-grid-xs-row-span-2
@category: Grid
@usage:
Use mds-grid-xs-row-span-2 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 2 rows in xs breakpoints
...
*/
grid-row-end: span 2;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-3 {
/*
@name: mds-grid-xs-row-span-3
@category: Grid
@usage:
Use mds-grid-xs-row-span-3 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 3 rows in xs breakpoints
...
*/
grid-row-end: span 3;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-4 {
/*
@name: mds-grid-xs-row-span-4
@category: Grid
@usage:
Use mds-grid-xs-row-span-4 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 4 rows in xs breakpoints
...
*/
grid-row-end: span 4;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-5 {
/*
@name: mds-grid-xs-row-span-5
@category: Grid
@usage:
Use mds-grid-xs-row-span-5 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 5 rows in xs breakpoints
...
*/
grid-row-end: span 5;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-6 {
/*
@name: mds-grid-xs-row-span-6
@category: Grid
@usage:
Use mds-grid-xs-row-span-6 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 6 rows in xs breakpoints
...
*/
grid-row-end: span 6;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-7 {
/*
@name: mds-grid-xs-row-span-7
@category: Grid
@usage:
Use mds-grid-xs-row-span-7 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 7 rows in xs breakpoints
...
*/
grid-row-end: span 7;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-8 {
/*
@name: mds-grid-xs-row-span-8
@category: Grid
@usage:
Use mds-grid-xs-row-span-8 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 8 rows in xs breakpoints
...
*/
grid-row-end: span 8;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-9 {
/*
@name: mds-grid-xs-row-span-9
@category: Grid
@usage:
Use mds-grid-xs-row-span-9 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 9 rows in xs breakpoints
...
*/
grid-row-end: span 9;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-10 {
/*
@name: mds-grid-xs-row-span-10
@category: Grid
@usage:
Use mds-grid-xs-row-span-10 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 10 rows in xs breakpoints
...
*/
grid-row-end: span 10;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-11 {
/*
@name: mds-grid-xs-row-span-11
@category: Grid
@usage:
Use mds-grid-xs-row-span-11 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 11 rows in xs breakpoints
...
*/
grid-row-end: span 11;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-12 {
/*
@name: mds-grid-xs-row-span-12
@category: Grid
@usage:
Use mds-grid-xs-row-span-12 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 12 rows in xs breakpoints
...
*/
grid-row-end: span 12;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-13 {
/*
@name: mds-grid-xs-row-span-13
@category: Grid
@usage:
Use mds-grid-xs-row-span-13 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 13 rows in xs breakpoints
...
*/
grid-row-end: span 13;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-14 {
/*
@name: mds-grid-xs-row-span-14
@category: Grid
@usage:
Use mds-grid-xs-row-span-14 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 14 rows in xs breakpoints
...
*/
grid-row-end: span 14;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-15 {
/*
@name: mds-grid-xs-row-span-15
@category: Grid
@usage:
Use mds-grid-xs-row-span-15 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 15 rows in xs breakpoints
...
*/
grid-row-end: span 15;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-16 {
/*
@name: mds-grid-xs-row-span-16
@category: Grid
@usage:
Use mds-grid-xs-row-span-16 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 16 rows in xs breakpoints
...
*/
grid-row-end: span 16;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-17 {
/*
@name: mds-grid-xs-row-span-17
@category: Grid
@usage:
Use mds-grid-xs-row-span-17 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 17 rows in xs breakpoints
...
*/
grid-row-end: span 17;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-18 {
/*
@name: mds-grid-xs-row-span-18
@category: Grid
@usage:
Use mds-grid-xs-row-span-18 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 18 rows in xs breakpoints
...
*/
grid-row-end: span 18;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-19 {
/*
@name: mds-grid-xs-row-span-19
@category: Grid
@usage:
Use mds-grid-xs-row-span-19 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 19 rows in xs breakpoints
...
*/
grid-row-end: span 19;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-20 {
/*
@name: mds-grid-xs-row-span-20
@category: Grid
@usage:
Use mds-grid-xs-row-span-20 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 20 rows in xs breakpoints
...
*/
grid-row-end: span 20;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-21 {
/*
@name: mds-grid-xs-row-span-21
@category: Grid
@usage:
Use mds-grid-xs-row-span-21 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 21 rows in xs breakpoints
...
*/
grid-row-end: span 21;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-22 {
/*
@name: mds-grid-xs-row-span-22
@category: Grid
@usage:
Use mds-grid-xs-row-span-22 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 22 rows in xs breakpoints
...
*/
grid-row-end: span 22;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-23 {
/*
@name: mds-grid-xs-row-span-23
@category: Grid
@usage:
Use mds-grid-xs-row-span-23 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 23 rows in xs breakpoints
...
*/
grid-row-end: span 23;
}
.mds .mds-container .mds-grid .mds-grid-xs-row-span-24 {
/*
@name: mds-grid-xs-row-span-24
@category: Grid
@usage:
Use mds-grid-xs-row-span-24 class to span multiple rows in your grid for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
@example:
Cell spans over 24 rows in xs breakpoints
...
*/
grid-row-end: span 24;
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-1 {
/*
@name: mds-grid-xs-rows-1
@category: Grid
@usage:
Use mds-grid-xs-rows-1 class to define a grid with 1 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 1 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(1, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-2 {
/*
@name: mds-grid-xs-rows-2
@category: Grid
@usage:
Use mds-grid-xs-rows-2 class to define a grid with 2 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 2 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(2, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-3 {
/*
@name: mds-grid-xs-rows-3
@category: Grid
@usage:
Use mds-grid-xs-rows-3 class to define a grid with 3 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 3 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(3, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-4 {
/*
@name: mds-grid-xs-rows-4
@category: Grid
@usage:
Use mds-grid-xs-rows-4 class to define a grid with 4 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 4 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(4, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-5 {
/*
@name: mds-grid-xs-rows-5
@category: Grid
@usage:
Use mds-grid-xs-rows-5 class to define a grid with 5 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 5 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(5, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-6 {
/*
@name: mds-grid-xs-rows-6
@category: Grid
@usage:
Use mds-grid-xs-rows-6 class to define a grid with 6 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 6 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(6, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-7 {
/*
@name: mds-grid-xs-rows-7
@category: Grid
@usage:
Use mds-grid-xs-rows-7 class to define a grid with 7 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 7 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(7, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-8 {
/*
@name: mds-grid-xs-rows-8
@category: Grid
@usage:
Use mds-grid-xs-rows-8 class to define a grid with 8 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 8 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(8, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-9 {
/*
@name: mds-grid-xs-rows-9
@category: Grid
@usage:
Use mds-grid-xs-rows-9 class to define a grid with 9 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 9 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(9, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-10 {
/*
@name: mds-grid-xs-rows-10
@category: Grid
@usage:
Use mds-grid-xs-rows-10 class to define a grid with 10 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 10 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(10, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-11 {
/*
@name: mds-grid-xs-rows-11
@category: Grid
@usage:
Use mds-grid-xs-rows-11 class to define a grid with 11 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 11 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(11, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-12 {
/*
@name: mds-grid-xs-rows-12
@category: Grid
@usage:
Use mds-grid-xs-rows-12 class to define a grid with 12 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 12 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(12, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-13 {
/*
@name: mds-grid-xs-rows-13
@category: Grid
@usage:
Use mds-grid-xs-rows-13 class to define a grid with 13 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 13 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(13, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-14 {
/*
@name: mds-grid-xs-rows-14
@category: Grid
@usage:
Use mds-grid-xs-rows-14 class to define a grid with 14 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 14 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(14, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-15 {
/*
@name: mds-grid-xs-rows-15
@category: Grid
@usage:
Use mds-grid-xs-rows-15 class to define a grid with 15 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 15 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(15, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-16 {
/*
@name: mds-grid-xs-rows-16
@category: Grid
@usage:
Use mds-grid-xs-rows-16 class to define a grid with 16 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 16 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(16, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-17 {
/*
@name: mds-grid-xs-rows-17
@category: Grid
@usage:
Use mds-grid-xs-rows-17 class to define a grid with 17 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 17 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(17, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-18 {
/*
@name: mds-grid-xs-rows-18
@category: Grid
@usage:
Use mds-grid-xs-rows-18 class to define a grid with 18 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 18 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(18, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-19 {
/*
@name: mds-grid-xs-rows-19
@category: Grid
@usage:
Use mds-grid-xs-rows-19 class to define a grid with 19 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 19 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(19, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-20 {
/*
@name: mds-grid-xs-rows-20
@category: Grid
@usage:
Use mds-grid-xs-rows-20 class to define a grid with 20 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 20 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(20, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-21 {
/*
@name: mds-grid-xs-rows-21
@category: Grid
@usage:
Use mds-grid-xs-rows-21 class to define a grid with 21 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 21 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(21, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-22 {
/*
@name: mds-grid-xs-rows-22
@category: Grid
@usage:
Use mds-grid-xs-rows-22 class to define a grid with 22 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 22 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(22, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-23 {
/*
@name: mds-grid-xs-rows-23
@category: Grid
@usage:
Use mds-grid-xs-rows-23 class to define a grid with 23 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 23 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(23, auto);
}
.mds .mds-container .mds-grid.mds-grid-xs-rows-24 {
/*
@name: mds-grid-xs-rows-24
@category: Grid
@usage:
Use mds-grid-xs-rows-24 class to define a grid with 24 rows for xs breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
@example:
Grid will have 24 number of rows in xs breakpoint.
*/
grid-template-rows: repeat(24, auto);
}
}
@container (min-width: 641px) {
.mds .mds-container .mds-grid {
gap: var(--mds_foundations_grid_sm_column-gap) var(--mds_foundations_grid_sm_row-gap);
grid-template-columns: repeat(var(--mds_foundations_grid_sm_columns), minmax(0, 1fr));
}
.mds .mds-container .mds-grid .mds-grid-sm-col-1 {
/*
@name: mds-grid-sm-col-1
@category: Grid
@usage:
Use mds-grid-sm-col-1 class to position the cell in the 1 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 1 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-2 {
/*
@name: mds-grid-sm-col-2
@category: Grid
@usage:
Use mds-grid-sm-col-2 class to position the cell in the 2 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 2 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-3 {
/*
@name: mds-grid-sm-col-3
@category: Grid
@usage:
Use mds-grid-sm-col-3 class to position the cell in the 3 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 3 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-4 {
/*
@name: mds-grid-sm-col-4
@category: Grid
@usage:
Use mds-grid-sm-col-4 class to position the cell in the 4 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 4 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-5 {
/*
@name: mds-grid-sm-col-5
@category: Grid
@usage:
Use mds-grid-sm-col-5 class to position the cell in the 5 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 5 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-6 {
/*
@name: mds-grid-sm-col-6
@category: Grid
@usage:
Use mds-grid-sm-col-6 class to position the cell in the 6 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 6 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-7 {
/*
@name: mds-grid-sm-col-7
@category: Grid
@usage:
Use mds-grid-sm-col-7 class to position the cell in the 7 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 7 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-8 {
/*
@name: mds-grid-sm-col-8
@category: Grid
@usage:
Use mds-grid-sm-col-8 class to position the cell in the 8 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 8 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-9 {
/*
@name: mds-grid-sm-col-9
@category: Grid
@usage:
Use mds-grid-sm-col-9 class to position the cell in the 9 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 9 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-10 {
/*
@name: mds-grid-sm-col-10
@category: Grid
@usage:
Use mds-grid-sm-col-10 class to position the cell in the 10 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 10 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-11 {
/*
@name: mds-grid-sm-col-11
@category: Grid
@usage:
Use mds-grid-sm-col-11 class to position the cell in the 11 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 11 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-12 {
/*
@name: mds-grid-sm-col-12
@category: Grid
@usage:
Use mds-grid-sm-col-12 class to position the cell in the 12 column of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 12 for sm breakpoint.
@example:
Cell in column 1 for sm breakpoint
Cell in column 2 for sm breakpoint
...
*/
grid-column-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-1-reverse {
/*
@name: mds-grid-sm-col-1-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 1 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -2;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-2-reverse {
/*
@name: mds-grid-sm-col-2-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 2 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -3;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-3-reverse {
/*
@name: mds-grid-sm-col-3-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 3 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -4;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-4-reverse {
/*
@name: mds-grid-sm-col-4-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 4 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -5;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-5-reverse {
/*
@name: mds-grid-sm-col-5-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 5 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -6;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-6-reverse {
/*
@name: mds-grid-sm-col-6-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 6 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -7;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-7-reverse {
/*
@name: mds-grid-sm-col-7-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 7 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -8;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-8-reverse {
/*
@name: mds-grid-sm-col-8-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 8 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -9;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-9-reverse {
/*
@name: mds-grid-sm-col-9-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 9 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -10;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-10-reverse {
/*
@name: mds-grid-sm-col-10-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 10 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -11;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-11-reverse {
/*
@name: mds-grid-sm-col-11-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 11 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -12;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-12-reverse {
/*
@name: mds-grid-sm-col-12-reverse
@category: Grid
@usage:
Use mds-grid-sm-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 12 from the end for sm breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -13;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-1 {
/*
@name: mds-grid-sm-col-span-1
@category: Grid
@usage:
Use mds-grid-sm-col-span-1 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-1 class to position the cell in the 1 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 1;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-2 {
/*
@name: mds-grid-sm-col-span-2
@category: Grid
@usage:
Use mds-grid-sm-col-span-2 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-2 class to position the cell in the 2 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 2;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-3 {
/*
@name: mds-grid-sm-col-span-3
@category: Grid
@usage:
Use mds-grid-sm-col-span-3 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-3 class to position the cell in the 3 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 3;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-4 {
/*
@name: mds-grid-sm-col-span-4
@category: Grid
@usage:
Use mds-grid-sm-col-span-4 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-4 class to position the cell in the 4 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 4;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-5 {
/*
@name: mds-grid-sm-col-span-5
@category: Grid
@usage:
Use mds-grid-sm-col-span-5 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-5 class to position the cell in the 5 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 5;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-6 {
/*
@name: mds-grid-sm-col-span-6
@category: Grid
@usage:
Use mds-grid-sm-col-span-6 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-6 class to position the cell in the 6 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 6;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-7 {
/*
@name: mds-grid-sm-col-span-7
@category: Grid
@usage:
Use mds-grid-sm-col-span-7 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-7 class to position the cell in the 7 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 7;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-8 {
/*
@name: mds-grid-sm-col-span-8
@category: Grid
@usage:
Use mds-grid-sm-col-span-8 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-8 class to position the cell in the 8 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 8;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-9 {
/*
@name: mds-grid-sm-col-span-9
@category: Grid
@usage:
Use mds-grid-sm-col-span-9 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-9 class to position the cell in the 9 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 9;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-10 {
/*
@name: mds-grid-sm-col-span-10
@category: Grid
@usage:
Use mds-grid-sm-col-span-10 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-10 class to position the cell in the 10 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 10;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-11 {
/*
@name: mds-grid-sm-col-span-11
@category: Grid
@usage:
Use mds-grid-sm-col-span-11 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-11 class to position the cell in the 11 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 11;
}
.mds .mds-container .mds-grid .mds-grid-sm-col-span-12 {
/*
@name: mds-grid-sm-col-span-12
@category: Grid
@usage:
Use mds-grid-sm-col-span-12 class to span multiple cells in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
Use it in combination with mds-grid-sm-col-12 class to position the cell in the 12 column of the grid in sm breakpoint.
@example:
Cell in column 1 that spans over 2 columns in sm breakpoints
...
*/
grid-column-end: span 12;
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-1 {
/*
@name: mds-grid-sm-cols-1
@category: Grid
@usage:
Use mds-grid-sm-cols-1 class to define a grid with 1 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 1 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-2 {
/*
@name: mds-grid-sm-cols-2
@category: Grid
@usage:
Use mds-grid-sm-cols-2 class to define a grid with 2 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 2 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-3 {
/*
@name: mds-grid-sm-cols-3
@category: Grid
@usage:
Use mds-grid-sm-cols-3 class to define a grid with 3 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 3 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-4 {
/*
@name: mds-grid-sm-cols-4
@category: Grid
@usage:
Use mds-grid-sm-cols-4 class to define a grid with 4 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 4 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-5 {
/*
@name: mds-grid-sm-cols-5
@category: Grid
@usage:
Use mds-grid-sm-cols-5 class to define a grid with 5 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 5 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-6 {
/*
@name: mds-grid-sm-cols-6
@category: Grid
@usage:
Use mds-grid-sm-cols-6 class to define a grid with 6 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 6 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-7 {
/*
@name: mds-grid-sm-cols-7
@category: Grid
@usage:
Use mds-grid-sm-cols-7 class to define a grid with 7 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 7 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-8 {
/*
@name: mds-grid-sm-cols-8
@category: Grid
@usage:
Use mds-grid-sm-cols-8 class to define a grid with 8 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 8 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-9 {
/*
@name: mds-grid-sm-cols-9
@category: Grid
@usage:
Use mds-grid-sm-cols-9 class to define a grid with 9 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 9 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-10 {
/*
@name: mds-grid-sm-cols-10
@category: Grid
@usage:
Use mds-grid-sm-cols-10 class to define a grid with 10 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 10 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-11 {
/*
@name: mds-grid-sm-cols-11
@category: Grid
@usage:
Use mds-grid-sm-cols-11 class to define a grid with 11 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 11 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-sm-cols-12 {
/*
@name: mds-grid-sm-cols-12
@category: Grid
@usage:
Use mds-grid-sm-cols-12 class to define a grid with 12 columns for sm breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
@example:
Grid will have 12 number of columns in sm breakpoint.
*/
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.mds .mds-container .mds-grid .mds-grid-sm-row-1 {
/*
@name: mds-grid-sm-row-1
@category: Grid
@usage:
Use mds-grid-sm-row-1 class to position the cell in the 1 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 1 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-2 {
/*
@name: mds-grid-sm-row-2
@category: Grid
@usage:
Use mds-grid-sm-row-2 class to position the cell in the 2 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 2 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-3 {
/*
@name: mds-grid-sm-row-3
@category: Grid
@usage:
Use mds-grid-sm-row-3 class to position the cell in the 3 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 3 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-4 {
/*
@name: mds-grid-sm-row-4
@category: Grid
@usage:
Use mds-grid-sm-row-4 class to position the cell in the 4 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 4 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-5 {
/*
@name: mds-grid-sm-row-5
@category: Grid
@usage:
Use mds-grid-sm-row-5 class to position the cell in the 5 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 5 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-6 {
/*
@name: mds-grid-sm-row-6
@category: Grid
@usage:
Use mds-grid-sm-row-6 class to position the cell in the 6 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 6 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-7 {
/*
@name: mds-grid-sm-row-7
@category: Grid
@usage:
Use mds-grid-sm-row-7 class to position the cell in the 7 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 7 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-8 {
/*
@name: mds-grid-sm-row-8
@category: Grid
@usage:
Use mds-grid-sm-row-8 class to position the cell in the 8 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 8 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-9 {
/*
@name: mds-grid-sm-row-9
@category: Grid
@usage:
Use mds-grid-sm-row-9 class to position the cell in the 9 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 9 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-10 {
/*
@name: mds-grid-sm-row-10
@category: Grid
@usage:
Use mds-grid-sm-row-10 class to position the cell in the 10 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 10 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-11 {
/*
@name: mds-grid-sm-row-11
@category: Grid
@usage:
Use mds-grid-sm-row-11 class to position the cell in the 11 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 11 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-12 {
/*
@name: mds-grid-sm-row-12
@category: Grid
@usage:
Use mds-grid-sm-row-12 class to position the cell in the 12 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 12 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-13 {
/*
@name: mds-grid-sm-row-13
@category: Grid
@usage:
Use mds-grid-sm-row-13 class to position the cell in the 13 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 13 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 13;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-14 {
/*
@name: mds-grid-sm-row-14
@category: Grid
@usage:
Use mds-grid-sm-row-14 class to position the cell in the 14 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 14 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 14;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-15 {
/*
@name: mds-grid-sm-row-15
@category: Grid
@usage:
Use mds-grid-sm-row-15 class to position the cell in the 15 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 15 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 15;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-16 {
/*
@name: mds-grid-sm-row-16
@category: Grid
@usage:
Use mds-grid-sm-row-16 class to position the cell in the 16 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 16 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 16;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-17 {
/*
@name: mds-grid-sm-row-17
@category: Grid
@usage:
Use mds-grid-sm-row-17 class to position the cell in the 17 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 17 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 17;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-18 {
/*
@name: mds-grid-sm-row-18
@category: Grid
@usage:
Use mds-grid-sm-row-18 class to position the cell in the 18 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 18 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 18;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-19 {
/*
@name: mds-grid-sm-row-19
@category: Grid
@usage:
Use mds-grid-sm-row-19 class to position the cell in the 19 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 19 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 19;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-20 {
/*
@name: mds-grid-sm-row-20
@category: Grid
@usage:
Use mds-grid-sm-row-20 class to position the cell in the 20 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 20 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 20;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-21 {
/*
@name: mds-grid-sm-row-21
@category: Grid
@usage:
Use mds-grid-sm-row-21 class to position the cell in the 21 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 21 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 21;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-22 {
/*
@name: mds-grid-sm-row-22
@category: Grid
@usage:
Use mds-grid-sm-row-22 class to position the cell in the 22 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 22 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 22;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-23 {
/*
@name: mds-grid-sm-row-23
@category: Grid
@usage:
Use mds-grid-sm-row-23 class to position the cell in the 23 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 23 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 23;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-24 {
/*
@name: mds-grid-sm-row-24
@category: Grid
@usage:
Use mds-grid-sm-row-24 class to position the cell in the 24 row of the grid in sm breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 24 for sm breakpoint.
@example:
Cell in row 1 for sm breakpoint
Cell in row 2 for sm breakpoint
...
*/
grid-row-start: 24;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-1 {
/*
@name: mds-grid-sm-row-span-1
@category: Grid
@usage:
Use mds-grid-sm-row-span-1 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 1 rows in sm breakpoints
...
*/
grid-row-end: span 1;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-2 {
/*
@name: mds-grid-sm-row-span-2
@category: Grid
@usage:
Use mds-grid-sm-row-span-2 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 2 rows in sm breakpoints
...
*/
grid-row-end: span 2;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-3 {
/*
@name: mds-grid-sm-row-span-3
@category: Grid
@usage:
Use mds-grid-sm-row-span-3 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 3 rows in sm breakpoints
...
*/
grid-row-end: span 3;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-4 {
/*
@name: mds-grid-sm-row-span-4
@category: Grid
@usage:
Use mds-grid-sm-row-span-4 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 4 rows in sm breakpoints
...
*/
grid-row-end: span 4;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-5 {
/*
@name: mds-grid-sm-row-span-5
@category: Grid
@usage:
Use mds-grid-sm-row-span-5 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 5 rows in sm breakpoints
...
*/
grid-row-end: span 5;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-6 {
/*
@name: mds-grid-sm-row-span-6
@category: Grid
@usage:
Use mds-grid-sm-row-span-6 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 6 rows in sm breakpoints
...
*/
grid-row-end: span 6;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-7 {
/*
@name: mds-grid-sm-row-span-7
@category: Grid
@usage:
Use mds-grid-sm-row-span-7 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 7 rows in sm breakpoints
...
*/
grid-row-end: span 7;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-8 {
/*
@name: mds-grid-sm-row-span-8
@category: Grid
@usage:
Use mds-grid-sm-row-span-8 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 8 rows in sm breakpoints
...
*/
grid-row-end: span 8;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-9 {
/*
@name: mds-grid-sm-row-span-9
@category: Grid
@usage:
Use mds-grid-sm-row-span-9 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 9 rows in sm breakpoints
...
*/
grid-row-end: span 9;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-10 {
/*
@name: mds-grid-sm-row-span-10
@category: Grid
@usage:
Use mds-grid-sm-row-span-10 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 10 rows in sm breakpoints
...
*/
grid-row-end: span 10;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-11 {
/*
@name: mds-grid-sm-row-span-11
@category: Grid
@usage:
Use mds-grid-sm-row-span-11 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 11 rows in sm breakpoints
...
*/
grid-row-end: span 11;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-12 {
/*
@name: mds-grid-sm-row-span-12
@category: Grid
@usage:
Use mds-grid-sm-row-span-12 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 12 rows in sm breakpoints
...
*/
grid-row-end: span 12;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-13 {
/*
@name: mds-grid-sm-row-span-13
@category: Grid
@usage:
Use mds-grid-sm-row-span-13 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 13 rows in sm breakpoints
...
*/
grid-row-end: span 13;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-14 {
/*
@name: mds-grid-sm-row-span-14
@category: Grid
@usage:
Use mds-grid-sm-row-span-14 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 14 rows in sm breakpoints
...
*/
grid-row-end: span 14;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-15 {
/*
@name: mds-grid-sm-row-span-15
@category: Grid
@usage:
Use mds-grid-sm-row-span-15 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 15 rows in sm breakpoints
...
*/
grid-row-end: span 15;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-16 {
/*
@name: mds-grid-sm-row-span-16
@category: Grid
@usage:
Use mds-grid-sm-row-span-16 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 16 rows in sm breakpoints
...
*/
grid-row-end: span 16;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-17 {
/*
@name: mds-grid-sm-row-span-17
@category: Grid
@usage:
Use mds-grid-sm-row-span-17 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 17 rows in sm breakpoints
...
*/
grid-row-end: span 17;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-18 {
/*
@name: mds-grid-sm-row-span-18
@category: Grid
@usage:
Use mds-grid-sm-row-span-18 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 18 rows in sm breakpoints
...
*/
grid-row-end: span 18;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-19 {
/*
@name: mds-grid-sm-row-span-19
@category: Grid
@usage:
Use mds-grid-sm-row-span-19 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 19 rows in sm breakpoints
...
*/
grid-row-end: span 19;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-20 {
/*
@name: mds-grid-sm-row-span-20
@category: Grid
@usage:
Use mds-grid-sm-row-span-20 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 20 rows in sm breakpoints
...
*/
grid-row-end: span 20;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-21 {
/*
@name: mds-grid-sm-row-span-21
@category: Grid
@usage:
Use mds-grid-sm-row-span-21 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 21 rows in sm breakpoints
...
*/
grid-row-end: span 21;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-22 {
/*
@name: mds-grid-sm-row-span-22
@category: Grid
@usage:
Use mds-grid-sm-row-span-22 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 22 rows in sm breakpoints
...
*/
grid-row-end: span 22;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-23 {
/*
@name: mds-grid-sm-row-span-23
@category: Grid
@usage:
Use mds-grid-sm-row-span-23 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 23 rows in sm breakpoints
...
*/
grid-row-end: span 23;
}
.mds .mds-container .mds-grid .mds-grid-sm-row-span-24 {
/*
@name: mds-grid-sm-row-span-24
@category: Grid
@usage:
Use mds-grid-sm-row-span-24 class to span multiple rows in your grid for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
@example:
Cell spans over 24 rows in sm breakpoints
...
*/
grid-row-end: span 24;
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-1 {
/*
@name: mds-grid-sm-rows-1
@category: Grid
@usage:
Use mds-grid-sm-rows-1 class to define a grid with 1 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 1 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(1, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-2 {
/*
@name: mds-grid-sm-rows-2
@category: Grid
@usage:
Use mds-grid-sm-rows-2 class to define a grid with 2 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 2 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(2, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-3 {
/*
@name: mds-grid-sm-rows-3
@category: Grid
@usage:
Use mds-grid-sm-rows-3 class to define a grid with 3 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 3 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(3, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-4 {
/*
@name: mds-grid-sm-rows-4
@category: Grid
@usage:
Use mds-grid-sm-rows-4 class to define a grid with 4 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 4 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(4, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-5 {
/*
@name: mds-grid-sm-rows-5
@category: Grid
@usage:
Use mds-grid-sm-rows-5 class to define a grid with 5 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 5 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(5, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-6 {
/*
@name: mds-grid-sm-rows-6
@category: Grid
@usage:
Use mds-grid-sm-rows-6 class to define a grid with 6 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 6 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(6, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-7 {
/*
@name: mds-grid-sm-rows-7
@category: Grid
@usage:
Use mds-grid-sm-rows-7 class to define a grid with 7 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 7 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(7, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-8 {
/*
@name: mds-grid-sm-rows-8
@category: Grid
@usage:
Use mds-grid-sm-rows-8 class to define a grid with 8 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 8 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(8, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-9 {
/*
@name: mds-grid-sm-rows-9
@category: Grid
@usage:
Use mds-grid-sm-rows-9 class to define a grid with 9 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 9 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(9, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-10 {
/*
@name: mds-grid-sm-rows-10
@category: Grid
@usage:
Use mds-grid-sm-rows-10 class to define a grid with 10 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 10 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(10, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-11 {
/*
@name: mds-grid-sm-rows-11
@category: Grid
@usage:
Use mds-grid-sm-rows-11 class to define a grid with 11 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 11 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(11, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-12 {
/*
@name: mds-grid-sm-rows-12
@category: Grid
@usage:
Use mds-grid-sm-rows-12 class to define a grid with 12 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 12 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(12, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-13 {
/*
@name: mds-grid-sm-rows-13
@category: Grid
@usage:
Use mds-grid-sm-rows-13 class to define a grid with 13 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 13 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(13, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-14 {
/*
@name: mds-grid-sm-rows-14
@category: Grid
@usage:
Use mds-grid-sm-rows-14 class to define a grid with 14 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 14 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(14, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-15 {
/*
@name: mds-grid-sm-rows-15
@category: Grid
@usage:
Use mds-grid-sm-rows-15 class to define a grid with 15 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 15 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(15, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-16 {
/*
@name: mds-grid-sm-rows-16
@category: Grid
@usage:
Use mds-grid-sm-rows-16 class to define a grid with 16 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 16 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(16, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-17 {
/*
@name: mds-grid-sm-rows-17
@category: Grid
@usage:
Use mds-grid-sm-rows-17 class to define a grid with 17 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 17 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(17, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-18 {
/*
@name: mds-grid-sm-rows-18
@category: Grid
@usage:
Use mds-grid-sm-rows-18 class to define a grid with 18 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 18 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(18, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-19 {
/*
@name: mds-grid-sm-rows-19
@category: Grid
@usage:
Use mds-grid-sm-rows-19 class to define a grid with 19 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 19 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(19, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-20 {
/*
@name: mds-grid-sm-rows-20
@category: Grid
@usage:
Use mds-grid-sm-rows-20 class to define a grid with 20 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 20 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(20, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-21 {
/*
@name: mds-grid-sm-rows-21
@category: Grid
@usage:
Use mds-grid-sm-rows-21 class to define a grid with 21 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 21 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(21, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-22 {
/*
@name: mds-grid-sm-rows-22
@category: Grid
@usage:
Use mds-grid-sm-rows-22 class to define a grid with 22 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 22 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(22, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-23 {
/*
@name: mds-grid-sm-rows-23
@category: Grid
@usage:
Use mds-grid-sm-rows-23 class to define a grid with 23 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 23 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(23, auto);
}
.mds .mds-container .mds-grid.mds-grid-sm-rows-24 {
/*
@name: mds-grid-sm-rows-24
@category: Grid
@usage:
Use mds-grid-sm-rows-24 class to define a grid with 24 rows for sm breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
@example:
Grid will have 24 number of rows in sm breakpoint.
*/
grid-template-rows: repeat(24, auto);
}
}
@container (min-width: 1025px) {
.mds .mds-container .mds-grid {
gap: var(--mds_foundations_grid_md_column-gap) var(--mds_foundations_grid_md_row-gap);
grid-template-columns: repeat(var(--mds_foundations_grid_md_columns), minmax(0, 1fr));
}
.mds .mds-container .mds-grid .mds-grid-md-col-1 {
/*
@name: mds-grid-md-col-1
@category: Grid
@usage:
Use mds-grid-md-col-1 class to position the cell in the 1 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 1 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-md-col-2 {
/*
@name: mds-grid-md-col-2
@category: Grid
@usage:
Use mds-grid-md-col-2 class to position the cell in the 2 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 2 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-md-col-3 {
/*
@name: mds-grid-md-col-3
@category: Grid
@usage:
Use mds-grid-md-col-3 class to position the cell in the 3 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 3 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-md-col-4 {
/*
@name: mds-grid-md-col-4
@category: Grid
@usage:
Use mds-grid-md-col-4 class to position the cell in the 4 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 4 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-md-col-5 {
/*
@name: mds-grid-md-col-5
@category: Grid
@usage:
Use mds-grid-md-col-5 class to position the cell in the 5 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 5 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-md-col-6 {
/*
@name: mds-grid-md-col-6
@category: Grid
@usage:
Use mds-grid-md-col-6 class to position the cell in the 6 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 6 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-md-col-7 {
/*
@name: mds-grid-md-col-7
@category: Grid
@usage:
Use mds-grid-md-col-7 class to position the cell in the 7 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 7 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-md-col-8 {
/*
@name: mds-grid-md-col-8
@category: Grid
@usage:
Use mds-grid-md-col-8 class to position the cell in the 8 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 8 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-md-col-9 {
/*
@name: mds-grid-md-col-9
@category: Grid
@usage:
Use mds-grid-md-col-9 class to position the cell in the 9 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 9 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-md-col-10 {
/*
@name: mds-grid-md-col-10
@category: Grid
@usage:
Use mds-grid-md-col-10 class to position the cell in the 10 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 10 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-md-col-11 {
/*
@name: mds-grid-md-col-11
@category: Grid
@usage:
Use mds-grid-md-col-11 class to position the cell in the 11 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 11 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-md-col-12 {
/*
@name: mds-grid-md-col-12
@category: Grid
@usage:
Use mds-grid-md-col-12 class to position the cell in the 12 column of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in column 12 for md breakpoint.
@example:
Cell in column 1 for md breakpoint
Cell in column 2 for md breakpoint
...
*/
grid-column-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-md-col-1-reverse {
/*
@name: mds-grid-md-col-1-reverse
@category: Grid
@usage:
Use mds-grid-md-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 1 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -2;
}
.mds .mds-container .mds-grid .mds-grid-md-col-2-reverse {
/*
@name: mds-grid-md-col-2-reverse
@category: Grid
@usage:
Use mds-grid-md-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 2 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -3;
}
.mds .mds-container .mds-grid .mds-grid-md-col-3-reverse {
/*
@name: mds-grid-md-col-3-reverse
@category: Grid
@usage:
Use mds-grid-md-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 3 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -4;
}
.mds .mds-container .mds-grid .mds-grid-md-col-4-reverse {
/*
@name: mds-grid-md-col-4-reverse
@category: Grid
@usage:
Use mds-grid-md-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 4 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -5;
}
.mds .mds-container .mds-grid .mds-grid-md-col-5-reverse {
/*
@name: mds-grid-md-col-5-reverse
@category: Grid
@usage:
Use mds-grid-md-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 5 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -6;
}
.mds .mds-container .mds-grid .mds-grid-md-col-6-reverse {
/*
@name: mds-grid-md-col-6-reverse
@category: Grid
@usage:
Use mds-grid-md-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 6 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -7;
}
.mds .mds-container .mds-grid .mds-grid-md-col-7-reverse {
/*
@name: mds-grid-md-col-7-reverse
@category: Grid
@usage:
Use mds-grid-md-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 7 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -8;
}
.mds .mds-container .mds-grid .mds-grid-md-col-8-reverse {
/*
@name: mds-grid-md-col-8-reverse
@category: Grid
@usage:
Use mds-grid-md-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 8 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -9;
}
.mds .mds-container .mds-grid .mds-grid-md-col-9-reverse {
/*
@name: mds-grid-md-col-9-reverse
@category: Grid
@usage:
Use mds-grid-md-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 9 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -10;
}
.mds .mds-container .mds-grid .mds-grid-md-col-10-reverse {
/*
@name: mds-grid-md-col-10-reverse
@category: Grid
@usage:
Use mds-grid-md-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 10 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -11;
}
.mds .mds-container .mds-grid .mds-grid-md-col-11-reverse {
/*
@name: mds-grid-md-col-11-reverse
@category: Grid
@usage:
Use mds-grid-md-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 11 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -12;
}
.mds .mds-container .mds-grid .mds-grid-md-col-12-reverse {
/*
@name: mds-grid-md-col-12-reverse
@category: Grid
@usage:
Use mds-grid-md-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will be only in column 12 from the end for md breakpoint.
@example:
Cell in column 2 from the end in all breakpoints
Cell in column 1 from the end in all breakpoints
...
*/
grid-column-start: -13;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-1 {
/*
@name: mds-grid-md-col-span-1
@category: Grid
@usage:
Use mds-grid-md-col-span-1 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-1 class to position the cell in the 1 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 1;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-2 {
/*
@name: mds-grid-md-col-span-2
@category: Grid
@usage:
Use mds-grid-md-col-span-2 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-2 class to position the cell in the 2 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 2;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-3 {
/*
@name: mds-grid-md-col-span-3
@category: Grid
@usage:
Use mds-grid-md-col-span-3 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-3 class to position the cell in the 3 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 3;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-4 {
/*
@name: mds-grid-md-col-span-4
@category: Grid
@usage:
Use mds-grid-md-col-span-4 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-4 class to position the cell in the 4 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 4;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-5 {
/*
@name: mds-grid-md-col-span-5
@category: Grid
@usage:
Use mds-grid-md-col-span-5 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-5 class to position the cell in the 5 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 5;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-6 {
/*
@name: mds-grid-md-col-span-6
@category: Grid
@usage:
Use mds-grid-md-col-span-6 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-6 class to position the cell in the 6 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 6;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-7 {
/*
@name: mds-grid-md-col-span-7
@category: Grid
@usage:
Use mds-grid-md-col-span-7 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-7 class to position the cell in the 7 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 7;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-8 {
/*
@name: mds-grid-md-col-span-8
@category: Grid
@usage:
Use mds-grid-md-col-span-8 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-8 class to position the cell in the 8 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 8;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-9 {
/*
@name: mds-grid-md-col-span-9
@category: Grid
@usage:
Use mds-grid-md-col-span-9 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-9 class to position the cell in the 9 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 9;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-10 {
/*
@name: mds-grid-md-col-span-10
@category: Grid
@usage:
Use mds-grid-md-col-span-10 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-10 class to position the cell in the 10 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 10;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-11 {
/*
@name: mds-grid-md-col-span-11
@category: Grid
@usage:
Use mds-grid-md-col-span-11 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-11 class to position the cell in the 11 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 11;
}
.mds .mds-container .mds-grid .mds-grid-md-col-span-12 {
/*
@name: mds-grid-md-col-span-12
@category: Grid
@usage:
Use mds-grid-md-col-span-12 class to span multiple cells in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
Use it in combination with mds-grid-md-col-12 class to position the cell in the 12 column of the grid in md breakpoint.
@example:
Cell in column 1 that spans over 2 columns in md breakpoints
...
*/
grid-column-end: span 12;
}
.mds .mds-container .mds-grid.mds-grid-md-cols-1 {
/*
@name: mds-grid-md-cols-1
@category: Grid
@usage:
Use mds-grid-md-cols-1 class to define a grid with 1 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 1 number of columns in md breakpoint.
*/
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-2 {
/*
@name: mds-grid-md-cols-2
@category: Grid
@usage:
Use mds-grid-md-cols-2 class to define a grid with 2 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 2 number of columns in md breakpoint.
*/
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-3 {
/*
@name: mds-grid-md-cols-3
@category: Grid
@usage:
Use mds-grid-md-cols-3 class to define a grid with 3 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 3 number of columns in md breakpoint.
*/
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-4 {
/*
@name: mds-grid-md-cols-4
@category: Grid
@usage:
Use mds-grid-md-cols-4 class to define a grid with 4 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 4 number of columns in md breakpoint.
*/
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-5 {
/*
@name: mds-grid-md-cols-5
@category: Grid
@usage:
Use mds-grid-md-cols-5 class to define a grid with 5 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 5 number of columns in md breakpoint.
*/
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-6 {
/*
@name: mds-grid-md-cols-6
@category: Grid
@usage:
Use mds-grid-md-cols-6 class to define a grid with 6 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 6 number of columns in md breakpoint.
*/
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-7 {
/*
@name: mds-grid-md-cols-7
@category: Grid
@usage:
Use mds-grid-md-cols-7 class to define a grid with 7 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 7 number of columns in md breakpoint.
*/
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-8 {
/*
@name: mds-grid-md-cols-8
@category: Grid
@usage:
Use mds-grid-md-cols-8 class to define a grid with 8 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 8 number of columns in md breakpoint.
*/
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-9 {
/*
@name: mds-grid-md-cols-9
@category: Grid
@usage:
Use mds-grid-md-cols-9 class to define a grid with 9 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 9 number of columns in md breakpoint.
*/
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-10 {
/*
@name: mds-grid-md-cols-10
@category: Grid
@usage:
Use mds-grid-md-cols-10 class to define a grid with 10 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 10 number of columns in md breakpoint.
*/
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-11 {
/*
@name: mds-grid-md-cols-11
@category: Grid
@usage:
Use mds-grid-md-cols-11 class to define a grid with 11 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 11 number of columns in md breakpoint.
*/
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.mds .mds-container .mds-grid.mds-grid-md-cols-12 {
/*
@name: mds-grid-md-cols-12
@category: Grid
@usage:
Use mds-grid-md-cols-12 class to define a grid with 12 columns for md breakpoint.
The default number of columns is:
- 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
- 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
- 2 columns for viewport below 640px, and MDS breakpoints: xs.
But you can override it using this class.
The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
@example:
Grid will have 12 number of columns in md breakpoint.
*/
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.mds .mds-container .mds-grid .mds-grid-md-row-1 {
/*
@name: mds-grid-md-row-1
@category: Grid
@usage:
Use mds-grid-md-row-1 class to position the cell in the 1 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 1 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 1;
}
.mds .mds-container .mds-grid .mds-grid-md-row-2 {
/*
@name: mds-grid-md-row-2
@category: Grid
@usage:
Use mds-grid-md-row-2 class to position the cell in the 2 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 2 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 2;
}
.mds .mds-container .mds-grid .mds-grid-md-row-3 {
/*
@name: mds-grid-md-row-3
@category: Grid
@usage:
Use mds-grid-md-row-3 class to position the cell in the 3 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 3 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 3;
}
.mds .mds-container .mds-grid .mds-grid-md-row-4 {
/*
@name: mds-grid-md-row-4
@category: Grid
@usage:
Use mds-grid-md-row-4 class to position the cell in the 4 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 4 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 4;
}
.mds .mds-container .mds-grid .mds-grid-md-row-5 {
/*
@name: mds-grid-md-row-5
@category: Grid
@usage:
Use mds-grid-md-row-5 class to position the cell in the 5 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 5 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 5;
}
.mds .mds-container .mds-grid .mds-grid-md-row-6 {
/*
@name: mds-grid-md-row-6
@category: Grid
@usage:
Use mds-grid-md-row-6 class to position the cell in the 6 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 6 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 6;
}
.mds .mds-container .mds-grid .mds-grid-md-row-7 {
/*
@name: mds-grid-md-row-7
@category: Grid
@usage:
Use mds-grid-md-row-7 class to position the cell in the 7 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 7 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 7;
}
.mds .mds-container .mds-grid .mds-grid-md-row-8 {
/*
@name: mds-grid-md-row-8
@category: Grid
@usage:
Use mds-grid-md-row-8 class to position the cell in the 8 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 8 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 8;
}
.mds .mds-container .mds-grid .mds-grid-md-row-9 {
/*
@name: mds-grid-md-row-9
@category: Grid
@usage:
Use mds-grid-md-row-9 class to position the cell in the 9 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 9 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 9;
}
.mds .mds-container .mds-grid .mds-grid-md-row-10 {
/*
@name: mds-grid-md-row-10
@category: Grid
@usage:
Use mds-grid-md-row-10 class to position the cell in the 10 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 10 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 10;
}
.mds .mds-container .mds-grid .mds-grid-md-row-11 {
/*
@name: mds-grid-md-row-11
@category: Grid
@usage:
Use mds-grid-md-row-11 class to position the cell in the 11 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 11 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 11;
}
.mds .mds-container .mds-grid .mds-grid-md-row-12 {
/*
@name: mds-grid-md-row-12
@category: Grid
@usage:
Use mds-grid-md-row-12 class to position the cell in the 12 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 12 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 12;
}
.mds .mds-container .mds-grid .mds-grid-md-row-13 {
/*
@name: mds-grid-md-row-13
@category: Grid
@usage:
Use mds-grid-md-row-13 class to position the cell in the 13 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 13 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 13;
}
.mds .mds-container .mds-grid .mds-grid-md-row-14 {
/*
@name: mds-grid-md-row-14
@category: Grid
@usage:
Use mds-grid-md-row-14 class to position the cell in the 14 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 14 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 14;
}
.mds .mds-container .mds-grid .mds-grid-md-row-15 {
/*
@name: mds-grid-md-row-15
@category: Grid
@usage:
Use mds-grid-md-row-15 class to position the cell in the 15 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 15 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 15;
}
.mds .mds-container .mds-grid .mds-grid-md-row-16 {
/*
@name: mds-grid-md-row-16
@category: Grid
@usage:
Use mds-grid-md-row-16 class to position the cell in the 16 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 16 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 16;
}
.mds .mds-container .mds-grid .mds-grid-md-row-17 {
/*
@name: mds-grid-md-row-17
@category: Grid
@usage:
Use mds-grid-md-row-17 class to position the cell in the 17 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 17 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 17;
}
.mds .mds-container .mds-grid .mds-grid-md-row-18 {
/*
@name: mds-grid-md-row-18
@category: Grid
@usage:
Use mds-grid-md-row-18 class to position the cell in the 18 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 18 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 18;
}
.mds .mds-container .mds-grid .mds-grid-md-row-19 {
/*
@name: mds-grid-md-row-19
@category: Grid
@usage:
Use mds-grid-md-row-19 class to position the cell in the 19 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 19 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 19;
}
.mds .mds-container .mds-grid .mds-grid-md-row-20 {
/*
@name: mds-grid-md-row-20
@category: Grid
@usage:
Use mds-grid-md-row-20 class to position the cell in the 20 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 20 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 20;
}
.mds .mds-container .mds-grid .mds-grid-md-row-21 {
/*
@name: mds-grid-md-row-21
@category: Grid
@usage:
Use mds-grid-md-row-21 class to position the cell in the 21 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 21 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 21;
}
.mds .mds-container .mds-grid .mds-grid-md-row-22 {
/*
@name: mds-grid-md-row-22
@category: Grid
@usage:
Use mds-grid-md-row-22 class to position the cell in the 22 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 22 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 22;
}
.mds .mds-container .mds-grid .mds-grid-md-row-23 {
/*
@name: mds-grid-md-row-23
@category: Grid
@usage:
Use mds-grid-md-row-23 class to position the cell in the 23 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 23 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 23;
}
.mds .mds-container .mds-grid .mds-grid-md-row-24 {
/*
@name: mds-grid-md-row-24
@category: Grid
@usage:
Use mds-grid-md-row-24 class to position the cell in the 24 row of the grid in md breakpoint.
The class is dependent of the breakpoint, so when applied, the cell will only be in row 24 for md breakpoint.
@example:
Cell in row 1 for md breakpoint
Cell in row 2 for md breakpoint
...
*/
grid-row-start: 24;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-1 {
/*
@name: mds-grid-md-row-span-1
@category: Grid
@usage:
Use mds-grid-md-row-span-1 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 1 rows in md breakpoints
...
*/
grid-row-end: span 1;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-2 {
/*
@name: mds-grid-md-row-span-2
@category: Grid
@usage:
Use mds-grid-md-row-span-2 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 2 rows in md breakpoints
...
*/
grid-row-end: span 2;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-3 {
/*
@name: mds-grid-md-row-span-3
@category: Grid
@usage:
Use mds-grid-md-row-span-3 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 3 rows in md breakpoints
...
*/
grid-row-end: span 3;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-4 {
/*
@name: mds-grid-md-row-span-4
@category: Grid
@usage:
Use mds-grid-md-row-span-4 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 4 rows in md breakpoints
...
*/
grid-row-end: span 4;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-5 {
/*
@name: mds-grid-md-row-span-5
@category: Grid
@usage:
Use mds-grid-md-row-span-5 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 5 rows in md breakpoints
...
*/
grid-row-end: span 5;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-6 {
/*
@name: mds-grid-md-row-span-6
@category: Grid
@usage:
Use mds-grid-md-row-span-6 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 6 rows in md breakpoints
...
*/
grid-row-end: span 6;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-7 {
/*
@name: mds-grid-md-row-span-7
@category: Grid
@usage:
Use mds-grid-md-row-span-7 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 7 rows in md breakpoints
...
*/
grid-row-end: span 7;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-8 {
/*
@name: mds-grid-md-row-span-8
@category: Grid
@usage:
Use mds-grid-md-row-span-8 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 8 rows in md breakpoints
...
*/
grid-row-end: span 8;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-9 {
/*
@name: mds-grid-md-row-span-9
@category: Grid
@usage:
Use mds-grid-md-row-span-9 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 9 rows in md breakpoints
...
*/
grid-row-end: span 9;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-10 {
/*
@name: mds-grid-md-row-span-10
@category: Grid
@usage:
Use mds-grid-md-row-span-10 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 10 rows in md breakpoints
...
*/
grid-row-end: span 10;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-11 {
/*
@name: mds-grid-md-row-span-11
@category: Grid
@usage:
Use mds-grid-md-row-span-11 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 11 rows in md breakpoints
...
*/
grid-row-end: span 11;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-12 {
/*
@name: mds-grid-md-row-span-12
@category: Grid
@usage:
Use mds-grid-md-row-span-12 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 12 rows in md breakpoints
...
*/
grid-row-end: span 12;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-13 {
/*
@name: mds-grid-md-row-span-13
@category: Grid
@usage:
Use mds-grid-md-row-span-13 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 13 rows in md breakpoints
...
*/
grid-row-end: span 13;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-14 {
/*
@name: mds-grid-md-row-span-14
@category: Grid
@usage:
Use mds-grid-md-row-span-14 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 14 rows in md breakpoints
...
*/
grid-row-end: span 14;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-15 {
/*
@name: mds-grid-md-row-span-15
@category: Grid
@usage:
Use mds-grid-md-row-span-15 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 15 rows in md breakpoints
...
*/
grid-row-end: span 15;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-16 {
/*
@name: mds-grid-md-row-span-16
@category: Grid
@usage:
Use mds-grid-md-row-span-16 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 16 rows in md breakpoints
...
*/
grid-row-end: span 16;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-17 {
/*
@name: mds-grid-md-row-span-17
@category: Grid
@usage:
Use mds-grid-md-row-span-17 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 17 rows in md breakpoints
...
*/
grid-row-end: span 17;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-18 {
/*
@name: mds-grid-md-row-span-18
@category: Grid
@usage:
Use mds-grid-md-row-span-18 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 18 rows in md breakpoints
...
*/
grid-row-end: span 18;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-19 {
/*
@name: mds-grid-md-row-span-19
@category: Grid
@usage:
Use mds-grid-md-row-span-19 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 19 rows in md breakpoints
...
*/
grid-row-end: span 19;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-20 {
/*
@name: mds-grid-md-row-span-20
@category: Grid
@usage:
Use mds-grid-md-row-span-20 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 20 rows in md breakpoints
...
*/
grid-row-end: span 20;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-21 {
/*
@name: mds-grid-md-row-span-21
@category: Grid
@usage:
Use mds-grid-md-row-span-21 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 21 rows in md breakpoints
...
*/
grid-row-end: span 21;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-22 {
/*
@name: mds-grid-md-row-span-22
@category: Grid
@usage:
Use mds-grid-md-row-span-22 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 22 rows in md breakpoints
...
*/
grid-row-end: span 22;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-23 {
/*
@name: mds-grid-md-row-span-23
@category: Grid
@usage:
Use mds-grid-md-row-span-23 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 23 rows in md breakpoints
...
*/
grid-row-end: span 23;
}
.mds .mds-container .mds-grid .mds-grid-md-row-span-24 {
/*
@name: mds-grid-md-row-span-24
@category: Grid
@usage:
Use mds-grid-md-row-span-24 class to span multiple rows in your grid for md breakpoint.
The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
@example:
Cell spans over 24 rows in md breakpoints
...
*/
grid-row-end: span 24;
}
.mds .mds-container .mds-grid.mds-grid-md-rows-1 {
/*
@name: mds-grid-md-rows-1
@category: Grid
@usage:
Use mds-grid-md-rows-1 class to define a grid with 1 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 1 number of rows in md breakpoint.
*/
grid-template-rows: repeat(1, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-2 {
/*
@name: mds-grid-md-rows-2
@category: Grid
@usage:
Use mds-grid-md-rows-2 class to define a grid with 2 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 2 number of rows in md breakpoint.
*/
grid-template-rows: repeat(2, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-3 {
/*
@name: mds-grid-md-rows-3
@category: Grid
@usage:
Use mds-grid-md-rows-3 class to define a grid with 3 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 3 number of rows in md breakpoint.
*/
grid-template-rows: repeat(3, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-4 {
/*
@name: mds-grid-md-rows-4
@category: Grid
@usage:
Use mds-grid-md-rows-4 class to define a grid with 4 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 4 number of rows in md breakpoint.
*/
grid-template-rows: repeat(4, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-5 {
/*
@name: mds-grid-md-rows-5
@category: Grid
@usage:
Use mds-grid-md-rows-5 class to define a grid with 5 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 5 number of rows in md breakpoint.
*/
grid-template-rows: repeat(5, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-6 {
/*
@name: mds-grid-md-rows-6
@category: Grid
@usage:
Use mds-grid-md-rows-6 class to define a grid with 6 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 6 number of rows in md breakpoint.
*/
grid-template-rows: repeat(6, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-7 {
/*
@name: mds-grid-md-rows-7
@category: Grid
@usage:
Use mds-grid-md-rows-7 class to define a grid with 7 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 7 number of rows in md breakpoint.
*/
grid-template-rows: repeat(7, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-8 {
/*
@name: mds-grid-md-rows-8
@category: Grid
@usage:
Use mds-grid-md-rows-8 class to define a grid with 8 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 8 number of rows in md breakpoint.
*/
grid-template-rows: repeat(8, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-9 {
/*
@name: mds-grid-md-rows-9
@category: Grid
@usage:
Use mds-grid-md-rows-9 class to define a grid with 9 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 9 number of rows in md breakpoint.
*/
grid-template-rows: repeat(9, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-10 {
/*
@name: mds-grid-md-rows-10
@category: Grid
@usage:
Use mds-grid-md-rows-10 class to define a grid with 10 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 10 number of rows in md breakpoint.
*/
grid-template-rows: repeat(10, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-11 {
/*
@name: mds-grid-md-rows-11
@category: Grid
@usage:
Use mds-grid-md-rows-11 class to define a grid with 11 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 11 number of rows in md breakpoint.
*/
grid-template-rows: repeat(11, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-12 {
/*
@name: mds-grid-md-rows-12
@category: Grid
@usage:
Use mds-grid-md-rows-12 class to define a grid with 12 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 12 number of rows in md breakpoint.
*/
grid-template-rows: repeat(12, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-13 {
/*
@name: mds-grid-md-rows-13
@category: Grid
@usage:
Use mds-grid-md-rows-13 class to define a grid with 13 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 13 number of rows in md breakpoint.
*/
grid-template-rows: repeat(13, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-14 {
/*
@name: mds-grid-md-rows-14
@category: Grid
@usage:
Use mds-grid-md-rows-14 class to define a grid with 14 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 14 number of rows in md breakpoint.
*/
grid-template-rows: repeat(14, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-15 {
/*
@name: mds-grid-md-rows-15
@category: Grid
@usage:
Use mds-grid-md-rows-15 class to define a grid with 15 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 15 number of rows in md breakpoint.
*/
grid-template-rows: repeat(15, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-16 {
/*
@name: mds-grid-md-rows-16
@category: Grid
@usage:
Use mds-grid-md-rows-16 class to define a grid with 16 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 16 number of rows in md breakpoint.
*/
grid-template-rows: repeat(16, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-17 {
/*
@name: mds-grid-md-rows-17
@category: Grid
@usage:
Use mds-grid-md-rows-17 class to define a grid with 17 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 17 number of rows in md breakpoint.
*/
grid-template-rows: repeat(17, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-18 {
/*
@name: mds-grid-md-rows-18
@category: Grid
@usage:
Use mds-grid-md-rows-18 class to define a grid with 18 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 18 number of rows in md breakpoint.
*/
grid-template-rows: repeat(18, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-19 {
/*
@name: mds-grid-md-rows-19
@category: Grid
@usage:
Use mds-grid-md-rows-19 class to define a grid with 19 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 19 number of rows in md breakpoint.
*/
grid-template-rows: repeat(19, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-20 {
/*
@name: mds-grid-md-rows-20
@category: Grid
@usage:
Use mds-grid-md-rows-20 class to define a grid with 20 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 20 number of rows in md breakpoint.
*/
grid-template-rows: repeat(20, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-21 {
/*
@name: mds-grid-md-rows-21
@category: Grid
@usage:
Use mds-grid-md-rows-21 class to define a grid with 21 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 21 number of rows in md breakpoint.
*/
grid-template-rows: repeat(21, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-22 {
/*
@name: mds-grid-md-rows-22
@category: Grid
@usage:
Use mds-grid-md-rows-22 class to define a grid with 22 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 22 number of rows in md breakpoint.
*/
grid-template-rows: repeat(22, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-23 {
/*
@name: mds-grid-md-rows-23
@category: Grid
@usage:
Use mds-grid-md-rows-23 class to define a grid with 23 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 23 number of rows in md breakpoint.
*/
grid-template-rows: repeat(23, auto);
}
.mds .mds-container .mds-grid.mds-grid-md-rows-24 {
/*
@name: mds-grid-md-rows-24
@category: Grid
@usage:
Use mds-grid-md-rows-24 class to define a grid with 24 rows for md breakpoint.
The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
@example:
Grid will have 24 number of rows in md breakpoint.
*/
grid-template-rows: repeat(24, auto);
}
}
.mds {
/*
@description:
Typography styles for the Maersk Design System.
This file defines the typography styles used throughout the design system, including font families, sizes, weights, and styles for various text elements.
It provides a consistent typographic scale that can be applied to headings, paragraphs, links, and other text elements.
You need to wrap your content in a container with the mds class to apply these styles.
@basicExample:
// No margins or paddings are applied to headings and paragraphs, only font styles.
**/
}
.mds .mds-gap-50,
.mds .mds-container .mds-gap-50,
.mds .mds-viewport .mds-gap-50 {
/*
@name: mds-gap-50, mds-xs-gap-50, mds-sm-gap-50, mds-md-gap-50, mds-lg-gap-50, mds-xl-gap-50
@category: Gap
@usage:
Use mds-gap-50 class to apply gap of 2px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-50, mds-sm-gap-50, mds-md-gap-50, mds-lg-gap-50, mds-xl-gap-50 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 2px;
}
.mds .mds-col-gap-50,
.mds .mds-container .mds-col-gap-50,
.mds .mds-viewport .mds-col-gap-50 {
/*
@name: mds-col-gap-50, mds-xs-col-gap-50, mds-sm-col-gap-50, mds-md-col-gap-50, mds-lg-col-gap-50, mds-xl-col-gap-50
@category: Gap
@usage:
Use mds-col-gap-50 class to apply a gap of 2px between columns in a grid or flex box.
Use mds-xs-col-gap-50, mds-sm-col-gap-50, mds-md-col-gap-50, mds-lg-col-gap-50, mds-xl-col-gap-50 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 2px;
}
.mds .mds-row-gap-50,
.mds .mds-container .mds-row-gap-50,
.mds .mds-viewport .mds-row-gap-50 {
/*
@name: mds-row-gap-50, mds-xs-row-gap-50, mds-sm-row-gap-50, mds-md-row-gap-50, mds-lg-row-gap-50, mds-xl-row-gap-50
@category: Gap
@usage:
Use mds-row-gap-50 class to apply a gap of 2px between rows in a grid or flex box.
Use mds-xs-row-gap-50, mds-sm-row-gap-50, mds-md-row-gap-50, mds-lg-row-gap-50, mds-xl-row-gap-50 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 2px;
}
.mds .mds-gap-100,
.mds .mds-container .mds-gap-100,
.mds .mds-viewport .mds-gap-100 {
/*
@name: mds-gap-100, mds-xs-gap-100, mds-sm-gap-100, mds-md-gap-100, mds-lg-gap-100, mds-xl-gap-100
@category: Gap
@usage:
Use mds-gap-100 class to apply gap of 4px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-100, mds-sm-gap-100, mds-md-gap-100, mds-lg-gap-100, mds-xl-gap-100 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 4px;
}
.mds .mds-col-gap-100,
.mds .mds-container .mds-col-gap-100,
.mds .mds-viewport .mds-col-gap-100 {
/*
@name: mds-col-gap-100, mds-xs-col-gap-100, mds-sm-col-gap-100, mds-md-col-gap-100, mds-lg-col-gap-100, mds-xl-col-gap-100
@category: Gap
@usage:
Use mds-col-gap-100 class to apply a gap of 4px between columns in a grid or flex box.
Use mds-xs-col-gap-100, mds-sm-col-gap-100, mds-md-col-gap-100, mds-lg-col-gap-100, mds-xl-col-gap-100 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 4px;
}
.mds .mds-row-gap-100,
.mds .mds-container .mds-row-gap-100,
.mds .mds-viewport .mds-row-gap-100 {
/*
@name: mds-row-gap-100, mds-xs-row-gap-100, mds-sm-row-gap-100, mds-md-row-gap-100, mds-lg-row-gap-100, mds-xl-row-gap-100
@category: Gap
@usage:
Use mds-row-gap-100 class to apply a gap of 4px between rows in a grid or flex box.
Use mds-xs-row-gap-100, mds-sm-row-gap-100, mds-md-row-gap-100, mds-lg-row-gap-100, mds-xl-row-gap-100 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 4px;
}
.mds .mds-gap-150,
.mds .mds-container .mds-gap-150,
.mds .mds-viewport .mds-gap-150 {
/*
@name: mds-gap-150, mds-xs-gap-150, mds-sm-gap-150, mds-md-gap-150, mds-lg-gap-150, mds-xl-gap-150
@category: Gap
@usage:
Use mds-gap-150 class to apply gap of 6px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-150, mds-sm-gap-150, mds-md-gap-150, mds-lg-gap-150, mds-xl-gap-150 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 6px;
}
.mds .mds-col-gap-150,
.mds .mds-container .mds-col-gap-150,
.mds .mds-viewport .mds-col-gap-150 {
/*
@name: mds-col-gap-150, mds-xs-col-gap-150, mds-sm-col-gap-150, mds-md-col-gap-150, mds-lg-col-gap-150, mds-xl-col-gap-150
@category: Gap
@usage:
Use mds-col-gap-150 class to apply a gap of 6px between columns in a grid or flex box.
Use mds-xs-col-gap-150, mds-sm-col-gap-150, mds-md-col-gap-150, mds-lg-col-gap-150, mds-xl-col-gap-150 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 6px;
}
.mds .mds-row-gap-150,
.mds .mds-container .mds-row-gap-150,
.mds .mds-viewport .mds-row-gap-150 {
/*
@name: mds-row-gap-150, mds-xs-row-gap-150, mds-sm-row-gap-150, mds-md-row-gap-150, mds-lg-row-gap-150, mds-xl-row-gap-150
@category: Gap
@usage:
Use mds-row-gap-150 class to apply a gap of 6px between rows in a grid or flex box.
Use mds-xs-row-gap-150, mds-sm-row-gap-150, mds-md-row-gap-150, mds-lg-row-gap-150, mds-xl-row-gap-150 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 6px;
}
.mds .mds-gap-200,
.mds .mds-container .mds-gap-200,
.mds .mds-viewport .mds-gap-200 {
/*
@name: mds-gap-200, mds-xs-gap-200, mds-sm-gap-200, mds-md-gap-200, mds-lg-gap-200, mds-xl-gap-200
@category: Gap
@usage:
Use mds-gap-200 class to apply gap of 8px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-200, mds-sm-gap-200, mds-md-gap-200, mds-lg-gap-200, mds-xl-gap-200 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 8px;
}
.mds .mds-col-gap-200,
.mds .mds-container .mds-col-gap-200,
.mds .mds-viewport .mds-col-gap-200 {
/*
@name: mds-col-gap-200, mds-xs-col-gap-200, mds-sm-col-gap-200, mds-md-col-gap-200, mds-lg-col-gap-200, mds-xl-col-gap-200
@category: Gap
@usage:
Use mds-col-gap-200 class to apply a gap of 8px between columns in a grid or flex box.
Use mds-xs-col-gap-200, mds-sm-col-gap-200, mds-md-col-gap-200, mds-lg-col-gap-200, mds-xl-col-gap-200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 8px;
}
.mds .mds-row-gap-200,
.mds .mds-container .mds-row-gap-200,
.mds .mds-viewport .mds-row-gap-200 {
/*
@name: mds-row-gap-200, mds-xs-row-gap-200, mds-sm-row-gap-200, mds-md-row-gap-200, mds-lg-row-gap-200, mds-xl-row-gap-200
@category: Gap
@usage:
Use mds-row-gap-200 class to apply a gap of 8px between rows in a grid or flex box.
Use mds-xs-row-gap-200, mds-sm-row-gap-200, mds-md-row-gap-200, mds-lg-row-gap-200, mds-xl-row-gap-200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 8px;
}
.mds .mds-gap-300,
.mds .mds-container .mds-gap-300,
.mds .mds-viewport .mds-gap-300 {
/*
@name: mds-gap-300, mds-xs-gap-300, mds-sm-gap-300, mds-md-gap-300, mds-lg-gap-300, mds-xl-gap-300
@category: Gap
@usage:
Use mds-gap-300 class to apply gap of 12px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-300, mds-sm-gap-300, mds-md-gap-300, mds-lg-gap-300, mds-xl-gap-300 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 12px;
}
.mds .mds-col-gap-300,
.mds .mds-container .mds-col-gap-300,
.mds .mds-viewport .mds-col-gap-300 {
/*
@name: mds-col-gap-300, mds-xs-col-gap-300, mds-sm-col-gap-300, mds-md-col-gap-300, mds-lg-col-gap-300, mds-xl-col-gap-300
@category: Gap
@usage:
Use mds-col-gap-300 class to apply a gap of 12px between columns in a grid or flex box.
Use mds-xs-col-gap-300, mds-sm-col-gap-300, mds-md-col-gap-300, mds-lg-col-gap-300, mds-xl-col-gap-300 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 12px;
}
.mds .mds-row-gap-300,
.mds .mds-container .mds-row-gap-300,
.mds .mds-viewport .mds-row-gap-300 {
/*
@name: mds-row-gap-300, mds-xs-row-gap-300, mds-sm-row-gap-300, mds-md-row-gap-300, mds-lg-row-gap-300, mds-xl-row-gap-300
@category: Gap
@usage:
Use mds-row-gap-300 class to apply a gap of 12px between rows in a grid or flex box.
Use mds-xs-row-gap-300, mds-sm-row-gap-300, mds-md-row-gap-300, mds-lg-row-gap-300, mds-xl-row-gap-300 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 12px;
}
.mds .mds-gap-400,
.mds .mds-container .mds-gap-400,
.mds .mds-viewport .mds-gap-400 {
/*
@name: mds-gap-400, mds-xs-gap-400, mds-sm-gap-400, mds-md-gap-400, mds-lg-gap-400, mds-xl-gap-400
@category: Gap
@usage:
Use mds-gap-400 class to apply gap of 16px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-400, mds-sm-gap-400, mds-md-gap-400, mds-lg-gap-400, mds-xl-gap-400 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 16px;
}
.mds .mds-col-gap-400,
.mds .mds-container .mds-col-gap-400,
.mds .mds-viewport .mds-col-gap-400 {
/*
@name: mds-col-gap-400, mds-xs-col-gap-400, mds-sm-col-gap-400, mds-md-col-gap-400, mds-lg-col-gap-400, mds-xl-col-gap-400
@category: Gap
@usage:
Use mds-col-gap-400 class to apply a gap of 16px between columns in a grid or flex box.
Use mds-xs-col-gap-400, mds-sm-col-gap-400, mds-md-col-gap-400, mds-lg-col-gap-400, mds-xl-col-gap-400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 16px;
}
.mds .mds-row-gap-400,
.mds .mds-container .mds-row-gap-400,
.mds .mds-viewport .mds-row-gap-400 {
/*
@name: mds-row-gap-400, mds-xs-row-gap-400, mds-sm-row-gap-400, mds-md-row-gap-400, mds-lg-row-gap-400, mds-xl-row-gap-400
@category: Gap
@usage:
Use mds-row-gap-400 class to apply a gap of 16px between rows in a grid or flex box.
Use mds-xs-row-gap-400, mds-sm-row-gap-400, mds-md-row-gap-400, mds-lg-row-gap-400, mds-xl-row-gap-400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 16px;
}
.mds .mds-gap-500,
.mds .mds-container .mds-gap-500,
.mds .mds-viewport .mds-gap-500 {
/*
@name: mds-gap-500, mds-xs-gap-500, mds-sm-gap-500, mds-md-gap-500, mds-lg-gap-500, mds-xl-gap-500
@category: Gap
@usage:
Use mds-gap-500 class to apply gap of 20px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-500, mds-sm-gap-500, mds-md-gap-500, mds-lg-gap-500, mds-xl-gap-500 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 20px;
}
.mds .mds-col-gap-500,
.mds .mds-container .mds-col-gap-500,
.mds .mds-viewport .mds-col-gap-500 {
/*
@name: mds-col-gap-500, mds-xs-col-gap-500, mds-sm-col-gap-500, mds-md-col-gap-500, mds-lg-col-gap-500, mds-xl-col-gap-500
@category: Gap
@usage:
Use mds-col-gap-500 class to apply a gap of 20px between columns in a grid or flex box.
Use mds-xs-col-gap-500, mds-sm-col-gap-500, mds-md-col-gap-500, mds-lg-col-gap-500, mds-xl-col-gap-500 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 20px;
}
.mds .mds-row-gap-500,
.mds .mds-container .mds-row-gap-500,
.mds .mds-viewport .mds-row-gap-500 {
/*
@name: mds-row-gap-500, mds-xs-row-gap-500, mds-sm-row-gap-500, mds-md-row-gap-500, mds-lg-row-gap-500, mds-xl-row-gap-500
@category: Gap
@usage:
Use mds-row-gap-500 class to apply a gap of 20px between rows in a grid or flex box.
Use mds-xs-row-gap-500, mds-sm-row-gap-500, mds-md-row-gap-500, mds-lg-row-gap-500, mds-xl-row-gap-500 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 20px;
}
.mds .mds-gap-600,
.mds .mds-container .mds-gap-600,
.mds .mds-viewport .mds-gap-600 {
/*
@name: mds-gap-600, mds-xs-gap-600, mds-sm-gap-600, mds-md-gap-600, mds-lg-gap-600, mds-xl-gap-600
@category: Gap
@usage:
Use mds-gap-600 class to apply gap of 24px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-600, mds-sm-gap-600, mds-md-gap-600, mds-lg-gap-600, mds-xl-gap-600 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 24px;
}
.mds .mds-col-gap-600,
.mds .mds-container .mds-col-gap-600,
.mds .mds-viewport .mds-col-gap-600 {
/*
@name: mds-col-gap-600, mds-xs-col-gap-600, mds-sm-col-gap-600, mds-md-col-gap-600, mds-lg-col-gap-600, mds-xl-col-gap-600
@category: Gap
@usage:
Use mds-col-gap-600 class to apply a gap of 24px between columns in a grid or flex box.
Use mds-xs-col-gap-600, mds-sm-col-gap-600, mds-md-col-gap-600, mds-lg-col-gap-600, mds-xl-col-gap-600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 24px;
}
.mds .mds-row-gap-600,
.mds .mds-container .mds-row-gap-600,
.mds .mds-viewport .mds-row-gap-600 {
/*
@name: mds-row-gap-600, mds-xs-row-gap-600, mds-sm-row-gap-600, mds-md-row-gap-600, mds-lg-row-gap-600, mds-xl-row-gap-600
@category: Gap
@usage:
Use mds-row-gap-600 class to apply a gap of 24px between rows in a grid or flex box.
Use mds-xs-row-gap-600, mds-sm-row-gap-600, mds-md-row-gap-600, mds-lg-row-gap-600, mds-xl-row-gap-600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 24px;
}
.mds .mds-gap-700,
.mds .mds-container .mds-gap-700,
.mds .mds-viewport .mds-gap-700 {
/*
@name: mds-gap-700, mds-xs-gap-700, mds-sm-gap-700, mds-md-gap-700, mds-lg-gap-700, mds-xl-gap-700
@category: Gap
@usage:
Use mds-gap-700 class to apply gap of 28px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-700, mds-sm-gap-700, mds-md-gap-700, mds-lg-gap-700, mds-xl-gap-700 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 28px;
}
.mds .mds-col-gap-700,
.mds .mds-container .mds-col-gap-700,
.mds .mds-viewport .mds-col-gap-700 {
/*
@name: mds-col-gap-700, mds-xs-col-gap-700, mds-sm-col-gap-700, mds-md-col-gap-700, mds-lg-col-gap-700, mds-xl-col-gap-700
@category: Gap
@usage:
Use mds-col-gap-700 class to apply a gap of 28px between columns in a grid or flex box.
Use mds-xs-col-gap-700, mds-sm-col-gap-700, mds-md-col-gap-700, mds-lg-col-gap-700, mds-xl-col-gap-700 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 28px;
}
.mds .mds-row-gap-700,
.mds .mds-container .mds-row-gap-700,
.mds .mds-viewport .mds-row-gap-700 {
/*
@name: mds-row-gap-700, mds-xs-row-gap-700, mds-sm-row-gap-700, mds-md-row-gap-700, mds-lg-row-gap-700, mds-xl-row-gap-700
@category: Gap
@usage:
Use mds-row-gap-700 class to apply a gap of 28px between rows in a grid or flex box.
Use mds-xs-row-gap-700, mds-sm-row-gap-700, mds-md-row-gap-700, mds-lg-row-gap-700, mds-xl-row-gap-700 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 28px;
}
.mds .mds-gap-800,
.mds .mds-container .mds-gap-800,
.mds .mds-viewport .mds-gap-800 {
/*
@name: mds-gap-800, mds-xs-gap-800, mds-sm-gap-800, mds-md-gap-800, mds-lg-gap-800, mds-xl-gap-800
@category: Gap
@usage:
Use mds-gap-800 class to apply gap of 32px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-800, mds-sm-gap-800, mds-md-gap-800, mds-lg-gap-800, mds-xl-gap-800 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 32px;
}
.mds .mds-col-gap-800,
.mds .mds-container .mds-col-gap-800,
.mds .mds-viewport .mds-col-gap-800 {
/*
@name: mds-col-gap-800, mds-xs-col-gap-800, mds-sm-col-gap-800, mds-md-col-gap-800, mds-lg-col-gap-800, mds-xl-col-gap-800
@category: Gap
@usage:
Use mds-col-gap-800 class to apply a gap of 32px between columns in a grid or flex box.
Use mds-xs-col-gap-800, mds-sm-col-gap-800, mds-md-col-gap-800, mds-lg-col-gap-800, mds-xl-col-gap-800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 32px;
}
.mds .mds-row-gap-800,
.mds .mds-container .mds-row-gap-800,
.mds .mds-viewport .mds-row-gap-800 {
/*
@name: mds-row-gap-800, mds-xs-row-gap-800, mds-sm-row-gap-800, mds-md-row-gap-800, mds-lg-row-gap-800, mds-xl-row-gap-800
@category: Gap
@usage:
Use mds-row-gap-800 class to apply a gap of 32px between rows in a grid or flex box.
Use mds-xs-row-gap-800, mds-sm-row-gap-800, mds-md-row-gap-800, mds-lg-row-gap-800, mds-xl-row-gap-800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 32px;
}
.mds .mds-gap-900,
.mds .mds-container .mds-gap-900,
.mds .mds-viewport .mds-gap-900 {
/*
@name: mds-gap-900, mds-xs-gap-900, mds-sm-gap-900, mds-md-gap-900, mds-lg-gap-900, mds-xl-gap-900
@category: Gap
@usage:
Use mds-gap-900 class to apply gap of 36px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-900, mds-sm-gap-900, mds-md-gap-900, mds-lg-gap-900, mds-xl-gap-900 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 36px;
}
.mds .mds-col-gap-900,
.mds .mds-container .mds-col-gap-900,
.mds .mds-viewport .mds-col-gap-900 {
/*
@name: mds-col-gap-900, mds-xs-col-gap-900, mds-sm-col-gap-900, mds-md-col-gap-900, mds-lg-col-gap-900, mds-xl-col-gap-900
@category: Gap
@usage:
Use mds-col-gap-900 class to apply a gap of 36px between columns in a grid or flex box.
Use mds-xs-col-gap-900, mds-sm-col-gap-900, mds-md-col-gap-900, mds-lg-col-gap-900, mds-xl-col-gap-900 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 36px;
}
.mds .mds-row-gap-900,
.mds .mds-container .mds-row-gap-900,
.mds .mds-viewport .mds-row-gap-900 {
/*
@name: mds-row-gap-900, mds-xs-row-gap-900, mds-sm-row-gap-900, mds-md-row-gap-900, mds-lg-row-gap-900, mds-xl-row-gap-900
@category: Gap
@usage:
Use mds-row-gap-900 class to apply a gap of 36px between rows in a grid or flex box.
Use mds-xs-row-gap-900, mds-sm-row-gap-900, mds-md-row-gap-900, mds-lg-row-gap-900, mds-xl-row-gap-900 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 36px;
}
.mds .mds-gap-1000,
.mds .mds-container .mds-gap-1000,
.mds .mds-viewport .mds-gap-1000 {
/*
@name: mds-gap-1000, mds-xs-gap-1000, mds-sm-gap-1000, mds-md-gap-1000, mds-lg-gap-1000, mds-xl-gap-1000
@category: Gap
@usage:
Use mds-gap-1000 class to apply gap of 40px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-1000, mds-sm-gap-1000, mds-md-gap-1000, mds-lg-gap-1000, mds-xl-gap-1000 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 40px;
}
.mds .mds-col-gap-1000,
.mds .mds-container .mds-col-gap-1000,
.mds .mds-viewport .mds-col-gap-1000 {
/*
@name: mds-col-gap-1000, mds-xs-col-gap-1000, mds-sm-col-gap-1000, mds-md-col-gap-1000, mds-lg-col-gap-1000, mds-xl-col-gap-1000
@category: Gap
@usage:
Use mds-col-gap-1000 class to apply a gap of 40px between columns in a grid or flex box.
Use mds-xs-col-gap-1000, mds-sm-col-gap-1000, mds-md-col-gap-1000, mds-lg-col-gap-1000, mds-xl-col-gap-1000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 40px;
}
.mds .mds-row-gap-1000,
.mds .mds-container .mds-row-gap-1000,
.mds .mds-viewport .mds-row-gap-1000 {
/*
@name: mds-row-gap-1000, mds-xs-row-gap-1000, mds-sm-row-gap-1000, mds-md-row-gap-1000, mds-lg-row-gap-1000, mds-xl-row-gap-1000
@category: Gap
@usage:
Use mds-row-gap-1000 class to apply a gap of 40px between rows in a grid or flex box.
Use mds-xs-row-gap-1000, mds-sm-row-gap-1000, mds-md-row-gap-1000, mds-lg-row-gap-1000, mds-xl-row-gap-1000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 40px;
}
.mds .mds-gap-1200,
.mds .mds-container .mds-gap-1200,
.mds .mds-viewport .mds-gap-1200 {
/*
@name: mds-gap-1200, mds-xs-gap-1200, mds-sm-gap-1200, mds-md-gap-1200, mds-lg-gap-1200, mds-xl-gap-1200
@category: Gap
@usage:
Use mds-gap-1200 class to apply gap of 48px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-1200, mds-sm-gap-1200, mds-md-gap-1200, mds-lg-gap-1200, mds-xl-gap-1200 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 48px;
}
.mds .mds-col-gap-1200,
.mds .mds-container .mds-col-gap-1200,
.mds .mds-viewport .mds-col-gap-1200 {
/*
@name: mds-col-gap-1200, mds-xs-col-gap-1200, mds-sm-col-gap-1200, mds-md-col-gap-1200, mds-lg-col-gap-1200, mds-xl-col-gap-1200
@category: Gap
@usage:
Use mds-col-gap-1200 class to apply a gap of 48px between columns in a grid or flex box.
Use mds-xs-col-gap-1200, mds-sm-col-gap-1200, mds-md-col-gap-1200, mds-lg-col-gap-1200, mds-xl-col-gap-1200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 48px;
}
.mds .mds-row-gap-1200,
.mds .mds-container .mds-row-gap-1200,
.mds .mds-viewport .mds-row-gap-1200 {
/*
@name: mds-row-gap-1200, mds-xs-row-gap-1200, mds-sm-row-gap-1200, mds-md-row-gap-1200, mds-lg-row-gap-1200, mds-xl-row-gap-1200
@category: Gap
@usage:
Use mds-row-gap-1200 class to apply a gap of 48px between rows in a grid or flex box.
Use mds-xs-row-gap-1200, mds-sm-row-gap-1200, mds-md-row-gap-1200, mds-lg-row-gap-1200, mds-xl-row-gap-1200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 48px;
}
.mds .mds-gap-1600,
.mds .mds-container .mds-gap-1600,
.mds .mds-viewport .mds-gap-1600 {
/*
@name: mds-gap-1600, mds-xs-gap-1600, mds-sm-gap-1600, mds-md-gap-1600, mds-lg-gap-1600, mds-xl-gap-1600
@category: Gap
@usage:
Use mds-gap-1600 class to apply gap of 64px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-1600, mds-sm-gap-1600, mds-md-gap-1600, mds-lg-gap-1600, mds-xl-gap-1600 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 64px;
}
.mds .mds-col-gap-1600,
.mds .mds-container .mds-col-gap-1600,
.mds .mds-viewport .mds-col-gap-1600 {
/*
@name: mds-col-gap-1600, mds-xs-col-gap-1600, mds-sm-col-gap-1600, mds-md-col-gap-1600, mds-lg-col-gap-1600, mds-xl-col-gap-1600
@category: Gap
@usage:
Use mds-col-gap-1600 class to apply a gap of 64px between columns in a grid or flex box.
Use mds-xs-col-gap-1600, mds-sm-col-gap-1600, mds-md-col-gap-1600, mds-lg-col-gap-1600, mds-xl-col-gap-1600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 64px;
}
.mds .mds-row-gap-1600,
.mds .mds-container .mds-row-gap-1600,
.mds .mds-viewport .mds-row-gap-1600 {
/*
@name: mds-row-gap-1600, mds-xs-row-gap-1600, mds-sm-row-gap-1600, mds-md-row-gap-1600, mds-lg-row-gap-1600, mds-xl-row-gap-1600
@category: Gap
@usage:
Use mds-row-gap-1600 class to apply a gap of 64px between rows in a grid or flex box.
Use mds-xs-row-gap-1600, mds-sm-row-gap-1600, mds-md-row-gap-1600, mds-lg-row-gap-1600, mds-xl-row-gap-1600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 64px;
}
.mds .mds-gap-2000,
.mds .mds-container .mds-gap-2000,
.mds .mds-viewport .mds-gap-2000 {
/*
@name: mds-gap-2000, mds-xs-gap-2000, mds-sm-gap-2000, mds-md-gap-2000, mds-lg-gap-2000, mds-xl-gap-2000
@category: Gap
@usage:
Use mds-gap-2000 class to apply gap of 80px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-2000, mds-sm-gap-2000, mds-md-gap-2000, mds-lg-gap-2000, mds-xl-gap-2000 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 80px;
}
.mds .mds-col-gap-2000,
.mds .mds-container .mds-col-gap-2000,
.mds .mds-viewport .mds-col-gap-2000 {
/*
@name: mds-col-gap-2000, mds-xs-col-gap-2000, mds-sm-col-gap-2000, mds-md-col-gap-2000, mds-lg-col-gap-2000, mds-xl-col-gap-2000
@category: Gap
@usage:
Use mds-col-gap-2000 class to apply a gap of 80px between columns in a grid or flex box.
Use mds-xs-col-gap-2000, mds-sm-col-gap-2000, mds-md-col-gap-2000, mds-lg-col-gap-2000, mds-xl-col-gap-2000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 80px;
}
.mds .mds-row-gap-2000,
.mds .mds-container .mds-row-gap-2000,
.mds .mds-viewport .mds-row-gap-2000 {
/*
@name: mds-row-gap-2000, mds-xs-row-gap-2000, mds-sm-row-gap-2000, mds-md-row-gap-2000, mds-lg-row-gap-2000, mds-xl-row-gap-2000
@category: Gap
@usage:
Use mds-row-gap-2000 class to apply a gap of 80px between rows in a grid or flex box.
Use mds-xs-row-gap-2000, mds-sm-row-gap-2000, mds-md-row-gap-2000, mds-lg-row-gap-2000, mds-xl-row-gap-2000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 80px;
}
.mds .mds-gap-2400,
.mds .mds-container .mds-gap-2400,
.mds .mds-viewport .mds-gap-2400 {
/*
@name: mds-gap-2400, mds-xs-gap-2400, mds-sm-gap-2400, mds-md-gap-2400, mds-lg-gap-2400, mds-xl-gap-2400
@category: Gap
@usage:
Use mds-gap-2400 class to apply gap of 96px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-2400, mds-sm-gap-2400, mds-md-gap-2400, mds-lg-gap-2400, mds-xl-gap-2400 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 96px;
}
.mds .mds-col-gap-2400,
.mds .mds-container .mds-col-gap-2400,
.mds .mds-viewport .mds-col-gap-2400 {
/*
@name: mds-col-gap-2400, mds-xs-col-gap-2400, mds-sm-col-gap-2400, mds-md-col-gap-2400, mds-lg-col-gap-2400, mds-xl-col-gap-2400
@category: Gap
@usage:
Use mds-col-gap-2400 class to apply a gap of 96px between columns in a grid or flex box.
Use mds-xs-col-gap-2400, mds-sm-col-gap-2400, mds-md-col-gap-2400, mds-lg-col-gap-2400, mds-xl-col-gap-2400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 96px;
}
.mds .mds-row-gap-2400,
.mds .mds-container .mds-row-gap-2400,
.mds .mds-viewport .mds-row-gap-2400 {
/*
@name: mds-row-gap-2400, mds-xs-row-gap-2400, mds-sm-row-gap-2400, mds-md-row-gap-2400, mds-lg-row-gap-2400, mds-xl-row-gap-2400
@category: Gap
@usage:
Use mds-row-gap-2400 class to apply a gap of 96px between rows in a grid or flex box.
Use mds-xs-row-gap-2400, mds-sm-row-gap-2400, mds-md-row-gap-2400, mds-lg-row-gap-2400, mds-xl-row-gap-2400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 96px;
}
.mds .mds-gap-2800,
.mds .mds-container .mds-gap-2800,
.mds .mds-viewport .mds-gap-2800 {
/*
@name: mds-gap-2800, mds-xs-gap-2800, mds-sm-gap-2800, mds-md-gap-2800, mds-lg-gap-2800, mds-xl-gap-2800
@category: Gap
@usage:
Use mds-gap-2800 class to apply gap of 112px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-2800, mds-sm-gap-2800, mds-md-gap-2800, mds-lg-gap-2800, mds-xl-gap-2800 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 112px;
}
.mds .mds-col-gap-2800,
.mds .mds-container .mds-col-gap-2800,
.mds .mds-viewport .mds-col-gap-2800 {
/*
@name: mds-col-gap-2800, mds-xs-col-gap-2800, mds-sm-col-gap-2800, mds-md-col-gap-2800, mds-lg-col-gap-2800, mds-xl-col-gap-2800
@category: Gap
@usage:
Use mds-col-gap-2800 class to apply a gap of 112px between columns in a grid or flex box.
Use mds-xs-col-gap-2800, mds-sm-col-gap-2800, mds-md-col-gap-2800, mds-lg-col-gap-2800, mds-xl-col-gap-2800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 112px;
}
.mds .mds-row-gap-2800,
.mds .mds-container .mds-row-gap-2800,
.mds .mds-viewport .mds-row-gap-2800 {
/*
@name: mds-row-gap-2800, mds-xs-row-gap-2800, mds-sm-row-gap-2800, mds-md-row-gap-2800, mds-lg-row-gap-2800, mds-xl-row-gap-2800
@category: Gap
@usage:
Use mds-row-gap-2800 class to apply a gap of 112px between rows in a grid or flex box.
Use mds-xs-row-gap-2800, mds-sm-row-gap-2800, mds-md-row-gap-2800, mds-lg-row-gap-2800, mds-xl-row-gap-2800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 112px;
}
.mds .mds-gap-3200,
.mds .mds-container .mds-gap-3200,
.mds .mds-viewport .mds-gap-3200 {
/*
@name: mds-gap-3200, mds-xs-gap-3200, mds-sm-gap-3200, mds-md-gap-3200, mds-lg-gap-3200, mds-xl-gap-3200
@category: Gap
@usage:
Use mds-gap-3200 class to apply gap of 128px between columns and rows in a grid or flex box that is the same in all breakpoints.
Use mds-xs-gap-3200, mds-sm-gap-3200, mds-md-gap-3200, mds-lg-gap-3200, mds-xl-gap-3200 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
gap: 128px;
}
.mds .mds-col-gap-3200,
.mds .mds-container .mds-col-gap-3200,
.mds .mds-viewport .mds-col-gap-3200 {
/*
@name: mds-col-gap-3200, mds-xs-col-gap-3200, mds-sm-col-gap-3200, mds-md-col-gap-3200, mds-lg-col-gap-3200, mds-xl-col-gap-3200
@category: Gap
@usage:
Use mds-col-gap-3200 class to apply a gap of 128px between columns in a grid or flex box.
Use mds-xs-col-gap-3200, mds-sm-col-gap-3200, mds-md-col-gap-3200, mds-lg-col-gap-3200, mds-xl-col-gap-3200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
column-gap: 128px;
}
.mds .mds-row-gap-3200,
.mds .mds-container .mds-row-gap-3200,
.mds .mds-viewport .mds-row-gap-3200 {
/*
@name: mds-row-gap-3200, mds-xs-row-gap-3200, mds-sm-row-gap-3200, mds-md-row-gap-3200, mds-lg-row-gap-3200, mds-xl-row-gap-3200
@category: Gap
@usage:
Use mds-row-gap-3200 class to apply a gap of 128px between rows in a grid or flex box.
Use mds-xs-row-gap-3200, mds-sm-row-gap-3200, mds-md-row-gap-3200, mds-lg-row-gap-3200, mds-xl-row-gap-3200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
@example:
1
2
3
1
2
3
*/
row-gap: 128px;
}
.mds {
/*
@description:
The MDS offers a set of light-weight utility classes to help with common flexbox layout patterns.
@basicExample:
1
2
3
@advancedExample:
1
2
3
*/
}
.mds .mds-flex {
/*
@name: mds-flex
@category: Flexbox
@usage:
Use mds-flex class to create a flex container.
@example:
...
*/
display: flex;
flex-wrap: wrap;
}
.mds .mds-flex-items-start {
/*
@name: mds-flex-items-start
@category: Flexbox
@usage:
Use mds-flex-items-start class to align flex items to the start of the flex container.
@example:
...
*/
align-items: flex-start;
}
.mds .mds-flex-items-center {
/*
@name: mds-flex-items-center
@category: Flexbox
@usage:
Use mds-flex-items-center class to align flex items to the center of the flex container.
@example:
...
*/
align-items: center;
}
.mds .mds-flex-items-end {
/*
@name: mds-flex-items-end
@category: Flexbox
@usage:
Use mds-flex-items-end class to align flex items to the end of the flex container.
@example:
...
*/
align-items: flex-end;
}
.mds .mds-flex-items-baseline {
/*
@name: mds-flex-items-baseline
@category: Flexbox
@usage:
Use mds-flex-items-baseline class to align flex items to the baseline of the flex container.
@example:
...
*/
align-items: baseline;
}
.mds .mds-flex-items-stretch {
/*
@name: mds-flex-items-stretch
@category: Flexbox
@usage:
Use mds-flex-items-stretch class to stretch flex items to fill the flex container.
@example:
...
*/
align-items: stretch;
}
.mds .mds-flex-row {
flex-direction: row;
}
.mds .mds-flex-column {
flex-direction: column;
}
.mds hr {
border-bottom: var(--mds_foundations_horizontal-rule_border-width) var(--mds_foundations_horizontal-rule_border-style) var(--mds_foundations_horizontal-rule_border-color);
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
height: 0;
padding: 0;
margin: 0;
}
.mds hr.vertical {
border-left: var(--mds_foundations_horizontal-rule_border-width) var(--mds_foundations_horizontal-rule_border-style) var(--mds_foundations_horizontal-rule_border-color);
border-top-width: 0;
border-bottom-width: 0;
height: 40px;
width: 0;
padding: 0;
margin: 0 4px;
}
.mds {
/*
@description:
Links are automatically styled if an outer container applies the mds class.
We also provide a mds-link--stand-alone class for styling "stand-alone" links i.e. those links that do not sit inline within a paragraph of text etc.
@basicExample:
*/
}
.mds a.mds-link--stand-alone {
/*
@name: mds-link--stand-alone
@category: Link
@usage:
Use mds-link--stand-alone class to style links that are not part of a paragraph of text.
@example:
This is a stand-alone link
*/
-webkit-text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
}
.mds a.mds-link--stand-alone:hover, .mds a.mds-link--stand-alone:active {
-webkit-text-decoration: var(--mds_foundations_link_stand-alone_hover_text-decoration);
text-decoration: var(--mds_foundations_link_stand-alone_hover_text-decoration);
}
.mds a.mds-link--stand-alone:visited {
-webkit-text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
}
.mds a.mds-link--disabled {
/*
@name: mds-link--disabled
@category: Link
@usage:
Use mds-link--disabled class to style links that are disabled.
@example:
This link is disabled
*/
pointer-events: inherit;
cursor: not-allowed;
}
.mds a.mds-link--disabled:hover {
-webkit-text-decoration: var(--mds_foundations_link_inline_text-decoration);
text-decoration: var(--mds_foundations_link_inline_text-decoration);
}
.mds a.mds-link--disabled:hover.mds-link--stand-alone {
-webkit-text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
}
.mds a.mds-link--disabled {
pointer-events: none;
touch-action: none;
opacity: var(--mds_brand_appearance_state_disabled_opacity);
-webkit-user-select: none;
user-select: none;
}
.mds a.mds-link--disabled * {
-webkit-user-select: none;
user-select: none;
pointer-events: none;
touch-action: none;
}
.mds a.mds-link--external {
display: inline-flex;
}
.mds a.mds-link--external::after {
content: "";
text-decoration: none;
height: var(--mds_foundations_link_external_icon_height);
width: var(--mds_foundations_link_external_icon_width);
background-color: var(--mds_foundations_link_default_text-color);
mask: url('data:image/svg+xml,') no-repeat 50% 50%;
mask-size: cover;
}
.mds a.mds-link--focus-shadow-inset {
/*
@name: mds-link--focus-shadow-inset
@category: Link
@usage:
Use mds-link--focus-shadow-inset class to apply an inset focus shadow to links
when they are focused or focused-visible.
@example:
This link has an inset focus shadow
*/
}
.mds a.mds-link--focus-shadow-inset:focus-visible {
outline: 0;
box-shadow: inset var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}
.mds a {
align-items: center;
cursor: pointer;
display: inline-flex;
-webkit-text-decoration: var(--mds_foundations_link_inline_text-decoration);
text-decoration: var(--mds_foundations_link_inline_text-decoration);
transition-duration: var(--mds_foundations_link_transition-duration);
transition-property: var(--mds_foundations_link_transition-properties);
transition-timing-function: var(--mds_foundations_link_transition-timing);
}
.mds a:focus-visible {
border-radius: var(--mds_foundations_link_focus_border-radius);
-webkit-text-decoration: var(--mds_foundations_link_inline_hover_text-decoration);
text-decoration: var(--mds_foundations_link_inline_hover_text-decoration);
outline: 0;
box-shadow: var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}
.mds a:hover, .mds a:active {
-webkit-text-decoration: var(--mds_foundations_link_inline_hover_text-decoration);
text-decoration: var(--mds_foundations_link_inline_hover_text-decoration);
}
.mds a:visited {
-webkit-text-decoration: var(--mds_foundations_link_inline_text-decoration);
text-decoration: var(--mds_foundations_link_inline_text-decoration);
}
.mds a {
color: var(--mds_foundations_link_default_text-color);
}
.mds a:active, .mds a:visited {
color: var(--mds_foundations_link_default_text-color);
}
.mds a mc-icon::part(icon) {
fill: var(--mds_foundations_link_default_text-color);
}
.mds mc-button a,
.mds mc-button a:visited,
.mds mc-button-group-item a,
.mds mc-button-group-item a:visited,
.mds mc-link-button a,
.mds mc-link-button a:visited,
.mds mc-list-item a,
.mds mc-list-item a:visited,
.mds mc-pagination a,
.mds mc-pagination a:visited,
.mds mc-segmented-control-item a,
.mds mc-segmented-control-item a:visited,
.mds mc-tab a,
.mds mc-tab a:visited {
text-decoration: none;
display: inline-block;
position: relative;
z-index: 1;
}
.mds mc-button-group-item a:focus-visible,
.mds mc-list-item a:focus-visible,
.mds mc-pagination a:focus-visible,
.mds mc-segmented-control-item a:focus-visible,
.mds mc-tab a:focus-visible {
outline: 0;
box-shadow: inset var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}
.mds {
/*
@description:
Lists are used to display a collection of items in a structured format. They can be ordered or unordered, and can be styled to fit the design requirements of the application.
Lists are automatically styled if an outer container applies the mds class. The styles can be customized using the mds-list--horizontal class for horizontal lists or by applying custom styles to the list items.
Use `mc-list` component as better alternative to ul/ol html native elements.
@basicExample:
Apple
Orange
Lemon
@advancedExample:
// Use mc-list for displaying easier text and icons, groups, and more complex items.
*/
}
.mds ul {
list-style: var(--mds_foundations_list_unordered_list-style);
display: flex;
flex-direction: column;
gap: var(--mds_foundations_list_vertical_item_gap);
margin: 0;
padding: 0;
}
.mds ul.mds-list--horizontal {
/*
@name: mds-list--horizontal
@category: List
@usage:
Use mds-list--horizontal class to style lists that are displayed horizontally.
@example:
Item 1
Item 2
Item 3
*/
flex-direction: row;
gap: var(--mds_foundations_list_horizontal_item_gap);
padding: 0;
}
.mds ul li {
padding: 0;
margin: 0;
}
.mds ol {
list-style: var(--mds_foundations_list_ordered_list-style);
display: flex;
flex-direction: column;
gap: var(--mds_foundations_list_vertical_item_gap);
margin: 0;
padding: 0;
}
.mds ol.mds-list--horizontal {
/*
@name: mds-list--horizontal
@category: List
@usage:
Use mds-list--horizontal class to style lists that are displayed horizontally.
@example:
Item 1
Item 2
Item 3
*/
flex-direction: row;
gap: var(--mds_foundations_list_horizontal_item_gap);
padding: 0;
}
.mds ol li {
padding: 0;
margin: 0;
}
.mds nav ol,
.mds nav ul {
list-style: none;
}
.mds svg:not([fill]) {
fill: currentcolor;
}
.mds {
/*
@description:
Foundational classes for styling HTML tables. Use it if you use native HTML table elements like `
`, or using external libraries like Tanstack Table or AG Grid and you make your own customizations.
We recommend using the `mc-table` component for better accessibility and styling control, with multiple features working out of the box and option to high customization.
@basicExample:
Name
Last port
Built (year)
Length (m)
Capacity (TEU)
Madrid Maersk
Shanghai
2017
399
19,630
Mary Maersk
Busan
2013
399
18,270
@advancedExample:
*/
}
.mds mc-c-table {
display: block;
}
.mds .mds-table {
/*
@name: mds-table
@category: Table
@usage:
Use mds-table class to style HTML tables with consistent design and behavior.
@example:
*/
}
.mds .mds-table.mds-table--vertical-lines-solid th,
.mds .mds-table.mds-table--vertical-lines-solid td {
border-left: var(--mds_foundations_table_border-width) solid var(--mds_foundations_table_border-color);
border-right: var(--mds_foundations_table_border-width) solid var(--mds_foundations_table_border-color);
}
.mds .mds-table.mds-table--vertical-lines-dashed {
/*
@name: mds-table--vertical-lines-dashed
@category: Table
@usage:
Use mds-table--vertical-lines-dashed class to style tables with dashed vertical lines.
@example:
...
*/
}
.mds .mds-table.mds-table--vertical-lines-dashed th,
.mds .mds-table.mds-table--vertical-lines-dashed td {
border-left: var(--mds_foundations_table_border-width) dashed var(--mds_foundations_table_border-color);
border-right: var(--mds_foundations_table_border-width) dashed var(--mds_foundations_table_border-color);
}
.mds .mds-table.mds-table--vertical-lines-dotted {
/*
@name: mds-table--vertical-lines-dotted
@category: Table
@usage:
Use mds-table--vertical-lines-dotted class to style tables with dotted vertical lines.
@example:
...
*/
}
.mds .mds-table.mds-table--vertical-lines-dotted th,
.mds .mds-table.mds-table--vertical-lines-dotted td {
border-left: var(--mds_foundations_table_border-width) dotted var(--mds_foundations_table_border-color);
border-right: var(--mds_foundations_table_border-width) dotted var(--mds_foundations_table_border-color);
}
.mds .mds-table.mds-table--horizontal-lines-none {
/*
@name: mds-table--horizontal-lines-none
@category: Table
@usage:
Use mds-table--horizontal-lines-none class to style tables with no horizontal lines.
@example:
...
*/
}
.mds .mds-table.mds-table--horizontal-lines-none th,
.mds .mds-table.mds-table--horizontal-lines-none td {
border-top-width: 0;
border-bottom-width: 0;
}
.mds .mds-table.mds-table--vertical-lines-none {
/*
@name: mds-table--vertical-lines-none
@category: Table
@usage:
Use mds-table--vertical-lines-none class to style tables with no vertical lines.
@example:
...
*/
}
.mds .mds-table.mds-table--vertical-lines-none th,
.mds .mds-table.mds-table--vertical-lines-none td {
border-left-width: 0;
border-right-width: 0;
}
.mds .mds-table.mds-table--outer-border-none {
/*
@name: mds-table--outer-border-none
@category: Table
@usage:
Use mds-table--outer-border-none class to style tables with no outer border.
@example:
...
*/
border-width: 0;
}
.mds .mds-table.mds-table--outer-border-dashed {
/*
@name: mds-table--outer-border-dashed
@category: Table
@usage:
Use mds-table--outer-border-dashed class to style tables with a dashed outer border.
@example:
...
*/
border-style: dashed;
}
.mds .mds-table.mds-table--outer-border-dotted {
/*
@name: mds-table--outer-border-dotted
@category: Table
@usage:
Use mds-table--outer-border-dotted class to style tables with a dotted outer border.
@example:
...
*/
border-style: dotted;
}
.mds .mds-table.mds-table--outer-border-corners-square {
/*
@name: mds-table--outer-border-corners-square
@category: Table
@usage:
Use mds-table--outer-border-corners-square class to style tables with square outer border corners.
@example:
*/
text-align: center;
}
.mds .mds-table th.mds-table__cell--text-right, .mds .mds-table th.mds-table__cell--number,
.mds .mds-table td.mds-table__cell--text-right,
.mds .mds-table td.mds-table__cell--number {
/*
@name: mds-table__cell--text-right
@category: Table
@usage:
Use mds-table__cell--text-right class to right-align text in table cells.
@example:
Right Aligned Text
*/
text-align: right;
}
.mds .mds-table th.mds-table__cell--tabular-figures, .mds .mds-table th.mds-table__cell--number,
.mds .mds-table td.mds-table__cell--tabular-figures,
.mds .mds-table td.mds-table__cell--number {
/*
@name: mds-table__cell--tabular-figures
@category: Table
@usage:
Use mds-table__cell--tabular-figures class to apply tabular figures font feature to table cells.
@example:
1234567890
*/
font-feature-settings: "tnum";
}
.mds .mds-table th.mds-table__cell--number,
.mds .mds-table td.mds-table__cell--number {
/*
@name: mds-table__cell--number
@category: Table
@usage:
Use mds-table__cell--number class to style table cells containing numbers.
@example:
12345
*/
}
.mds .mds-table th.mds-table__cell--content-top,
.mds .mds-table td.mds-table__cell--content-top {
/*
@name: mds-table__cell--content-top
@category: Table
@usage:
Use mds-table__cell--content-top class to align content to the top of table cells.
@example:
Content aligned to the top
*/
vertical-align: top;
}
.mds .mds-table th.mds-table__cell--content-center,
.mds .mds-table td.mds-table__cell--content-center {
/*
@name: mds-table__cell--content-center
@category: Table
@usage:
Use mds-table__cell--content-center class to center-align content vertically in table cells.
@example:
Content centered vertically
*/
vertical-align: middle;
}
.mds .mds-table th.mds-table__cell--content-bottom,
.mds .mds-table td.mds-table__cell--content-bottom {
/*
@name: mds-table__cell--content-bottom
@category: Table
@usage:
Use mds-table__cell--content-bottom class to align content to the bottom of table cells.
@example:
Content aligned to the bottom
*/
vertical-align: bottom;
}
.mds .mds-table {
/** expanded row **/
}
.mds .mds-table .mds-table__expanded-row {
/*
@name: mds-table__expanded-row
@category: Table
@usage:
Use mds-table__expanded-row class to style expanded rows in a table.
@example:
Expanded content here
Expanded content here
*/
}
.mds .mds-table .mds-table__expanded-row--hidden {
display: none;
}
.mds .mds-table .mds-table__expanded-row--visible {
display: table-row;
}
.mds .mds-table .mds-table__expanded-row--visible:last-of-type {
border-top: var(--mds_foundations_table_border-width) var(--mds_foundations_table_border-style) var(--mds_foundations_table_border-color);
}
.mds .mds-table.mds-table--medium {
/*
@name: mds-table--medium
@category: Table
@usage:
Use mds-table--medium class to style tables with medium size.
@example:
...
*/
}
.mds .mds-table.mds-table--medium .mds-table__expanded-row.mds-table__expanded-row--no-padding td {
padding: 0;
}
.mds .mds-table.mds-table--medium .mds-table__expanded-row td {
padding: var(--mds_foundations_table_medium_expanded-row_padding-top) var(--mds_foundations_table_medium_expanded-row_padding-right) var(--mds_foundations_table_medium_expanded-row_padding-bottom) var(--mds_foundations_table_medium_expanded-row_padding-left);
}
.mds .mds-table .mds-table__expanded-row__trigger {
/*
@name: mds-table__expanded-row__trigger
@category: Table
@usage:
Use mds-table__expanded-row__trigger class to style the trigger for expanded rows.
@example:
*/
display: flex;
align-items: center;
justify-content: center;
}
.mds .mds-table .mds-table__expanded-row__trigger::part(button) {
margin: 0;
width: auto;
border-width: 0;
}
.mds .mds-table .mds-table__expanded-row__trigger::part(icon) {
transition: transform var(--mds_global_transition_fast_duration) ease-in-out;
}
.mds .mds-table .mds-table__expanded-row__trigger--expanded::part(icon) {
transform: rotate(90deg);
}
.mds {
/** Table with caption **/
}
.mds .mds-table-and-caption {
/*
@name: mds-table-and-caption
@category: Table
@usage:
Use mds-table-and-caption class to style a table with a caption.
@example:
...
Table Caption
*/
margin: var(--mds_foundations_table_margin-top) 0 var(--mds_foundations_table_margin-top);
}
.mds .mds-table-and-caption .mds-table {
margin: 0;
}
.mds {
/** Caption **/
}
.mds .mds-table-caption {
/*
@name: mds-table-caption
@category: Table
@usage:
Use mds-table-caption class to style the caption of a table.
@example:
Table Caption
*/
color: var(--mds_foundations_table_caption_text-color);
margin-bottom: var(--mds_foundations_table_medium_caption_margin-bottom);
}
.mds .mds-table-caption.mds-table-caption--small {
/*
@name: mds-table-caption--small
@category: Table
@usage:
Use mds-table-caption--small class to style small captions for tables.
@example:
Small Table Caption
*/
margin-bottom: var(--mds_foundations_table_small_caption_margin-bottom);
}
.mds .mds-table-caption.mds-table-caption--small {
font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
font-size: var(--mds_brand_typography_text_small_mobile_font-size);
line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}
@media screen and (min-width: 1025px) {
.mds .mds-table-caption.mds-table-caption--small {
font-size: var(--mds_brand_typography_text_small_desktop_font-size);
line-height: var(--mds_brand_typography_text_small_desktop_line-height);
}
}
.mds .mds-table-caption.mds-table-caption--small {
font-style: var(--mds_brand_typography_text_small_normal_font-style);
font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}
.mds .mds-table-caption.mds-table-caption--large {
/*
@name: mds-table-caption--large
@category: Table
@usage:
Use mds-table-caption--large class to style large captions for tables.
@example: