hidden tests.

Voorbeeld

Paragraaf

Visueel voorbeeld

HTML-voorbeeld

                    
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

div

Visueel voorbeeld

HTML-voorbeeld

                    
<div class="hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

buttons

Visueel voorbeeld

Button states:

Input type = button states:

Link <a> as a button states:

Submit-button <button type="submit"> states:

Input type = submit <input type="submit">:

Input type = submit <input type="submit">:

Button reset <button type="reset">:

Input type = reset <input type="reset">:

Secundaire button-variant

Button states:

Input type = button states:

Link <a> as a button:

Submit-button <button type="submit">:

Input type = submit <input type="submit">:

Button reset <button type="reset">:

Input type = reset <input type="reset">:

Different types of buttons

Call to action button-variant

Button states:

Input type = button states:

Link <a> as a button:

Submit-button <button type="submit">:

Input type = submit <input type="submit">:

Button reset <button type="reset">:

Input type = reset <input type="reset">:

HTML-voorbeeld

                    
<div class="button-container">
    <button class="hidden">Button primary</button>
    <button class="hidden" disabled>Button disabled</button>
    <button class="hover hidden">Button hover</button>
    <button class="focus hidden">Button focus</button>
    <button class="active hidden">Button active/on mouse down</button>
    <button class="primary selected hidden">Button selected</button>
    <button class="icon icon-close hidden">Icon button</button>
    <button class="hidden"><span class="icon icon-close hidden"></span>Icon with text button</button>
</div>

<h4>Input type = button states:</h4>
<div class="button-container">
    <input type="button" value="Button primary" class="hidden">
    <input type="button" value="Button disabled" disabled class="hidden">
    <input type="button" value="Button hover" class="hover hidden">
    <input type="button" value="Button focus" class="focus hidden">
    <input type="button" value="Button active/on mouse down" class="active hidden">
    <input type="button" value="Button selected" class="selected hidden">
</div>

<h4>Link <a> as a button states:</h4>
<div class="button-container">
    <a href="" class="button hidden">Button primary</a>
    <a href="" class="button disabled hidden">Button disabled</a>
    <a href="" class="button hover hidden">Button hover</a>
    <a href="" class="button focus hidden">Button focus</a>
    <a href="" class="button active hidden">Button active/on mouse down</a>
    <a href="" class="button selected hidden">Button selected</a>
    <a href="" class="button icon icon-close hidden">Icon button</a>
    <a href="" class="button hidden"><span class="icon icon-close"></span>Icon with text button</a>
</div>

<h4>Submit-button <button type="submit"> states:</h4>
<div class="button-container">
    <button type="submit" class="hidden">Button primary</button>
    <button type="submit" disabled class="hidden">Button disabled</button>
    <button type="submit" class="hover hidden">Button hover</button>
    <button type="submit" class="focus hidden">Button focus</button>
    <button type="submit" class="active hidden">Button active/on mouse down</button>
    <button type="submit" class="selected hidden">Button selected</button>
    <button type="submit" class="icon icon-close hidden">Icon button</button>
    <button type="submit" class="hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" value="Input" class="hidden">
    <input type="submit" value="Input disabled" disabled class="hidden">
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" value="Input" class="hidden">
    <input type="submit" value="Input disabled" class="hidden" disabled>
    <input type="submit" class="hover hidden" value="Input hover">
    <input type="submit" class="focus hidden" value="Input focus">
    <input type="submit" class="active hidden" value="Input active">
    <input type="submit" class="selected hidden" value="Input selected">
</div>

<h4>Button reset <button type="reset">:</h4>
<div class="button-container">
    <button type="reset" class="hidden">Button primary</button>
    <button type="reset" class="hidden" disabled>Button disabled</button>
    <button type="reset" class="hover hidden">Button hover</button>
    <button type="reset" class="focus hidden">Button focus</button>
    <button type="reset" class="active hidden">Button active/on mouse down</button>
    <button type="reset" class="selected hidden">Button selected</button>
    <button type="reset" class="icon icon-close hidden">Icon button</button>
    <button type="reset" class="hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = reset <input type="reset">:</h4>
