ENG / RUS

Muilessium-UI is the default set of components for Muilessium.

<link rel="stylesheet" href="https://unpkg.com/muilessium/dist/muilessium-ui.min.css">
<script src="https://unpkg.com/muilessium/dist/muilessium-ui.min.js"></script>

Don't forget to include Muilessium inself!

Basic layout

The basic page layout is shown in this example. You'll see how to use header with logo and navigation, content containers and footer.

See the Pen Muilessium 1.0 - Basic layout by Ivan Bogachev (@sfi0zy) on CodePen.

Form validation

In this example, you'll see how to create forms with Muilessium-UI, how to use components in scripts and how to validate inputs.

See the Pen Muilessium 1.0 - Form validation by Ivan Bogachev (@sfi0zy) on CodePen.

/src/muilessium-ui/components/grid/style.less

Muilessium-UI uses a classic grid with 12 columns. Default breakpoints are 400, 600 and 1200px. Its behavior is similar to the grid from flexboxgrid.com, but it uses RSCSS-style class names.

-s1
-s11
-s3
-s9
-s6 -m4 -l6
-s6 -m8 -l6
-m6 -l2
-m6 -l10
<div class="mui-row">
     <div class="mui-column -s1">-s1</div>
    <div class="mui-column -s11">-s11</div>
</div>
<div class="mui-row">
    <div class="mui-column -s3">-s3</div>
    <div class="mui-column -s9">-s9</div>
</div>
<div class="mui-row">
    <div class="mui-column -s6 -m4 -l6">-s6 -m4 -l6</div>
    <div class="mui-column -s6 -m8 -l6">-s6 -m8 -l6</div>
</div>
<div class="mui-row">
    <div class="mui-column -m6 -l2">-m6 -l2</div>
    <div class="mui-column -m6 -l10">-m6 -l10</div>
</div>

The recommended page layout includes scroll-fix, page-header, page-container and page-footer. This layout is the simplest way to create a sticky footer.

<div class="mui-scroll-fix"></div>
<header class="mui-page-header">header</header>
<div class="mui-page-container">...</div>
<footer class="mui-page-footer">footer</footer>

Muilessium uses Hammer.js, and it is recommended to use the following viewport settings:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
/src/muilessium-ui/fonts.less
/src/muilessium-ui/helpers.less

Typography is fluid, and it is based on default system fonts and _bigger-* and _smaller-* helpers.

These helpers have different behavior on different screen sizes.

H1 Heading (+5)
H2 Heading (+4)
H3 Heading (+3)
H4 Heading (+2)
H5 Heading (+1)
H6 Heading (+0)
Normal text
Text (-1)
Text (-2)
Text (-3)
Text (-4)
Text (-5)
/src/muilessium-ui/colors.less
/src/muilessium-ui/color-scheme.less

These classes are created for fast painting. There are four types of them:

  • -color-[ 1 | 2 | 3 | 4 | 5 ] - text color and fill for the element. For example "-orange-4"
  • -color-[ 1 | 2 | 3 | 4 | 5 ]-bg - background for the element. For example "-blue-1-bg"
  • -f-color-[ 1 | 2 | 3 | 4 | 5 ] - text color and fill for the :hover and :focus states of the element
  • -f-color-[ 1 | 2 | 3 | 4 | 5 ]-bg - background color for the :hover and :focus states
White
FFFFFF
Grey
#fafafa
#eeeeee
#9e9e9e
#424242
#212121
Black
000000
Brown
#efebe9
#bcaaa4
#795548
#4e342e
#3e2723
Orange
#fff3e0
#ffcc80
#ff9800
#ef6c00
#e65100
Yellow
#fffde7
#fff59d
#ffeb3b
#f9a825
#f57f17
Red
#ffebee
#ef9a9a
#f44336
#c62828
#b71c1c
Pink
#fce4ec
#f48fb1
#e91e63
#ad1457
#880e4f
Violet
#ede7f6
#b39ddb
#673ab7
#4527a0
#311b92
Blue
#e3f2fd
#90caf9
#2196f3
#1565c0
#0d47a1
Cyan
#e0f7fa
#80deea
#00bcd4
#00838f
#006064
Green
#e8f5e9
#a5d6a7
#4caf50
#2e7d32
#1b5e20
/src/muilessium-ui/helpers.less

Muilessium-UI has a lot of CSS helpers. You can take a look at sources for more information about them.

Only helpers and classes for painting can include the "!important" rules.

  • Text
    • _text-[ left | center | right | justify ]
    • _[ upper | lower ]case
    • _capitalize
    • _bigger-[ 0 | 1 | 2 | 3 | 4 | 5 ]
    • _smaller-[ 0 | 1 | 2 | 3 | 4 | 5 ]
    • _line-[ 1r | 1-25 | 1-50 | 1-75 | 2r | 3r | 4r | 5r ]
  • Floating
    • _left
    • _right
  • Vertical rhythm
    • _separate-[ 1 | 2 | 3 | 4 | 5 ]
  • Shadows
    • _shadow-[ 1 | 2 | 3 | 4 | 5 ]
  • Pointer events
    • _disabled
    • _disable-pointer-events
    • _disable-pointer-events-hard
  • Others
    • _no-overflow
    • _no-decoration
    • _truncate-line
    • _no-break
    • _allow-empty
    • _hidden
    • _clearfix
    • _object-fit-cover
/src/muilessium-ui/components/svg-icon/style.less

Muilessium-UI uses Ionicons by default.

You have to put the following sprite at the end of your pages. You can create custom icons by replacing symbols in this SVG.

