Labels are the counterpart to xmx-label and represent strong headings.

Use them to caption UI element groups, like filters or chapters, where it is important to spot the headline before the actual content.

The grid supports a maximum of two columns on phones, which can be controlled by using the xmx-cell--320-6 class. Cells default to their full width presentation by default.

Tablet and desktop devices use a 12 column grid layout. In fact, the whole page size and layout of Mshop is created from scratch to support a 12 column layout with integer column sizes. This is to ensure that uneven splits, like 3 columns, still render a full number of pixels in width and do not enter sub-pixel space.

The modifier classes contain the desired breakpoint and the number of columns a cell should cover, e.g. xmx-cell--1024-4 for 4/12 (33.33%) on 1024p or xmx-cell--1280-6 for 6/12 (50%) on 1280p and up.

Labels are the counterpart to xmx-caption and represent subordinate headings.

Use them to label UI element groups where it is less important to spot the headline before the actual content, like footer content.

Loaders are a certain kind of user feedback to indicate a loading process that does not have finite period. This helps communicating that "something is happening" when progress bars are not an option.

Names are meant to represent list item names, like product names or blog article captions.

Pills can be used to visualize a finite number of active selections, like the number of products inside the shopping cart or number of active filters inside a category.

Show the count whenever possible, as users perceive a five-star rating without actual review count as irrelevant.

When an extra explanation, or a link, is helpful, you can use a title instead of a simple count.

Short descriptions are one-line descriptions that describe an entity, like a product short description or any other small explanation.

Short descriptions can be forced to stay small on desktops via xmx-short-description--small.

Subtitles are meant to be placed above xmx-name to feature a subtitle. They are being used for brand name primarily.

Carousels use native scrolling on phones and tablets. Since such native behavior is not available in desktop browsers, we use Swiper to feature them. Carousels need to be tagged with data-carousel="true" to have them initialized automatically. Alternatively, they can be initialized via XmxApp.initializeSwiper('ELEMENTIDHERE');. The initializeSwiper() method checks if the user is on a desktop, so you do not have to do that.

It is essential that the carousel and its components have a unique ID.

Carousels are meant to be put below a title area to feature a "show more" functionality and proper labeling.

When using a description, be sure to not exceed 60-80 characters per line to obtain readability.

The image composition is based upon the picture element and supports different source images based on the device rendering it. Also, the image composition is mimicking the background-size: cover rendering technique to ensure the source image is always covering the desired area. This is especially useful when using images inside a grid where a certain gutter is desired.

There is no such thing as a fixed size for the image composition, as it can be used in every imaginable screen space size. The respective image size can be determined by taking the screen space area at a given breakpoint and multiplying it by the pixel ratio of each breakpoint. We assume a pixel ratio of 2 for all mobile devices and a ratio of 1 for desktop devices. Refer to the following table to do the math:

Images an be turned into click targets by simply using an a HTML tag instead of a div.

The xmx-image--phone-fullwidth class can be used to force images to be full width on phones and tablets.

The xmx-image-overlay--white class can be added to the overlay to use white text.

The mx-image-overlay--dimmed class can be added to the overlay to darken the background. This is especially useful to ensure proper contrast between white text and light images.

It is possible to feature a small gallery inside an image composition on mobile phones. However, be cautious when using this, as the thumbnails do not have a functionality out of the box.

A section is a dedicated area on the page. It featured vertical margin and padding to ensure proper spacing.

Sections are intended to have a colored background. The background can be set via setting the background-color style inline on the section.

By default, sections have the Mshop grey color has the background.

Sections can also feature a background image by setting the background-image inline style as well.

Unfortunately, background images are not responsive, thus we have to serve the same image across all devices - so use them sparginly!

Page areas are meant to be placed above actual content to ensure the same distance between title and content is given.

The truncation composition can be used to enabled a "view more" functionality whereever needed.

Sometimes it is not possible to automatically ensure proper spacing between elements. This is especially true when creating custom HTML code, for example in Magento CMS static blocks.

Margin helpers can be used to add some extra margin to the top of an HTML element.

There is a special class xmx--margin-top-page which is intended to be added to the first element of a page to ensure distance to the mobile / desktop header.

There are cases where margin should only be used on phones, but not on desktop devices. Use the appendix -phone-only to achieve that.

The class xmx--red can be added to any element to make the text red.

The class xmx--low-emphasis can be added to any element to make the text be subordinate.

The class xmx--medium-emphasis can be added to any element to make the text be slighly subordinate.

The class xmx--high-emphasis can be added to any element to make the text be important.

The class xmx--bold can be added to any element to make the text use Neutraface Text Bold instead of Neutraface Text Book.

The class xmx--center can be added to any element to make the children use centered text alignment.

The class xmx--bold can be added to H1 elements or their children to make the headline use Neutraface Display Bold instead of Neutraface Display Titling.

The class xmx--bold can be added to H2 elements or their children to make the headline use Neutraface Display Bold instead of Neutraface Display Titling.

The classes xmx--phone-only, xmx--desktop-only and xmx--mobile-only can be added to any element to control its visibility on a certain device group.

There also is xmx--not-on-phones to hide content on phones only, but display it on tablets and desktops.