Board

The modern container for your tiles, panes and the others elements.

Demo

Contacts

a
Abraracourcix picture
Abraracourcix
Assurancetourix picture
Assurancetourix
Asterix picture
Asterix
b
Barbe Rouge picture
Barbe Rouge
Brutus picture
Brutus
c
César picture
César
Cléopatre picture
Cléopatre
i
Idéfix picture
Idéfix
o
Obélix picture
Obélix
p
Panoramix picture
Panoramix
<div class="mw-board contact u-bg-black" style="background-image: none;">
    <h1>Contacts</h1>
    <div class="mw-panes u-u-float-left u-width-100">
        <div class="mw-pane"><div class="mw-inner u-flex"><div class="mw-icon mw-size-300 u-bg-gd-purple-dark"><span class="index">a</span></div></div></div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Abraracourcix picture" src="~/resources/Image/Asterix/Vitalstatistix.gif" />
                <div class="mw-title">Abraracourcix</div>
            </div>
        </div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Assurancetourix picture" src="~/resources/Image/Asterix/Cacofonix.gif" />
                <div class="mw-title">Assurancetourix</div>
            </div>
        </div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Asterix picture" src="~/resources/Image/Asterix/Asterix.gif" />
                <div class="mw-title">Asterix</div>
            </div>
        </div>
        <div class="mw-pane"><div class="mw-inner u-flex"><div class="mw-icon mw-size-300 u-bg-gd-purple-dark"><span class="index">b</span></div></div></div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Barbe Rouge picture" src="~/resources/Image/Asterix/Redbeard.gif" />
                <div class="mw-title">Barbe Rouge</div>
            </div>
        </div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Brutus picture" src="~/resources/Image/Asterix/Brutus.gif" />
                <div class="mw-title">Brutus</div>
            </div>
        </div>
        <div class="mw-pane"><div class="mw-inner u-flex"><div class="mw-icon mw-size-300 u-bg-gd-purple-dark"><span class="index">c</span></div></div></div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="César picture" src="~/resources/Image/Asterix/Ceasar.gif" />
                <div class="mw-title">César</div>
            </div>
        </div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Cléopatre picture" src="~/resources/Image/Asterix/Cleopatra.gif" />
                <div class="mw-title">Cléopatre</div>
            </div>
        </div>
        <div class="mw-pane"><div class="mw-inner u-flex"><div class="mw-icon mw-size-300 u-bg-gd-purple-dark"><span class="index">i</span></div></div></div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Idéfix picture" src="~/resources/Image/Asterix/Dogmatix.gif" />
                <div class="mw-title">Idéfix</div>
            </div>
        </div>
        <div class="mw-pane"><div class="mw-inner u-flex"><div class="mw-icon mw-size-300 u-bg-gd-purple-dark"><span class="index">o</span></div></div></div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Obélix picture" src="~/resources/Image/Asterix/Obelix.gif" />
                <div class="mw-title">Obélix</div>
            </div>
        </div>
        <div class="mw-pane"><div class="mw-inner u-flex"><div class="mw-icon mw-size-300 u-bg-gd-purple-dark"><span class="index">p</span></div></div></div>
        <div class="mw-pane">
            <div class="mw-inner u-flex">
                <img class="mw-icon mw-size-300" alt="Panoramix picture" src="~/resources/Image/Asterix/Getafix.gif" />
                <div class="mw-title">Panoramix</div>
            </div>
        </div>
    </div>
</div>

Board container

To create a board container, you must wrap your tiles, panes or elements in a board element. 

<div class="mw-board">
    <div class="mw-tiles"><!-- insert your tiles here --></div>
    <div class="mw-panes"><!-- insert your panes here --></div>
</div>

Board color

You can personalize a board and add a background color.
You can choose between 16 elaborated color; pacific (default color), sky, twilight, sea, leaf, lime, sun, pumpkin, ruby, blush, violet, lavender, taupe, chocolate, slate, frost.
To persolanize the color, you must add a class u-bg-gd-*-*² on your mw-board element, *specifies the color, *² specifies the direction of the gradient.

Board tiles

To use tiles inside board element, you must add a mw-tiles element.
You can customize your tiles with all css classes of tile component.
For more details, you must referer to tile component documentation.

A title

A label 
<div class="mw-board">
    <div class="mw-tiles mw-col-2">
        <div class="mw-tile mw-wide">
            <div class="mw-inner u-flex">
                <i class="mw-icon mw-image"></i>
                <h4 class="mw-title">A title</h4>
                <span class="mw-label u-bg-blue-dark u-position-right">A label</span>
            </div>
        </div>
        <!-- insert tiles here -->
    </div>