<div class="mui-svg-sprite">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--check"><path d="M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--close"><path d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-down"><path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-right"><path d="M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.701H85v42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-left"><path d="M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.701H427v-42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-up"><path d="M277.375 427V167.296l119.702 119.702L427 256 256 85 85 256l29.924 29.922 119.701-118.626V427h42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--hamburger"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--spinner"><path d="M256 48c-75.033 0-144.531 40.658-181.373 106.107l-1.963 3.485 20.915 11.771 1.962-3.485C128.138 107.973 189.621 72 256 72c101.458 0 184 82.542 184 184a185.48 185.48 0 0 1-3.749 37.147l-.803 3.918 23.511 4.819.804-3.919A209.53 209.53 0 0 0 464 256c0-114.691-93.309-208-208-208zM416.459 346.119C383.862 404.027 322.379 440 256 440c-101.458 0-184-82.542-184-184 0-12.512 1.262-25.011 3.75-37.15l.803-3.918-23.511-4.819-.804 3.918A209.445 209.445 0 0 0 48 256c0 114.691 93.309 208 208 208 75.033 0 144.531-40.658 181.373-106.109l1.963-3.485-20.915-11.771-1.962 3.484z"></path><path d="M384 256l64 64 64-64zM0 256l64-64 64 64z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--tags"><path d="M472 239.2s-.1 0 0 0L282.1 48.1l-1.4-1.4h-.5c-7.5-7.2-16.1-10.9-27.1-11.1l-89.9-3.3-3.9-.1c-10.1.1-20 4.1-27.7 11.8l-27.1 27.2c7.4-6.6 16.6-10 26-10.1l3.8.1 89.8 3.3c11 .2 19.7 3.9 27.2 11.1h.5l1.4 1.4L443 268.1c10 10.8 10.7 28.2 0 38.9l29-28.9c10.6-10.7 10-28.1 0-38.9z"></path><path d="M428 282.5h.3L238.6 91.4l-1.3-1.4h-.3c-7.5-7.2-15.9-10.9-26.9-11.1L120 75.6l-4-.1c-9.2.1-18.2 3.4-25.6 9.8-.3.3-.7.6-1 .9l-1.2 1.2-44.3 44.5C35.8 140 32 150.8 32 161.4v.1l.1 3.8 5.9 87.9v1.9c1 7.9 4.2 15.6 9.6 22l5.1 4.9L239 470.4l2.8 2.8c10.7 9.4 27.1 9 37.3-1.3l13.1-13.2c.5-.4.9-.8 1.4-1.3l26.9-27c-.2.1-.3.2-.5.4l108.3-109.3c10.6-10.7 10.7-28.2-.3-39zm-317.4-143c6.6-4 14.3-6.3 22.6-6.3 23.9 0 43.4 19.4 43.4 43.4 0 8.3-2.3 16-6.3 22.6-7.6 12.5-21.3 20.8-37 20.8-23.9 0-43.4-19.4-43.4-43.4-.1-15.8 8.2-29.5 20.7-37.1z"></path></symbol>
    </svg>
</div>
/src/muilessium-ui/utils/animations.js
/src/muilessium-ui/animations.less

There are two ways to use animations. The first one:

<div class="-js-animation [ -hidden-by-default ]
    [ -fade-in
    | -fade-in-left
    | -fade-in-right
    | -fade-in-up
    | -fade-in-down
    | -fade-out
    | -fade-out-left
    | -fade-out-right
    | -fade-out-up
    | -fade-out-down ]"></div>
<script>
    Muilessium.UTILS.activateAnimation(document.querySelector("div"));
</script>

The second one:

<script>Muilessium.UTILS.animateElement(element, "fade-in")</script>

Both ways have equal internal behavior and the names of the animations.

The first way is useful if the element will be animated once. The second one is useful if you need to animate one element multiple times.

/src/muilessium-ui/components/**/*
/src/muilessium-ui/components/index.js
/src/muilessium-ui/components/index.less

Muilessium-UI has a number of components listed below. Every component has a markup shown in example and this markup should be used as is, because some initializations of components are based on their markups.

/src/muilessium-ui/components/accordion/style.less

...

(!) Accordion - Use Muilessium.get('Accordion', id) to get it.
  • foldItem(index)  - folds item with selected index
  • foldAllItems()  - folds all items
  • unfoldItem(index) - unfolds item with selected index
  • unfoldAllItems()  - unfolds all items
  • toggleItem(index) - unfolds item with selected index if it is folded and folds it otherwise
Requires svg-icon
  •  Lorem
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
  •  Lorem
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
Source code (Pug)
ul.mui-accordion#docs-only-id--accordion
    li.item
        .title
            .indicator
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--arrow-right')
            span &nbsp;Lorem
        .content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
    li.item
        .title
            .indicator
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--arrow-right')
            span &nbsp;Lorem
        .content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
Source code (HTML)
<ul class="mui-accordion" id="docs-only-id--accordion">
  <li class="item">
    <div class="title">
      <div class="indicator">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--arrow-right"></use>
        </svg>
      </div><span>&nbsp;Lorem</span>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!</div>
  </li>
  <li class="item">
    <div class="title">
      <div class="indicator">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--arrow-right"></use>
        </svg>
      </div><span>&nbsp;Lorem</span>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!</div>
  </li>
</ul>
/src/muilessium-ui/components/badge/style.less

Badge can be used in buttons or collections. It has "-rounded" and "-new" variants those can be used together".

5555
Source code (Pug)
span.mui-badge 5
span.mui-badge.-rounded 5
span.mui-badge.-new 5
span.mui-badge.-new.-rounded 5
Source code (HTML)
<span class="mui-badge">5</span><span class="mui-badge -rounded">5</span><span class="mui-badge -new">5</span><span class="mui-badge -new -rounded">5</span>
/src/muilessium-ui/components/blockquote/style.less

...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit?John Doe
Source code (Pug)
blockquote.mui-blockquote
   span.text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit?
   span.author John Doe
Source code (HTML)
<blockquote class="mui-blockquote"><span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit?</span><span class="author">John Doe</span></blockquote>
/src/muilessium-ui/components/breadcrumb/style.less

...

Variant: -slash-delimiter
Source code (Pug)
div.mui-breadcrumb
   a.link(href='') category
   a.link(href='') subcategory
   a.link(href='') title
Source code (HTML)
<div class="mui-breadcrumb"><a class="link" href="">category</a><a class="link" href="">subcategory</a><a class="link" href="">title</a></div>
/src/muilessium-ui/components/button/style.less

...

(!) Button - Use Muilessium.get('Button', id) to get it.
Event: click - Use Button.addEventListener('click', (state) => { /* . . . */ }) to subscribe.
Variant: -small
Variant: -big
Variant: -dangerous
Variant: -ghost
Variant: -light-ghost
Source code (Pug)
a.mui-button button
Source code (HTML)
<a class="mui-button">button</a>
/src/muilessium-ui/components/button/style.less

...

