Skip to main content
Version: 2.0.1

Article

The article component allows you to design a news page, with several possible layouts and parameters.

For more informations on the icons used, consult the dedicated page.

Basic usage

An article is composed of several elements to be nested. First, the .ms-article tag must be at the root of the structure.

Then, you can add several elements such as an image with the .ms-article-picture class, information about the article with the .ms-article-infos class, a list of tags/labels with the .ms-list-label class, a title and content with the .ms-article-title and .ms-article-text tags.

For more informations about user element, consult the dedicated page.

Live Editor
Result
Loading...

Picture

In order to illustrate your article, we can also add an image to the article with the .ms-article-picture tag. An image can contain a title with the .ms-article-picture-title class, and also an overlay, allowing to darken the image, with the .ms-article-picture-overlay class.

Live Editor
Result
Loading...

Informations

It is also possible to add information at the beginning of the article with the .ms-article-infos class.

Live Editor
Result
Loading...

List of tags

It is possible to add a list of labels, which can identify the article on certain categories, with the class .ms-list-label.

Live Editor
Result
Loading...

Title and content

Finaly, we can add a title with .ms-article-titleclass, and content with .ms-article-textclasse.

Live Editor
Result
Loading...