expand_less
Components
Components Intro Buttons Cards Checkboxes Chips Lists Headers Icons Radio Buttons Select Text Fields

Components

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

Button call_to_action Button Button call_to_action Button call_to_action Button call_to_action

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

Button Button call_to_action Button arrow_downward 
        
        
<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

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

One more Alternative contained button

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

Outlined button

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

Flat button

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

Disabled buttons

Button Button Button Button 
        
        
<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

blur_on
Button
bubble_chart
Button
business_center 
        
        
<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.