(!) Button - Use Muilessium.get('Button', id) to get it.
Event: click - Use Button.addEventListener('click', (state) => { /* . . . */ }) to subscribe.
Source code (Pug)
a.mui-button
   svg.mui-svg-icon
       use(xlink:href='#mui-svg-icon--check')
   span &nbsp;button
a.mui-button.-icon
   svg.mui-svg-icon
       use(xlink:href='#mui-svg-icon--check')
Source code (HTML)
<a class="mui-button">
  <svg class="mui-svg-icon">
    <use xlink:href="#mui-svg-icon--check"></use>
  </svg><span>&nbsp;button</span></a><a class="mui-button -icon">
  <svg class="mui-svg-icon">
    <use xlink:href="#mui-svg-icon--check"></use>
  </svg></a>
/src/muilessium-ui/components/button/style.less

...

(!) Button - Use Muilessium.get('Button', id) to get it.
Event: click - Use Button.addEventListener('click', (state) => { /* . . . */ }) to subscribe.
Variant: -badge-on-top
Source code (Pug)
a.mui-button
   span button&nbsp;
   span.mui-badge.-rounded 5
Source code (HTML)
<a class="mui-button"><span>button&nbsp;</span><span class="mui-badge -rounded">5</span></a>
/src/muilessium-ui/components/button-dropdown/style.less

...

(!) ButtonDropdown - Use Muilessium.get('ButtonDropdown', id) to get it.
  • openDropdown()  - opens dropdown menu
  • closeDropdown()  - closes dropdown menu
  • toggleDropdown() - opens dropdown menu if it is closed and closes it otherwise
Requires button
Requires dropdown-options
Requires shadow-toggle
Requires svg-icon
dropdown button 
Option 1
Option 2
Option 3
Option 4
Option 5
Source code (Pug)
.mui-button-dropdown#docs-only-id--button-dropdown
   a.mui-button
       span dropdown button
       span &nbsp;
       svg.mui-svg-icon
           use(xlink:href='#mui-svg-icon--arrow-down')
   .mui-dropdown-options
       .wrapper
           .option Option 1
           .option Option 2
           .option Option 3
           .option Option 4
           .option Option 5
   .mui-shadow-toggle
Source code (HTML)
<div class="mui-button-dropdown" id="docs-only-id--button-dropdown"><a class="mui-button"><span>dropdown button</span><span>&nbsp;</span>
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-down"></use>
    </svg></a>
  <div class="mui-dropdown-options">
    <div class="wrapper">
      <div class="option">Option 1</div>
      <div class="option">Option 2</div>
      <div class="option">Option 3</div>
      <div class="option">Option 4</div>
      <div class="option">Option 5</div>
    </div>
  </div>
  <div class="mui-shadow-toggle"></div>
</div>
/src/muilessium-ui/components/button-group/style.less

Should be used for grouping of buttons.

Requires button
Variant: -vertical
Variant: -or
Source code (Pug)
.mui-button-group
   button.mui-button first
   button.mui-button second
   button.mui-button third
Source code (HTML)
<div class="mui-button-group">
  <button class="mui-button">first</button>
  <button class="mui-button">second</button>
  <button class="mui-button">third</button>
</div>
/src/muilessium-ui/components/card/style.less

Its desirable to wrap card header text into h2-h6 tags for better navigation.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.

Source code (Pug)
.mui-card._shadow-1
   .header
       h5 Lorem ipsum
   .content
       p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.
Source code (HTML)
<div class="mui-card _shadow-1">
  <div class="header">
    <h5>Lorem ipsum</h5>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.</p>
  </div>
</div>
/src/muilessium-ui/components/card/style.less

Same card, but with an image instead of traditional header. If an image used here only for presentation purposes, role='presentation' should be added to it manually.

Card header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.

Source code (Pug)
.mui-card.-with-image._shadow-1
   .header
       img.mui-image.-js-lazy-load(data-src='https://placehold.it/800x600/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Card header')
       noscript
           img.mui-image(src='https://placehold.it/800x600/4caf50/2e7d32' alt='Card header')
   .content
       p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.
Source code (HTML)
<div class="mui-card -with-image _shadow-1">
  <div class="header"><img class="mui-image -js-lazy-load" data-src="https://placehold.it/800x600/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Card header"/>
    <noscript><img class="mui-image" src="https://placehold.it/800x600/4caf50/2e7d32" alt="Card header"/></noscript>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.</p>
  </div>
</div>
/src/muilessium-ui/components/carousel/style.less

You should use 3 or more slides. Interval in seconds can be setted using data-attribute. Use "-rounded" option to add default border-radius.

(!) Carousel - Use Muilessium.get('Carousel', id) to get it.
  • startRotation() - starts rotation
  • stopRotation()  - stops rotation
  • rotateNext()  - rotates carousel
  • rotatePrev()  - rotates carousel
  • rotate(index)  - rotates carousel to the selected slide
Requires image
Requires svg-icon
Source code (Pug)
.mui-carousel.-rounded#docs-only-id--carousel(data-interval='4s')
    ul.mui-slides
        li.mui-slide
            img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1024x768/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Slide 1')
            noscript
                img.mui-image.background(src='https://placehold.it/1024x768/4caf50/2e7d32/', alt='Slide 1')
            .mui-slide-content.-center
                .title 1. Lorem ipsum dolor.
                .text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ipsa.
        li.mui-slide
            img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='')
            noscript
                img.mui-image.background(src='https://placehold.it/1200x800/4caf50/2e7d32', alt='Slide 2')
            .mui-slide-content.-content-left
                .title 2. Lorem ipsum dolor sit amet.
                .text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illo.
        li.mui-slide
            img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/2e7d32/1b5e20' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='')
            noscript
                img.mui-image.background(src='https://placehold.it/1200x800/2e7d32/1b5e20', alt='Slide 3')
            .mui-slide-content.-content-right
                .title 3. Lorem ipsum dolor sit.
                .text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aliquam.
    .mui-carousel-controls
        .prev
            svg.mui-svg-icon.-white
               use(xlink:href='#mui-svg-icon--arrow-left')
        .next
            svg.mui-svg-icon.-white
                use(xlink:href='#mui-svg-icon--arrow-right')
    ul.mui-carousel-indicators
        li.indicator
        li.indicator
        li.indicator
