Navigation

basic navigation bar for simple website. Responsive navigation is under its building process.

<nav class="flex space_between grid1">
  <p class="type4 mt2 strong">...</p>
 <ul class="regular mt2 grid2 flex space_between style_none">
  <li>...</li>
  <li>...</li>
  <li>...</li>
 </ul>
</nav>

Header

this is example header page of design source you can build even awesome form the design source design system

<header class="width6">
  <p class="type3 strong">...</p>
  <p class="regular mt2">...</p>
  <button class="margin_start3 mt2 mb2
  type6 btn_large btn_blue white round2 strong">...</button>
  <button class="margin_start3 mt2 mb2 
  type6 btn_large btn_shade round2 strong">...</button>
</header>

Table #

Table willbe as given code basic way the table style is under process will be updated in few updates although we will still use the same classes.

<table>
    <tr>
        <th >...</th>
        <th >...</th>
        <th >...</th>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td >...</td>
    </tr>
</table>

Profile Badge

there is no extra classes are used for the profile badge just used the width in pixels like style="width:70px;"

<div class="flex">
<div style="width:70px;">
  <img class="circular  border1 border_white"
  style="width:70px; height:70px;" src="...">
  </div>
</div>

Color Swatches

color swatches donot use extra classes or style

<div class="flex">
 <div class="p2 mr3
 circular bg_blue"></div>
</div>

Code

introduces the class .code to visualize the code and keyboard shortcuts or commands

Alert

Alerts are based in design source classes only

<div class="grid1 p2 mb3
 bg_shade border1 border_blue dark">
 <p class="regular strong mb3 
 blue">...</p>
 <p class="type6">...</p>
</div>

Price cards

Price cards are build with css classes of design system.

<div class="row justify_center align_center">   
<div  style="flex: 1;" class="m3 p2 flex align_center
column justify_center border1 round1 border_shade">
...
</div>
</div>