Fluent Design For Web Controls Styles Home




Surfaces


Window

Click On The Button Below To Open Window



 <>  

For Button: 

<button class="primary_yellow" onclick="openmod1();">Open Window</button>

------------------------------------------------------------------------------------

For Window: 

<div class="modal_container" id="mod1">
    <div class="modal_content zi3" id="modct1">
        <div class="dialogue_pane large12">
            <button class="primary_red right ta_center mod_close_btn" onclick="closemod1();">X</button>
        </div>
        <div class="page_container">
            <h2>This Is Some Content</h2>
        </div>
    </div>
</div>
                            


Side Panel

Click On The Button Below To Open Window



 <>  

For Button: 

<button class="primary_yellow" onclick="openside1();">Open Side Panel</button>

------------------------------------------------------------------------------------

For Side Panel: 

<div class="sidepanel_container" id="side1">
    <div class="sidepanel_content zi3 right" id="modct1">
        <button class="primary_red right ta_center mod_close_btn" onclick="closeside1();">X</button>
        <div class="page_container">
            <div class="large12 panel_item">Panel Item 1</div>
            <div class="large12 panel_item">Panel Item 2</div>
            <div class="large12 panel_item">Panel Item 3</div>
            <div class="large12 panel_item">Panel Item 4</div>
            <div class="large12 panel_item">Panel Item 5</div>
            <div class="large12 panel_item">Panel Item 6</div>
        </div>
    </div>
</div>
                            


Tooltip

Hover Over The Button Below To See What Action It Will Perform

When you hover over the button, you see me


 <>  

<div class="tooltip_container">
    <span class="tooltip_info">When you hover over the button, you see me</span>
    <button class="primary_yellow">Hover For Tooltip</button>
</div>

        


Dialogue Box

Click On The Button Below To Open Draggable Dialogue Box

This Is A Dialogue Box


 <>  
For Button: 

<button class="primary_yellow" onclick="opendialog1();">Open Dialogue Box</button>

------------------------------------------------------------------------------------

For Dialogue Box: 

<div class="dialogue_box" id="dialog1">
    <div class="dialogue_pane large12">
        <button class="primary_red right ta_center mod_close_btn" onclick="closedialog1();" >X</button>
    </div>
    <div class="dialogue_content large12">This Is A Dialogue Box</div>
</div>

        




Panel Item 1
Panel Item 2
Panel Item 3
Panel Item 4
Panel Item 5
Panel Item 6