</div>

Board panes

To use panes inside board element, you must add a mw-panes element.
You can customize your panes with all css classes of pane component.
For more details, you must referer to pane component documentation. 

<nav class="mw-board mw-navigation" style="width: 365px;">
    <div class="mw-panes mw-frame u-bg-white mw-theme-light">
        <ul class="u-list-unstyled">
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <img class="mw-icon" alt="icon" src="/Resources/Image/image.svg">
                    <div class="mw-title">a link</div>
                </a>
            </li>
            <!-- insert panes here -->
        </ul>
    </div>
</nav>

Navigation

The navigation, the element who allows you to navigate simply through a website. 

<nav class="mw-board mw-navigation" role="navigation">
    <div class="mw-panes mw-frame u-bg-white mw-theme-light u-float-left">
        <ul class="u-list-unstyled">
            <li class="mw-pane">
                <a class="mw-inner u-flex mw-submenu" href="#">
                    <img class="mw-icon" alt="icon" src="/resources/Image/icon-google.png" />
                    <div class="mw-title">Google</div>
                </a>
            </li>
            <li class="mw-divider u-bd-transparent"></li>
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <img class="mw-icon" alt="icon" src="/resources/Image/icon-ebay.png" />
                    <div class="mw-title">Ebay</div>
                </a>
            </li>
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <img class="mw-icon" alt="icon" src="/resources/Image/icon-imdb.png" />
                    <div class="mw-title">IMDb</div>
                </a>
            </li>
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <img class="mw-icon" alt="icon" src="/resources/Image/icon-linkedin.png" />
                    <div class="mw-title">Linkedin</div>
                </a>
            </li>
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <img class="mw-icon" alt="icon" src="/resources/Image/icon-twitter.png" />
                    <div class="mw-title text-ellipsis">Twitter (an overflow text)</div>
                </a>
            </li>
        </ul>
    </div>
    <div class="mw-panes u-float-left" style="width: 135px;">
        <ul class="u-list-unstyled">
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <i class="fa fa-home mw-size-150"></i>
                    <div class="mw-title">Home</div>
                </a>
            </li>
            <li class="mw-pane">
                <a class="mw-inner u-flex mw-submenu" href="#">
                    <i class="fa fa-user mw-size-150"></i>
                    <div class="mw-title">Profil</div>
                </a>
            </li>
            <li class="mw-divider"></li>
            <li class="mw-pane">
                <a class="mw-inner u-flex mw-submenu" href="#">
                    <i class="fa fa-life-saver mw-size-150"></i>
                    <div class="mw-title">Help</div>
                </a>
            </li>
        </ul>
    </div>
</nav>

The navigation menu is a mw-board container

The navigation menu is a special container which uses the mw-board container.
You must referer to board component.

As the board component, the navigation menu uses the mw-pane or/and mw-tile component

The navigation menu render a list of links in using the mw-pane or/and mw-tile.
You must referer to pane component or tile component to custom your list of links.

To have a navigation menu, you must wrap your links into a nav element and add the css class mw-navigation on your nav element. 

<nav class="mw-board mw-navigation u-width-33">
    <div class="mw-panes">
        <ul class="u-list-unstyled">
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <div class="mw-title">a link</div>
                </a>
            </li>
        </ul>
    </div>
</nav>

If you want create a submenu, you must add the css class mw-submenu on your link element. 

<nav class="mw-board mw-navigation u-width-100" role="navigation">
    <div class="mw-panes mw-frame u-bg-white mw-theme-light">
        <ul class="u-list-unstyled">
            <li class="mw-pane">
                <a class="mw-inner u-flex mw-submenu" href="#">
                    <img class="mw-icon" alt="icon" src="/Resources/Image/image.svg">
                    <div class="mw-title">link</div>
                </a>
            </li>
        </ul>
    </div>
</nav>
<nav class="mw-board mw-navigation u-width-25" role="navigation">
    <div class="mw-panes mw-frame u-bg-white mw-theme-light">
        <ul class="u-list-unstyled">
            <li class="mw-pane">
                <a class="mw-inner u-flex" href="#">
                    <div class="mw-led u-on-blue"></div>
                    <i class="fa fa-picture-o u-fg-black"></i>
                    <div class="mw-title">link</div>
                </a>
            </li>
        </ul>
    </div>
</nav>