Source code (HTML)
<div class="mui-carousel -rounded" id="docs-only-id--carousel" data-interval="4s">
  <ul class="mui-slides">
    <li class="mui-slide"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1024x768/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Slide 1"/>
      <noscript><img class="mui-image background" src="https://placehold.it/1024x768/4caf50/2e7d32/" alt="Slide 1"/></noscript>
      <div class="mui-slide-content -center">
        <div class="title">1. Lorem ipsum dolor.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ipsa.</div>
      </div>
    </li>
    <li class="mui-slide"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt=""/>
      <noscript><img class="mui-image background" src="https://placehold.it/1200x800/4caf50/2e7d32" alt="Slide 2"/></noscript>
      <div class="mui-slide-content -content-left">
        <div class="title">2. Lorem ipsum dolor sit amet.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illo.</div>
      </div>
    </li>
    <li class="mui-slide"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/2e7d32/1b5e20" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt=""/>
      <noscript><img class="mui-image background" src="https://placehold.it/1200x800/2e7d32/1b5e20" alt="Slide 3"/></noscript>
      <div class="mui-slide-content -content-right">
        <div class="title">3. Lorem ipsum dolor sit.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aliquam.</div>
      </div>
    </li>
  </ul>
  <div class="mui-carousel-controls">
    <div class="prev">
      <svg class="mui-svg-icon -white">
        <use xlink:href="#mui-svg-icon--arrow-left"></use>
      </svg>
    </div>
    <div class="next">
      <svg class="mui-svg-icon -white">
        <use xlink:href="#mui-svg-icon--arrow-right"></use>
      </svg>
    </div>
  </div>
  <ul class="mui-carousel-indicators">
    <li class="indicator"></li>
    <li class="indicator"></li>
    <li class="indicator"></li>
  </ul>
</div>
/src/muilessium-ui/components/checkbox/style.less

...

(!) Checkbox - Use Muilessium.get('Checkbox', id) to get it.
  • setCheckbox()  - sets checkbox checked
  • unsetCheckbox()  - sets checkbox unchecked
  • toggleCheckbox() - sets checkbox checked if it is unchecked and sets it unchecked otherwise
  • getState()  - returns true if checkbox is checked and false otherwise
Event: update-state - Use Checkbox.addEventListener('update-state', (state) => { /* . . . */ }) to subscribe.
Requires svg-icon
Source code (Pug)
.mui-checkbox#docs-only-id--checkbox
   input(type='checkbox' checked)
   label
       span.icon
           span.symbol
               svg.mui-svg-icon
                   use(xlink:href="#mui-svg-icon--check")
       span.text Lorem ipsum.
Source code (HTML)
<div class="mui-checkbox" id="docs-only-id--checkbox">
  <input type="checkbox" checked="checked"/>
  <label><span class="icon"><span class="symbol">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--check"></use>
        </svg></span></span><span class="text">Lorem ipsum.</span></label>
</div>
/src/muilessium-ui/components/collection/style.less

Can be used with badges.

Requires badge*
  • Lorem ipsum dolor sit amet.
    1024
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    64
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Source code (Pug)
ul.mui-collection
    li.item
        .content Lorem ipsum dolor sit amet.
        .badge
            span.mui-badge.-rounded 1024
    li.item
        .content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        .badge
            span.mui-badge.-rounded 64
    li.item
        .content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Source code (HTML)
<ul class="mui-collection">
  <li class="item">
    <div class="content">Lorem ipsum dolor sit amet.</div>
    <div class="badge"><span class="mui-badge -rounded">1024</span></div>
  </li>
  <li class="item">
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="badge"><span class="mui-badge -rounded">64</span></div>
  </li>
  <li class="item">
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
</ul>
/src/muilessium-ui/components/containers/style.less

Container for content with limited width. Has two options: -no-limit-width (removes limit) and -with-gutter (adds paddings).

Source code (Pug)
.mui-content-container
Source code (HTML)
<div class="mui-content-container"></div>
/src/muilessium-ui/components/containers/style.less

Container for creation of sticky footers. Should include all page content before page-footer.

Source code (Pug)
.mui-page-container
Source code (HTML)
<div class="mui-page-container"></div>
/src/muilessium-ui/components/content-section/style.less

Section with optional background

Requires image*
Background
...
...
...
...
...
...
...
...
...
Source code (Pug)
section.mui-content-section
   img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Background')
   noscript
       img.mui-image.background(src='https://placehold.it/1200x800/4caf50/2e7d32' alt='Background')
   .content
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
Source code (HTML)
<section class="mui-content-section"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Background"/>
  <noscript><img class="mui-image background" src="https://placehold.it/1200x800/4caf50/2e7d32" alt="Background"/></noscript>
  <div class="content"><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/></div>
</section>
/src/muilessium-ui/components/dropdown-options/style.less

This component should be used as a part of more complex components. See button-dropdown and select-dropdown components for more information.

Option 1
Option 2
Option 3
Option 4
Option 5
Source code (Pug)
.mui-dropdown-options
    .wrapper
        .option Option 1
        .option Option 2
        .option Option 3
        .option Option 4
        .option Option 5
Source code (HTML)
<div class="mui-dropdown-options">
  <div class="wrapper">
    <div class="option">Option 1</div>
    <div class="option">Option 2</div>
    <div class="option">Option 3</div>
    <div class="option">Option 4</div>
    <div class="option">Option 5</div>
  </div>
</div>
/src/muilessium-ui/components/header-logo/style.less

Should be used inside the page header.

Source code (Pug)
.mui-page-header
    .mui-header-logo
        a.link(href='')
            h1 Logo
Source code (HTML)
<div class="mui-page-header">
  <div class="mui-header-logo"><a class="link" href="">
      <h1>Logo</h1></a></div>
</div>
/src/muilessium-ui/components/header-navigation/style.less

Should be used inside the page-header.

(!) HeaderNavigation - Use Muilessium.get('HeaderNavigation', id) to get it.
  • openNavigation()  - opens mobile navigation
  • closeNavigation()  - closes mobile navigation
  • toggleNavigation()  - opens mobile navigation if it is closed and closes it otherwise
  • transformToMobile()  - transforms navigation to mobile version
  • transformToDesktop() - transforms navigation to desktop version