<div class="button-container">
    <input type="reset" value="Input" class="hidden">
    <input type="reset" value="Input disabled" class="hidden" disabled>
    <input type="reset" class="hover hidden" value="Input hover">
    <input type="reset" class="focus hidden" value="Input focus">
    <input type="reset" class="active hidden" value="Input active">
    <input type="reset" class="selected hidden" value="Input selected">
</div>

<h3>Secundaire button-variant</h3>
<button  class="ghost hidden">Lorem ipsum</button>
<h4>Button states:</h4>
<div class="button-container">
    <button class="ghost hidden">Button ghost</button>
    <button class="ghost hidden" disabled>Button disabled</button>
    <button class="ghost hover hidden">Button hover</button>
    <button class="ghost focus hidden">Button focus</button>
    <button class="ghost active hidden">Button active/on mouse down</button>
    <button class="ghost selected hidden">Button selected</button>
    <button class="ghost icon icon-close hidden">Icon button</button>
    <button class="ghost hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = button states:</h4>
<div class="button-container">
    <input type="button" value="Button primary" class="button ghost hidden">
    <input type="button" value="Button disabled" class="button ghost hidden" disabled>
    <input type="button" value="Button hover" class="button ghost hover hidden">
    <input type="button" value="Button focus" class="button ghost focus hidden">
    <input type="button" value="Button active/on mouse down" class="button ghost active hidden">
    <input type="button" value="Button selected" class="button ghost selected hidden">
</div>

<h4>Link <a> as a button:</h4>
<div class="button-container">
    <a href="#" class="button ghost hidden">Button primary</a>
    <a href="#" class="button ghost disabled hidden">Button disabled</a>
    <a href="#" class="button ghost hover hidden">Button hover</a>
    <a href="#" class="button ghost focus hidden">Button focus</a>
    <a href="#" class="button ghost active hidden">Button active/on mouse down</a>
    <a href="#" class="button ghost selected hidden">Button selected</a>
    <a href="#" class="button ghost icon icon-close hidden">Icon button</a>
    <a href="#" class="button ghost hidden"><span class="icon icon-close"></span>Icon with text button</a>
</div>

<h4>Submit-button <button type="submit">:</h4>
<div class="button-container">
    <button type="submit" class="ghost hidden">Button primary</button>
    <button type="submit" class="ghost hidden" disabled>Button disabled</button>
    <button type="submit" class="ghost hover hidden">Button hover</button>
    <button type="submit" class="ghost focus hidden">Button focus</button>
    <button type="submit" class="ghost active hidden">Button active/on mouse down</button>
    <button type="submit" class="ghost selected hidden">Button selected</button>
    <button type="submit" class="ghost icon icon-close hidden">Icon button</button>
    <button type="submit" class="ghost hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" class="ghost hidden" value="Input">
    <input type="submit" class="ghost hidden" value="Input disabled" disabled>
    <input type="submit" class="ghost hover hidden" value="Input hover">
    <input type="submit" class="ghost focus hidden" value="Input focus">
    <input type="submit" class="ghost active hidden" value="Input active">
    <input type="submit" class="ghost selected hidden" value="Input selected">
</div>

<h4>Button reset <button type="reset">:</h4>
<div class="button-container">
    <button type="reset" class="ghost hidden">Button ghost</button>
    <button type="reset" class="ghost hidden" disabled>Button disabled</button>
    <button type="reset" class="ghost hover hidden">Button hover</button>
    <button type="reset" class="ghost focus hidden">Button focus</button>
    <button type="reset" class="ghost active hidden">Button active/on mouse down</button>
    <button type="reset" class="ghost selected hidden">Button selected</button>
    <button type="reset" class="ghost icon icon-close hidden">Icon button</button>
    <button type="reset" class="ghost hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = reset <input type="reset">:</h4>
<div class="button-container">
    <input type="reset" class="ghost hidden" value="Input">
    <input type="reset" class="ghost hidden" value="Input disabled" disabled>
    <input type="reset" class="ghost hover hidden" value="Input hover">
    <input type="reset" class="ghost focus hidden" value="Input focus">
    <input type="reset" class="ghost active hidden" value="Input active">
    <input type="reset" class="ghost selected hidden" value="Input selected">
</div>

