expand_less

Components

Different types for different purposes. Use them to group text or images in column or elsewhere.

Buttons

There are 4 main button types in mosimac design. The contained button is a standard button mostly used on pages. The alternative one is another version of contained but has light acsent. Outlined button is used for more emphasis due to additional border. And flat buttons are used for less important actions.

Contained button

        
        
<a class="btn">
    <span>Button</span>
</a>
<a class="btn icon-right">
    <span>Button</span>
    <i class="material-icons">call_to_action</i>
</a>
<a class="btn icon-left">
    <span>Button</span>
    <i class="material-icons">arrow_downward</i>
</a>
        
        
    

Alternative contained button

        
        
<a class="btn2">
    <span>Button</span>
</a>
        
        
    

One more Alternative contained button

        
        
<a class="btn3">
    <span>Button</span>
</a>
        
        
    

Outlined button

        
        
<a class="btn-outlined">
    <span>Button</span>
</a>   
        
        
    

Flat button

        
        
<a class="btn-flat">
    <span>Button</span>
</a>   
        
        
    

Disabled buttons

        
        
<a class="btn disabled">
    <span>Button</span>
</a>
<a class="btn2 disabled">
    <span>Button</span>
</a>
<a class="btn-outlined disabled">
    <span>Button</span>
</a>
<a class="btn-flat disabled">
    <span>Button</span>
</a>  
        
        
    

More buttons

What follows below are buttons that goes beyond standard types. But they still mix in good overall into design

Bagde button

        
        
<a class="btn-badge">
    <div class="badge">
        <i class="material-icons">blur_on</i>
    </div>
</a>
<a class="btn-badge badge-right yellow">
    <span>Button</span>
    <div class="badge">
        <i class="material-icons">bubble_chart</i>
    </div>
</a>
<a class="btn-badge badge-left red">
    <span>Button</span>
    <div class="badge">
        <i class="material-icons">business_center</i>
    </div>
</a>
        
        
    

Cards

Different types for different purposes. Use them to group text or images in column or elsewhere.

Checkboxes

Different types for different purposes. Use them to group text or images in column or elsewhere.

Chips

Different types for different purposes. Use them to group text or images in column or elsewhere.

Lists

Different types for different purposes. Use them to group text or images in column or elsewhere.

One-lined List

List header shopping_basket
Item1
Item2 About Item1 description
Item3 About Item1 description
Item4 About Item1 description
Item5 About Item1 description
blur_on
Item3 About Item1 description
        
        
<div class="list-block">
    <div class="title-list">
        <span>List header</span>
        <i class="material-icons">shopping_basket</i>
    </div>
    <div class="list-items">
        <div class="l-item">
            <span>Item1</span>
        </div>
        <div class="l-item">
            <span>Item2</span>
            <span class="secondary">About Item1 description</span>
        </div>
        <div class="l-item withvisual">
            <div class="visual">
                <div class="green-box"></div>
            </div>
            <div class="text">
                <span>Item3</span>
                <span class="secondary">About Item1 description</span>
            </div>
        </div>
        <div class="l-item withvisual">
            <div class="visual-item">
                <div class="green-box"></div>
            </div>
            <div class="text">
                <span>Item4</span>
                <span class="secondary">About Item1 description</span>
            </div>
            <div class="side-item">
                <div class="mos-checkbox"></div>
            </div>
        </div>
         <div class="l-item withvisual">
            <div class="visual-item">
                <div class="green-box"></div>
            </div>
            <div class="text">
                <span>Item5</span>
                <span class="secondary">About Item1 description</span>
            </div>
            <div class="side-item">
                <i class="material-icons">blur_on</i>
            </div>
        </div>
    </div>
    <div class="list-items">
        <div class="l-item">
            <span>Item3</span>
            <span class="secondary">About Item1 description</span>
        </div>
    </div>
</div>
        
        
    

Two-lined List

List header
Item1 About Item1 description
Item2 About description
Item3 Item3 description
        
        
<div class="list-block small">
    <span class="title-list">
        List header
    </span>
    <div class="list-items">
        <div class="l-item">
            <span>Item1</span>
        </div>
        <div class="l-item">
            <span>Item2</span>
        </div>
        <div class="l-item"> 
            <span>Item3</span>
        </div>
        <div class="l-item"> 
            <span>Item4</span>
        </div>
        <div class="l-item"> 
            <span>Item5</span>
        </div>
        <div class="l-item"> 
            <span>Item6</span>
        </div>
        <div class="l-item"> 
            <span>Item7</span>
        </div>
    </div>
</div>
        
        
    

Headers

Different types for different purposes. Use them to group text or images in column or elsewhere.

Radio buttons

Different types for different purposes. Use them to group text or images in column or elsewhere.

Select

Different types for different purposes. Use them to group text or images in column or elsewhere.

Text Fields

There are 4 main button types in mosimac design. The contained button is a standard button mostly used on pages. The alternative one is another version of contained but has light acsent. Outlined button is used for more emphasis due to additional border. And flat buttons are used for less important actions.