Event: open-navigation - Use HeaderNavigation.addEventListener('open-navigation', (state) => { /* . . . */ }) to subscribe.
Event: close-navigation - Use HeaderNavigation.addEventListener('close-navigation', (state) => { /* . . . */ }) to subscribe.
Requires shadow-toggle
Source code (Pug)
.mui-page-header
    nav.mui-header-navigation.-mobile-version#docs-only-id--header-navigation
        .mui-navigation-toggle.-hamburger
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--hamburger')
        ul.linkslist
            li.item
                a.link(href='')
                    span home
                    span.mui-badge(aria-label='5 news') 5
            li.item
                a.link(href='') about
            li.item
                a.link(href='') contacts
        .mui-shadow-toggle
Source code (HTML)
<div class="mui-page-header">
  <nav class="mui-header-navigation -mobile-version" id="docs-only-id--header-navigation">
    <div class="mui-navigation-toggle -hamburger">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--hamburger"></use>
      </svg>
    </div>
    <ul class="linkslist">
      <li class="item"><a class="link" href=""><span>home</span><span class="mui-badge" aria-label="5 news">5</span></a></li>
      <li class="item"><a class="link" href="">about</a></li>
      <li class="item"><a class="link" href="">contacts</a></li>
    </ul>
    <div class="mui-shadow-toggle"></div>
  </nav>
</div>
/src/muilessium-ui/components/hero-header/style.less

The -full-height option makes in height=100vh

Requires image
Requires svg-icon
Background

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!

Source code (Pug)
.mui-hero-header
    img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/2e7d32/1b5e20' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Background')
    noscript
        img.mui-image.background(src='https://placehold.it/1200x800/2e7d32/1b5e20' alt='Background')
    .effects
    .content
        h2 Lorem ipsum dolor sit amet.
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!
    .scrollicon
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--arrow-down')
Source code (HTML)
<div class="mui-hero-header"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/2e7d32/1b5e20" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Background"/>
  <noscript><img class="mui-image background" src="https://placehold.it/1200x800/2e7d32/1b5e20" alt="Background"/></noscript>
  <div class="effects"></div>
  <div class="content">
    <h2>Lorem ipsum dolor sit amet.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!</p>
  </div>
  <div class="scrollicon">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-down"></use>
    </svg>
  </div>
</div>
/src/muilessium-ui/components/image/style.less

...

Example
Variant: -rounded
Example
Variant: -circle
Example
Source code (Pug)
img.mui-image.-js-lazy-load(data-src='https://placehold.it/250x250/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Example')
noscript
    img.mui-image(src='https://placehold.it/250x250/4caf50/2e7d32' alt='Example')
Source code (HTML)
<img class="mui-image -js-lazy-load" data-src="https://placehold.it/250x250/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Example"/>
<noscript><img class="mui-image" src="https://placehold.it/250x250/4caf50/2e7d32" alt="Example"/></noscript>
/src/muilessium-ui/components/input/style.less

Has two parameters: regexp (/^(?:)$/ by default) and validation-delay (300ms by defaut). Use -js-no-validation class on mui-input to create input without validation.

(!) Input - Use Muilessium.get('Input', id) to get it.
  • validate() - validates input
  • isValid()  - returns true if the input value is valid and false otherwise
  • getValue() - returns input value
  • setValue(value) - sets input value
Event: update-state - Use Input.addEventListener('update-state', (state) => { /* . . . */ }) to subscribe.
Username (min 3 characters, only letters allowed)
Source code (Pug)
.mui-input-wrapper
    label.mui-input-label Username
    .mui-input-hint
        span Username (min 3 characters, only letters allowed)
        span.mui-input-indicator
            span.validicon
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--check')
            span.invalidicon
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--close')
    .mui-input#docs-only-id--input(data-regexp='^[a-zA-Z]{3,}$' data-validation-delay='1000')
        input(type='text' placeholder='Your username')
Source code (HTML)
<div class="mui-input-wrapper">
  <label class="mui-input-label">Username</label>
  <div class="mui-input-hint"><span>Username (min 3 characters, only letters allowed)</span><span class="mui-input-indicator"><span class="validicon">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--check"></use>
        </svg></span><span class="invalidicon">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--close"></use>
        </svg></span></span></div>
  <div class="mui-input" id="docs-only-id--input" data-regexp="^[a-zA-Z]{3,}$" data-validation-delay="1000">
    <input type="text" placeholder="Your username"/>
  </div>
</div>
/src/muilessium-ui/components/list/style.less

Ordered and unordered lists with a number of aditional styles. Use "-no-bullets" to remove bullets.

  • list item
  • list item
  • list item
    1. list item
    2. list item
    3. list item
  • list item
  • list item
    • list item
    • list item
      • list item
      • list item
      • list item
Source code (Pug)
ul.mui-list._separate-1
    li.item list item
    li.item list item
    li.item list item
    ol.mui-list._separate-1
        li.item list item
        li.item list item
        li.item list item
ul.mui-list._separate-1
    li.item list item
    li.item list item
    ul.mui-list
        li.item list item
        li.item list item
        ul.mui-list._separate-1
            li.item list item
            li.item list item
            li.item list item
Source code (HTML)
<ul class="mui-list _separate-1">
  <li class="item">list item</li>
  <li class="item">list item</li>
  <li class="item">list item</li>
  <ol class="mui-list _separate-1">
    <li class="item">list item</li>
    <li class="item">list item</li>
    <li class="item">list item</li>
  </ol>
</ul>
<ul class="mui-list _separate-1">
  <li class="item">list item</li>
  <li class="item">list item</li>
  <ul class="mui-list">
    <li class="item">list item</li>
    <li class="item">list item</li>
    <ul class="mui-list _separate-1">
      <li class="item">list item</li>
      <li class="item">list item</li>
      <li class="item">list item</li>
    </ul>
  </ul>
</ul>
/src/muilessium-ui/components/marker/style.less

...

lorem ipsum
Source code (Pug)
span.mui-marker lorem ipsum
Source code (HTML)
<span class="mui-marker">lorem ipsum</span>
/src/muilessium-ui/components/media-view/style.less

Use "-full-width" option to create media view with max-width=100%.