<h4>Different types of buttons</h4>
<div class="button-container">
    <button class="hidden">Lorem ipsum</button>
    <input type="button" value="Lorem ipsum" class="hidden">
    <a href="#" class="button hidden">Lorem ipsum</a>
    <button type="submit" class="hidden">Lorem ipsum</button>
    <input type="submit" value="Input" class="hidden">
    <button type="reset" class="hidden">Button primary</button>
    <input type="reset" value="Input" class="hidden">
</div>

<h3>Call to action button-variant</h3>
<button  class="cta hidden">Lorem ipsum</button>
<h4>Button states:</h4>
<div class="button-container">
    <button class="cta hidden">Button cta</button>
    <button class="cta hidden" disabled>Button disabled</button>
    <button class="cta hover hidden">Button hover</button>
    <button class="cta focus hidden">Button focus</button>
    <button class="cta active hidden">Button active/on mouse down</button>
    <button class="cta selected hidden">Button selected</button>
    <button class="cta icon icon-close hidden">Icon button</button>
    <button class="cta hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = button states:</h4>
<div class="button-container">
    <input type="button" value="Button primary" class="button cta hidden">
    <input type="button" value="Button disabled" class="button cta hidden" disabled>
    <input type="button" value="Button hover" class="button cta hover hidden">
    <input type="button" value="Button focus" class="button cta focus hidden">
    <input type="button" value="Button active/on mouse down" class="button cta active hidden">
    <input type="button" value="Button selected" class="button cta selected hidden">
</div>

<h4>Link <a> as a button:</h4>
<div class="button-container">
    <a href="#" class="button cta hidden">Button primary</a>
    <a href="#" class="button cta disabled hidden">Button disabled</a>
    <a href="#" class="button cta hover hidden">Button hover</a>
    <a href="#" class="button cta focus hidden">Button focus</a>
    <a href="#" class="button cta active hidden">Button active/on mouse down</a>
    <a href="#" class="button cta selected hidden">Button selected</a>
    <a href="#" class="button cta icon icon-close hidden">Icon button</a>
    <a href="#" class="button cta hidden"><span class="icon icon-close"></span>Icon with text button</a>
</div>

<h4>Submit-button <button type="submit">:</h4>
<div class="button-container">
    <button type="submit" class="cta hidden">Button primary</button>
    <button type="submit" class="cta hidden" disabled>Button disabled</button>
    <button type="submit" class="cta hover hidden">Button hover</button>
    <button type="submit" class="cta focus hidden">Button focus</button>
    <button type="submit" class="cta active hidden">Button active/on mouse down</button>
    <button type="submit" class="cta selected hidden">Button selected</button>
    <button type="submit" class="cta icon icon-close hidden">Icon button</button>
    <button type="submit" class="cta hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = submit <input type="submit">:</h4>
<div class="button-container">
    <input type="submit" class="cta hidden" value="Input">
    <input type="submit" class="cta hidden" value="Input disabled" disabled>
    <input type="submit" class="cta hover hidden" value="Input hover">
    <input type="submit" class="cta focus hidden" value="Input focus">
    <input type="submit" class="cta active hidden" value="Input active">
    <input type="submit" class="cta selected hidden" value="Input selected">
</div>

<h4>Button reset <button type="reset">:</h4>
<div class="button-container">
    <button type="reset" class="cta hidden">Button cta</button>
    <button type="reset" class="cta hidden" disabled>Button disabled</button>
    <button type="reset" class="cta hover hidden">Button hover</button>
    <button type="reset" class="cta focus hidden">Button focus</button>
    <button type="reset" class="cta active hidden">Button active/on mouse down</button>
    <button type="reset" class="cta selected hidden">Button selected</button>
    <button type="reset" class="cta icon icon-close hidden">Icon button</button>
    <button type="reset" class="cta hidden"><span class="icon icon-close"></span>Icon with text button</button>
</div>

<h4>Input type = reset <input type="reset">:</h4>
<div class="button-container">
    <input type="reset" class="cta hidden" value="Input">
    <input type="reset" class="cta hidden" value="Input disabled" disabled>
    <input type="reset" class="cta hover hidden" value="Input hover">
    <input type="reset" class="cta focus hidden" value="Input focus">
    <input type="reset" class="cta active hidden" value="Input active">
    <input type="reset" class="cta selected hidden" value="Input selected">
</div>
Terug naar het hoofdmenu