Requires image
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.
Source code (Pug)
.mui-media-view
    img.mui-image.-rounded.-js-lazy-load(data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Lorem ipsum')
    noscript
        img.mui-image(src='https://placehold.it/1200x800/4caf50/2e7d32' alt='Lorem ipsum')
    .description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.
Source code (HTML)
<div class="mui-media-view"><img class="mui-image -rounded -js-lazy-load" data-src="https://placehold.it/1200x800/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Lorem ipsum"/>
  <noscript><img class="mui-image" src="https://placehold.it/1200x800/4caf50/2e7d32" alt="Lorem ipsum"/></noscript>
  <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.</div>
</div>
/src/muilessium-ui/components/modal-window/style.less

Should be used for images. Shouldn't be used for interactive content.

(!) ModalWindow - Use Muilessium.get('ModalWindow', id) to get it.
  • openModal()  - opens modal window
  • closeModal() - closes modal window
Event: open-modal - Use ModalWindow.addEventListener('open-modal', (state) => { /* . . . */ }) to subscribe.
Event: close-modal - Use ModalWindow.addEventListener('close-modal', (state) => { /* . . . */ }) to subscribe.
Requires shadow-toggle
Requires image
Requires svg-icon
Show big image
Image description
Source code (Pug)
.mui-button(data-modal-opener='docs-only-id--modal-window') Show big image
.mui-modal-window#docs-only-id--modal-window
    .window._shadow-3
        .content.-image
            img.mui-image.-js-lazy-load(data-src='https://placehold.it/800x600/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Image description')
            noscript
                img.mui-image(src='https://placehold.it/800x600/4caf50/2e7d32' alt='Image description')
        .closeicon
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--close')
    .mui-shadow-toggle
Source code (HTML)
<div class="mui-button" data-modal-opener="docs-only-id--modal-window">Show big image</div>
<div class="mui-modal-window" id="docs-only-id--modal-window">
  <div class="window _shadow-3">
    <div class="content -image"><img class="mui-image -js-lazy-load" data-src="https://placehold.it/800x600/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Image description"/>
      <noscript><img class="mui-image" src="https://placehold.it/800x600/4caf50/2e7d32" alt="Image description"/></noscript>
    </div>
    <div class="closeicon">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--close"></use>
      </svg>
    </div>
  </div>
  <div class="mui-shadow-toggle"></div>
</div>
/src/muilessium-ui/components/notification/style.less

Global notifications. There are two types of notifications - "banner" and "message". Banner should be used for static notifications for all users. Usually it is used at the top ot the page. Messages should be used as popup notifications (left and right). They are hidden by default. Use Muilessium.UTILS.animateElement to animate them with fade-in-* animations.

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Source code (Pug)
.mui-notification.-message.-left._shadow-3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
.mui-notification.-message.-right._shadow-3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
.mui-notification.-banner Lorem ipsum dolor sit amet consectetur adipisicing elit.
Source code (HTML)
<div class="mui-notification -message -left _shadow-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="mui-notification -message -right _shadow-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="mui-notification -banner">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
/src/muilessium-ui/components/page-footer/style.less

Should be used with .mui-page-container for creating sticky footer.

Copyright © ...
Source code (Pug)
footer.mui-page-footer Copyright &copy; ...
Source code (HTML)
<footer class="mui-page-footer">Copyright &copy; ...</footer>
/src/muilessium-ui/components/page-header/style.less

...

Requires header-logo
Requires header-navigation
Source code (Pug)
header.mui-page-header
    .mui-header-logo._left
        a.link(href='')
            h1 Logo
    nav.mui-header-navigation.-mobile-version._right
        .mui-navigation-toggle.-hamburger
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--hamburger')
        ul.linkslist
            li.item
                a.link(href='')
                    span home
                    span.mui-badge 5
            li.item
                a.link(href='') about
        .mui-navigation-toggle.mui-shadow-toggle
Source code (HTML)
<header class="mui-page-header">
  <div class="mui-header-logo _left"><a class="link" href="">
      <h1>Logo</h1></a></div>
  <nav class="mui-header-navigation -mobile-version _right">
    <div class="mui-navigation-toggle -hamburger">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--hamburger"></use>
      </svg>
    </div>
    <ul class="linkslist">
      <li class="item"><a class="link" href=""><span>home</span><span class="mui-badge">5</span></a></li>
      <li class="item"><a class="link" href="">about</a></li>
    </ul>
    <div class="mui-navigation-toggle mui-shadow-toggle"></div>
  </nav>
</header>
/src/muilessium-ui/components/pagination/style.less

...

Requires svg-icon
Source code (Pug)
.mui-pagination
    button.mui-button
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--arrow-left')
    button.mui-button 1
    button.mui-button 2
    button.mui-button 3
    button.mui-button 4
    button.mui-button
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--arrow-right')
Source code (HTML)
<div class="mui-pagination">
  <button class="mui-button">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-left"></use>
    </svg>
  </button>
  <button class="mui-button">1</button>
  <button class="mui-button">2</button>
  <button class="mui-button">3</button>
  <button class="mui-button">4</button>
  <button class="mui-button">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-right"></use>
    </svg>
  </button>
</div>
/src/muilessium-ui/components/paragraph/style.less

...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.

Source code (Pug)
p.mui-p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.
Source code (HTML)
<p class="mui-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.</p>
/src/muilessium-ui/components/post/style.less

Components those should be used together for the posts on page.

Requires button
Requires tags-list
Published onSeptember 29, 2018
Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.

read more
Source code (Pug)
article.mui-post._shadow-1
    header.mui-post-header
        .title
            a.link(href='')
                h4 Lorem ipsum dolor
        .information.-grey-4
            span Published on
            span.date September 29, 2018
    .mui-post-content
        img.mui-image.-rounded.-js-lazy-load(data-src='https://placehold.it/800x400/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Example')
        noscript
            img.mui-image(src='https://placehold.it/800x400/4caf50/2e7d32' alt='Example')
        p.mui-p._separate-1
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.
        a.mui-button.-ghost._separate-top-1(href='')
            span read more
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--arrow-right')
    footer.mui-post-footer
        .mui-tags-list(aria-label='Tags list')
            .mui-tag-wrapper.-icon(role='presentation')
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--tags')
            .mui-tag-wrapper
                a.mui-tag(href='') html
            .mui-tag-wrapper
                a.mui-tag(href='') css
            .mui-tag-wrapper
                a.mui-tag(href='') javascript
            .mui-tag-wrapper
                a.mui-tag(href='') gulp
            .mui-tag-wrapper
                a.mui-tag(href='') webpack
Source code (HTML)
<article class="mui-post _shadow-1">
  <header class="mui-post-header">
    <div class="title"><a class="link" href="">
        <h4>Lorem ipsum dolor</h4></a></div>
    <div class="information -grey-4"><span>Published on</span><span class="date">September 29, 2018</span></div>
  </header>
  <div class="mui-post-content"><img class="mui-image -rounded -js-lazy-load" data-src="https://placehold.it/800x400/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Example"/>
    <noscript><img class="mui-image" src="https://placehold.it/800x400/4caf50/2e7d32" alt="Example"/></noscript>
    <p class="mui-p _separate-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.</p><a class="mui-button -ghost _separate-top-1" href=""><span>read more</span>
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--arrow-right"></use>
      </svg></a>
  </div>
  <footer class="mui-post-footer">
    <div class="mui-tags-list" aria-label="Tags list">
      <div class="mui-tag-wrapper -icon" role="presentation">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--tags"></use>
        </svg>
      </div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">html</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">css</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">javascript</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">gulp</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">webpack</a></div>
    </div>
  </footer>
</article>
/src/muilessium-ui/components/progress-bar/style.less

...

(!) ProgressBar - Use Muilessium.get('ProgressBar', id) to get it.
  • setValue(newValue) - sets new value and animates the progress bar
  • getValue()  - returns current value of the progress bar
Source code (Pug)
.mui-progress-bar#docs-only-id--progress-bar(data-value='60')
    .indicator
    .value
Source code (HTML)
<div class="mui-progress-bar" id="docs-only-id--progress-bar" data-value="60">
  <div class="indicator"></div>
  <div class="value"></div>
</div>
/src/muilessium-ui/components/progress-bar/style.less

Use "-align-center" option to set margin left/right to auto.

(!) ProgressBar - Use Muilessium.get('ProgressBar', id) to get it.
  • setValue(newValue) - sets new value and animates progress bar
  • getValue()  - returns current value of the progress bar
Source code (Pug)
.mui-progress-bar.-radial#docs-only-id--radial-progress-bar(data-value='60')
    svg.indicator(viewbox='0 0 100 100')
        circle.background(cx='50' cy='50' r='34')
        circle.progress(cx='50' cy='50' r='34')
    .value
Source code (HTML)
<div class="mui-progress-bar -radial" id="docs-only-id--radial-progress-bar" data-value="60">
  <svg class="indicator" viewbox="0 0 100 100">
    <circle class="background" cx="50" cy="50" r="34"></circle>
    <circle class="progress" cx="50" cy="50" r="34"></circle>
  </svg>
  <div class="value"></div>
</div>
/src/muilessium-ui/components/radio/style.less

...

(!) Radio - Use Muilessium.get('Radio', id) to get it.
  • updateState(index) - makes input with selected index selected
  • getState()  - returns index of the checked input
Event: update-state - Use Radio.addEventListener('update-state', (state) => { /* . . . */ }) to subscribe.
Requires input
Left or right?
Source code (Pug)
.mui-input-wrapper
    .mui-input-label Left or right?
    .mui-radio#docs-only-id--radio(data-name='docs-only-name--radio')
        input(value='left', checked='')
        label
            span.icon
            span.text Left
        input(value='right')
        label
            span.icon
            span.text Right
Source code (HTML)
<div class="mui-input-wrapper">
  <div class="mui-input-label">Left or right?</div>
  <div class="mui-radio" id="docs-only-id--radio" data-name="docs-only-name--radio">
    <input value="left" checked=""/>
    <label><span class="icon"></span><span class="text">Left</span></label>
    <input value="right"/>
    <label><span class="icon"></span><span class="text">Right</span></label>
  </div>
</div>
/src/muilessium-ui/components/ribbon/style.less

Ribbons whould be placed inside ribbon-wrappers or another containers with position=relative.

Source code (Pug)
.mui-ribbon-wrapper
    .mui-ribbon.-classic.-top.-left(aria-hidden='true') new
    .mui-ribbon.-classic.-top.-right(aria-hidden='true') new
    .mui-ribbon.-classic.-bottom.-left(aria-hidden='true') new
    .mui-ribbon.-classic.-bottom.-right(aria-hidden='true') new
.mui-ribbon-wrapper
    .mui-ribbon.-bookmark.-left(aria-hidden='true') new
    .mui-ribbon.-bookmark.-right(aria-hidden='true') new
Source code (HTML)
<div class="mui-ribbon-wrapper">
  <div class="mui-ribbon -classic -top -left" aria-hidden="true">new</div>
  <div class="mui-ribbon -classic -top -right" aria-hidden="true">new</div>
  <div class="mui-ribbon -classic -bottom -left" aria-hidden="true">new</div>
  <div class="mui-ribbon -classic -bottom -right" aria-hidden="true">new</div>
</div>
<div class="mui-ribbon-wrapper">
  <div class="mui-ribbon -bookmark -left" aria-hidden="true">new</div>
  <div class="mui-ribbon -bookmark -right" aria-hidden="true">new</div>
</div>
/src/muilessium-ui/components/scroll-fix/style.less

Internal component.

/src/muilessium-ui/components/select-dropdown/style.less

Data-id attribute should be used to select id and name attributes for the hidden html select element. Should be used with label for better accessibility.

(!) SelectDropdown - Use Muilessium.get('SelectDropdown', id) to get it.
  • getSelectedIndex()  - returns index of the selected item
  • openDropdown()  - opens dropdown menu
  • closeDropdown()  - closes dropdown menu
  • toggleDropdown()  - opens dropdown menu if it is closed and closes it otherwise
  • updateState(newIndex = 0) - selects item with selected index
  • getState()  - returns index of the selected item
Event: update-state - Use SelectDropdown.addEventListener('update-state', (state) => { /* . . . */ }) to subscribe.
Requires input
Requires dropdown-options
Requires shadow-toggle
Requires svg-icon
Red
Green
Blue
Orange
Source code (Pug)
.mui-input-wrapper
    label.mui-input-label Select color
    .mui-select-dropdown#docs-only-id--select-dropdown
        .select
            .state
            .mui-dropdown-options._shadow-1
                .wrapper
                    .option.-selected(data-value='red') Red
                    .option(data-value='green') Green
                    .option(data-value='blue') Blue
                    .option(data-value='orange') Orange
        .mui-shadow-toggle
        .icon
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--arrow-down')
Source code (HTML)
<div class="mui-input-wrapper">
  <label class="mui-input-label">Select color</label>
  <div class="mui-select-dropdown" id="docs-only-id--select-dropdown">
    <div class="select">
      <div class="state"></div>
      <div class="mui-dropdown-options _shadow-1">
        <div class="wrapper">
          <div class="option -selected" data-value="red">Red</div>
          <div class="option" data-value="green">Green</div>
          <div class="option" data-value="blue">Blue</div>
          <div class="option" data-value="orange">Orange</div>
        </div>
      </div>
    </div>
    <div class="mui-shadow-toggle"></div>
    <div class="icon">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--arrow-down"></use>
      </svg>
    </div>
  </div>
</div>
/src/muilessium-ui/components/shadow-toggle/style.less

This component should be used as part of more complex components. See button-dropdown, select-dropdown, header-navigation components for more information.

/src/muilessium-ui/components/spinner/style.less

...

Requires svg-icon
Source code (Pug)
.mui-spinner(role='presentation')
    svg.mui-svg-icon
        use(xlink:href='#mui-svg-icon--spinner')
Source code (HTML)
<div class="mui-spinner" role="presentation">
  <svg class="mui-svg-icon">
    <use xlink:href="#mui-svg-icon--spinner"></use>
  </svg>
</div>
/src/muilessium-ui/components/spoiler/style.less

...

(!) Spoiler - Use Muilessium.get('Spoiler', id) to get it.
  • open()  - opens spoiler
  • close()  - closes spoiler
  • toggle() - opens spoiler if it is closed and closes it otherwise
spoiler

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.

Source code (Pug)
.mui-spoiler#docs-only-id--spoiler
    .title spoiler
    .content
        p.mui-p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.
Source code (HTML)
<div class="mui-spoiler" id="docs-only-id--spoiler">
  <div class="title">spoiler</div>
  <div class="content">
    <p class="mui-p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.</p>
  </div>
</div>
/src/muilessium-ui/components/svg-icon/style.less

...

Requires svg-sprite
Source code (Pug)
svg.mui-svg-icon
    use(xlink:href='#mui-svg-icon--check')
Source code (HTML)
<svg class="mui-svg-icon">
  <use xlink:href="#mui-svg-icon--check"></use>
</svg>
/src/muilessium-ui/components/svg-sprite/style.less

...

Source code (Pug)
.mui-svg-sprite
    // svg
    //     symbol ...
Source code (HTML)
<div class="mui-svg-sprite">
  <!-- svg-->
  <!--     symbol ...-->
</div>
/src/muilessium-ui/components/table/style.less

...

Table Header
lorem ipsum lorem ipsum dolor sit
lorem ipsum lorem ipsum dolor sit
Variant: -striped
Table Header
lorem ipsum lorem ipsum dolor sit
lorem ipsum lorem ipsum dolor sit
Source code (Pug)
table.mui-table
    tbody
        tr.header
            th Table
            th Header
        tr
            td lorem ipsum
            td lorem ipsum dolor sit
        tr
            td lorem ipsum
            td lorem ipsum dolor sit
Source code (HTML)
<table class="mui-table">
  <tbody>
    <tr class="header">
      <th>Table</th>
      <th>Header</th>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum dolor sit</td>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum dolor sit</td>
    </tr>
  </tbody>
</table>
/src/muilessium-ui/components/tabs/style.less

...

(!) Tabs - Use Muilessium.get('Tabs', id) to get it.
  • goToPreviousTab() - switches component to next tab
  • goToNextTab()  - switches component to previous tab
Tab 1 Lorem ipsum dolor sit amet
Tab 2 Lorem ipsum dolor
Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.
Source code (Pug)
.mui-tabs#docs-only-id--tabs
    .labels
        .label Tab 1 Lorem ipsum dolor sit amet
        .label Tab 2 Lorem ipsum dolor
        .label Tab 3
    .tabs
        .tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!
        .tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!
        .tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.
Source code (HTML)
<div class="mui-tabs" id="docs-only-id--tabs">
  <div class="labels">
    <div class="label">Tab 1 Lorem ipsum dolor sit amet</div>
    <div class="label">Tab 2 Lorem ipsum dolor</div>
    <div class="label">Tab 3</div>
  </div>
  <div class="tabs">
    <div class="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!</div>
    <div class="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!</div>
    <div class="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.</div>
  </div>
</div>
/src/muilessium-ui/components/tags-list/style.less

...

Requires svg-icon
Source code (Pug)
.mui-tags-list(aria-label='Tags list')
    .mui-tag-wrapper.-icon(role='presentation')
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--tags')
    .mui-tag-wrapper
        a.mui-tag(href='') html
    .mui-tag-wrapper
        a.mui-tag(href='') css
    .mui-tag-wrapper
        a.mui-tag(href='') javascript
    .mui-tag-wrapper
        a.mui-tag(href='') gulp
    .mui-tag-wrapper
        a.mui-tag(href='') webpack
Source code (HTML)
<div class="mui-tags-list" aria-label="Tags list">
  <div class="mui-tag-wrapper -icon" role="presentation">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--tags"></use>
    </svg>
  </div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">html</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">css</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">javascript</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">gulp</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">webpack</a></div>
</div>
/src/muilessium-ui/components/textarea/style.less

Label should be used for better accessibility.

(!) Textarea - Use Muilessium.get('Textarea', id) to get it.
  • getValue() - returns the value of the textarea
  • setValue(value) - sets the value of the textarea
Event: update-state - Use Textarea.addEventListener('update-state', (state) => { /* . . . */ }) to subscribe.
Requires input
Source code (Pug)
.mui-input-wrapper
    label.mui-input-label Your message
    .mui-textarea#docs-only-id--textarea
        textarea(placeholder='Print your message here')
Source code (HTML)
<div class="mui-input-wrapper">
  <label class="mui-input-label">Your message</label>
  <div class="mui-textarea" id="docs-only-id--textarea">
    <textarea placeholder="Print your message here"></textarea>
  </div>
</div>