A CSS framework for recreating Windows 7 UI

https://khang-nd.github.io/7.css/

A design system for building faithful recreations of old UIs.

npm npm bundle size

Intro

7.css is a CSS framework for building interface components that look like Windows 7. It is built on top of the GUI backbone of XP.css, which is an extension of 98.css.

This framework relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Tabs rely on the role="tab" attribute. This page will guide you through that process, but accessibility is a primary goal of this project.

You can override many of the styles of your elements while maintaining the appearance provided by this framework. Need more padding on your buttons? Go for it. Need to add some color to your input labels? Be our guest.

This framework does not contain any JavaScript, it merely styles your HTML with some CSS. This means 7.css is compatible with your frontend framework of choice.

Installation / Usage

The fastest way to use 7.css is to import it from unpkg.

<link rel="stylesheet" href="https://unpkg.com/7.css">

You can also install 7.css from npm.

Installation

npm install 7.css

Usage

import "7.css/dist/7.css";

Scoping

In case you need 7.css to coexist with another CSS/styling framework, you may use the 7.scoped.css stylesheet instead to scope the styling within a win7 class.

unpkg:

https://unpkg.com/7.css/dist/7.scoped.css

or npm:

import "7.css/dist/7.scoped.css"

Then in your code, wrap the component with .win7:

Show code
<div class="win7">
  <button>A Win7-styled button</button>
</div>

Also note that using the scoped stylesheet will eliminate the scrollbar styling as well.

Tree-shaking

In case you only need the styling of certain components rather than the complete stylesheet as a whole, you may import them separately as below:

unpkg:

https://unpkg.com/7.css/dist/gui/buttons.css
https://unpkg.com/7.css/dist/gui/tabs.css

or npm:

import "7.css/dist/gui/buttons.css"
import "7.css/dist/gui/tabs.css"

For more components, see the published gui folder.

Components

Balloon

A balloon is a small pop-up window that informs users of a non-critical problem or special condition in a control.

A balloon or tooltip can be created using the role="tooltip" attribute.

A balloon is better known as tooltip in web development.

Show code
<div role="tooltip">A balloon is better known as tooltip in web development.</div>

A control may bind to a balloon with the aria-describedby attribute. You will need to set up an event for the control to trigger the balloon.

Press Backspace to dismiss

Show code
<input type="text" placeholder="Press Enter" aria-describedby="balloon-password" />
<div role="tooltip" id="balloon-password" hidden>Press Backspace to dismiss</div>

To change the position of the balloon, which subsequently change the placement of its tail, combine the respective vertical and horizontal classes:

  • Vertical: .is-top / .is-bottom
  • Horizontal: .is-left / .is-right

This balloon is positioned bottom right of the source control (default behavior).

This balloon is positioned bottom left of the source control.

This balloon is positioned top left of the source control.

This balloon is positioned top right of the source control.

Show code
<div role="tooltip">This balloon is positioned bottom right of the source control (default behavior).</div>
<div role="tooltip" class="is-bottom is-left">This balloon is positioned bottom left of the source control.</div>
<div role="tooltip" class="is-top is-left">This balloon is positioned top left of the source control.</div>
<div role="tooltip" class="is-top is-right">This balloon is positioned top right of the source control.</div>

Button

A command button, also referred to as a push button, is a control that causes the application to perform some action when the user clicks it.

A standard button measures 75px wide and 23px tall with 12px of horizontal padding by default. They are styled with 2 shades of gray as a vertical gradient.

Show code
<button>Click me</button>

When buttons are clicked, the gray gradient is shifted to corresponding sky blues. The following button is simulated to be in the pressed (active) state.

Show code
<button>I am being pressed</button>

Disabled buttons have solid background and lighter border.

Show code
<button disabled>I cannot be clicked</button>

Button focus is communicated with a dotted border, set 4px within the contents of the button. The following example is simulated to be focused.

Show code
<button>I am focused</button>

A default button (in Windows, hitting the Enter key in a dialog context triggers the button) has a greenish-blue border and a light blue gradient shade.

Show code
<button class="default">I am the one!</button>

CheckBox

A check box represents an independent or non-exclusive choice.

Checkboxes are represented with a sunken panel, populated with a "check" icon when selected, next to a label indicating the choice.

Note: You must include a corresponding label after your checkbox, using the <label> element with a for attribute pointed at the id of your input. This ensures the checkbox is easy to use with assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, being able to click the entire label to select the box).

Show code
<input type="checkbox" id="example1">
<label for="example1">This is a checkbox</label>

Checkboxes can be selected and disabled with the standard checked and disabled attributes.

When grouping inputs, wrap each input in a container with the field-row class. This ensures a consistent spacing between inputs.

Show code
<div class="field-row">
  <input checked type="checkbox" id="example2">
  <label for="example2">I am checked</label>
</div>
<div class="field-row">
  <input disabled type="checkbox" id="example3">
  <label for="example3">I am inactive</label>
</div>
<div class="field-row">
  <input checked disabled type="checkbox" id="example4">
  <label for="example4">I am inactive but still checked</label>
</div>

Collapse

Users can show or hide additional information including data, options, or commands.

A collapsible section can be created using the elements details and summary.

Expand me to see something interesting

🎉 Tadah!

Show code
<details>
  <summary>Expand me to see something interesting</summary>
  <p>🎉 Tadah!</p>
</details>

Add an open attribute to expand the content by default.

I open myself willingly
  • This is my family
  • This is my house
  • This is my car
Show code
<details open>
  <summary>I open myself willingly</summary>
  <ul>
    <li>This is my family</li>
    <li>This is my house</li>
    <li>This is my car</li>
  </ul>
</details>

Combobox

A combo box is a combination of a standard list box or a drop-down list and an editable text box, thus allowing users to enter a value that isn't in the list.

To render a combo box, use a text input, a button, a parent ul, and children li together, wrapped inside a container element with the combobox class. For accessibility, follow the minimum requirements as below:

  • Add a role="combobox" attribute to the text input
  • Add a role="listbox" attribute to the ul
  • Add a role="option" attribute to each li
  • Specify the relationship between the list box and the text box by combining the id of the listbox with the aria-owns attribute on the text input
  • Facebook
  • Amazon
  • Apple
  • Netflix
  • Google
Show code
<div class="combobox">
  <input type="text" role="combobox" aria-owns="company" />
  <button></button>
  <ul role="listbox" id="company">
    <li role="option">Facebook</li>
    <li role="option">Amazon</li>
    <li role="option">Apple</li>
    <li role="option">Netflix</li>
    <li role="option">Google</li>
  </ul>
</div>

For more options of the list box, see the ListBox section.

A drop-down list box allows the selection of only a single item from a list. In its closed state, the control displays the current value for the control. The user opens the list to change the value.

Dropdowns can be rendered by using the select and option elements.

Show code
<select>
  <option>5 - Incredible!</option>
  <option>4 - Great!</option>
  <option>3 - Pretty good</option>
  <option>2 - Not so great</option>
  <option>1 - Unfortunate</option>
</select>

By default, the first option will be selected. You can change this by giving one of your option elements the selected attribute.

Show code
<select>
  <option>5 - Incredible!</option>
  <option>4 - Great!</option>
  <option selected>3 - Pretty good</option>
  <option>2 - Not so great</option>
  <option>1 - Unfortunate</option>
</select>

GroupBox

A group box is a special control you can use to organize a set of controls. A group box is a rectangular frame with an optional label that surrounds a set of controls.

A group box can be used by wrapping your elements with the fieldset tag. It contains a sunken outer border and a raised inner border, resembling an engraved box around your controls.

Show code
<fieldset>
  <div class="field-row">Select one:</div>
  <div class="field-row">
    <input id="radio5" type="radio" name="fieldset-example">
    <label for="radio5">Diners</label>
  </div>
  <div class="field-row">
    <input id="radio6" type="radio" name="fieldset-example">
    <label for="radio6">Drive-Ins</label>
  </div>
  <div class="field-row">
    <input id="radio7" type="radio" name="fieldset-example">
    <label for="radio7">Dives</label>
  </div>
</fieldset>

You can provide your group with a label by placing a legend element within the fieldset.

Show code
<fieldset>
  <legend>Today's mood</legend>
  <div class="field-row">
    <input id="radio8" type="radio" name="fieldset-example2">
    <label for="radio8">Claire Saffitz</label>
  </div>
  <div class="field-row">
    <input id="radio9" type="radio" name="fieldset-example2">
    <label for="radio9">Brad Leone</label>
  </div>
  <div class="field-row">
    <input id="radio10" type="radio" name="fieldset-example2">
    <label for="radio10">Chris Morocco</label>
  </div>
  <div class="field-row">
    <input id="radio11" type="radio" name="fieldset-example2">
    <label for="radio11">Carla Lalli Music</label>
  </div>
</fieldset>

ListBox

With a list box, users can select from a set of values presented in a list that is always visible.

There are 2 ways you can render a list box. The simple one is using the select element with a multiple attribute specified.

Show code
<select multiple>
  <option>5 - Incredible!</option>
  <option selected>4 - Great!</option>
  <option>3 - Pretty good</option>
  <option>2 - Not so great</option>
  <option>1 - Unfortunate</option>
</select>

The complex one is using a combination of the ul/li elements with the role attributes.

  • Facebook
  • Amazon
  • Apple
  • Netflix
  • Google
Show code
<ul role="listbox">
  <li role="option">Facebook</li>
  <li role="option" aria-selected="true">Amazon</li>
  <li role="option">Apple</li>
  <li role="option">Netflix</li>
  <li role="option">Google</li>
</ul>

The latter offers more flexibility over using a mere select element. Choose the one that is more appropriate depending on your context or use case.

To add a drop shadow to the list box, use the has-shadow class. To add a hovering style on the list box items (using role attribute only), use the has-hover class.

  • Facebook
  • Amazon
  • Apple
  • Netflix
  • Google
Show code
<ul role="listbox" class="has-shadow has-hover">
  <li role="option">Facebook</li>
  <li role="option">Amazon</li>
  <li role="option">Apple</li>
  <li role="option">Netflix</li>
  <li role="option">Google</li>
</ul>

The following components compose a complete navigation menu, also known as Navbar.

Menus are hierarchical lists of commands or options available to users in the current context.

A menu can be rendered using a composition of a parent ul and child items li, role="menu" and role="menuitem" attributes must be specified on the ul and li respectively.

If a menu item has a submenu, add an aria-haspopup="true" attribute to it to render a caret indicator.

To make the menu focusable, specify the tabindex attributes on the items. Alternatively, you can use an a to achieve the same.

Show code
<ul role="menu" style="width: 200px">
  <li role="menuitem" tabindex="0" aria-haspopup="true">View</li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    Sort by
    <ul role="menu">
      <li role="menuitem"><a href="#menu">Name</a></li>
      <li role="menuitem"><a href="#menu">Size</a></li>
      <li role="menuitem"><a href="#menu">Item type</a></li>
      <li role="menuitem"><a href="#menu">Date modified</a></li>
    </ul>
  </li>
  <li role="menuitem"><a href="#menu">Refresh</a></li>
  <li role="menuitem"><a href="#menu">Paste</a></li>
  <li role="menuitem"><a href="#menu">Paste shortcut</a></li>
  <li role="menuitem"><a href="#menu">Screen resolution</a></li>
  <li role="menuitem"><a href="#menu">Gadgets</a></li>
  <li role="menuitem"><a href="#menu">Personalize</a></li>
</ul>

By default, the submenu is only shown when the linked item is focused/clicked. To add the hovering/mouse-over trigger, you can add a can-hover class to the root container.

Use a has-divider class to make a horizontal line after the menu item. Disable a menu item by placing an aria-disabled attribute on it.

You may associate a menu item with an icon by using the img element. (Icons provided by Icons8)

Show code
<ul role="menu" class="can-hover" style="width: 200px">
  <li role="menuitem" tabindex="0" aria-haspopup="true">View</li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    Sort by
    <ul role="menu">
      <li role="menuitem"><a href="#menu">Name</a></li>
      <li role="menuitem"><a href="#menu">Size</a></li>
      <li role="menuitem"><a href="#menu">Item type</a></li>
      <li role="menuitem"><a href="#menu">Date modified</a></li>
    </ul>
  </li>
  <li role="menuitem" class="has-divider"><a href="#menu">Refresh</a></li>
  <li role="menuitem" aria-disabled="true"><a href="#menu">Paste</a></li>
  <li role="menuitem" aria-disabled="true" class="has-divider">
    <a href="#menu">Paste shortcut</a>
  </li>
  <li role="menuitem">
    <img src="https://img.icons8.com/color/18/000000/monitor--v1.png"/>
    <a href="#menu">Screen resolution</a>
  </li>
  <li role="menuitem">
    <img src="https://img.icons8.com/color/18/000000/virtual-machine2.png"/>
    <a href="#menu">Gadgets</a>
  </li>
  <li role="menuitem">
    <img src="https://img.icons8.com/color/18/000000/remote-desktop.png"/>
    <a href="#menu">Personalize</a>
  </li>
</ul>

To render menu items that are options with bullets and checkmarks, use the corresponding input type (radio or checkbox).

Show code
<ul role="menu" style="width: 200px">
  <li role="menuitem">
    <input type="radio" name="icon-size" id="example12">
    <label for="example12">Large icons</label>
  </li>
  <li role="menuitem">
    <input type="radio" name="icon-size" id="example13" checked>
    <label for="example13">Medium icons</label>
  </li>
  <li role="menuitem" class="has-divider">
    <input type="radio" name="icon-size" id="example14">
    <label for="example14">Small icons</label>
  </li>
  <li role="menuitem">
    <input type="checkbox" id="example15">
    <label for="example15">Auto arrange icons</label>
  </li>
  <li role="menuitem">
    <input type="checkbox" id="example16" checked>
    <label for="example16">Align icons to grid</label>
  </li>
</ul>
A menu bar is a list of labeled menu categories typically located near the top of a window.

A menu bar can be created in a similar manner to the menu, however, use a role="menubar" attribute in place of role="menu".

Show code
<ul role="menubar">
  <li role="menuitem" tabindex="0">File</li>
  <li role="menuitem" tabindex="0">Edit</li>
  <li role="menuitem" tabindex="0">View</li>
  <li role="menuitem" tabindex="0">Help</li>
</ul>

Combining it with the Menu component, we will have a complete menu bar with the associated menu dropdowns.

To accommodate an extra piece of info for a menu item (like a shortcut mnemonic) on the right side, nest it with an span element.

Show code
<ul role="menubar" class="can-hover">
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    File
    <ul role="menu">
      <li role="menuitem">
        <a href="#menubar">
          Open <span>Ctrl+O</span>
        </a>
      </li>
      <li role="menuitem">
        <a href="#menubar">
          Save <span>Ctrl+S</span>
        </a>
      </li>
      <li role="menuitem" class="has-divider">
        <a href="#menubar">
          Save As... <span>Ctrl+Shift+S</span>
        </a>
      </li>
      <li role="menuitem"><a href="#menubar">Exit</a></li>
    </ul>
  </li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    Edit
    <ul role="menu">
      <li role="menuitem"><a href="#menubar">Undo</a></li>
      <li role="menuitem"><a href="#menubar">Copy</a></li>
      <li role="menuitem"><a href="#menubar">Cut</a></li>
      <li role="menuitem" class="has-divider"><a href="#menubar">Paste</a></li>
      <li role="menuitem"><a href="#menubar">Delete</a></li>
      <li role="menuitem"><a href="#menubar">Find...</a></li>
      <li role="menuitem"><a href="#menubar">Replace...</a></li>
      <li role="menuitem"><a href="#menubar">Go to...</a></li>
    </ul>
  </li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    View
    <ul role="menu">
      <li role="menuitem" tabindex="0" aria-haspopup="true">
        Zoom
        <ul role="menu">
          <li role="menuitem"><button>Zoom In</button></li>
          <li role="menuitem"><button>Zoom Out</button></li>
        </ul>
      </li>
      <li role="menuitem"><a href="#menubar">Status Bar</a></li>
    </ul>
  </li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    Help
    <ul role="menu">
      <li role="menuitem"><a href="#menubar">View Help</a></li>
      <li role="menuitem"><a href="#menubar">About</a></li>
    </ul>
  </li>
</ul>

OptionButton

An option button, also referred to as a radio button, represents a single choice within a limited set of mutually exclusive choices. That is, the user can choose only one set of options.

Option buttons can be used via the radio type on an input element.

Option buttons can be grouped by specifying a shared name attribute on each input. Just as before: when grouping inputs, wrap each input in a container with the field-row class to ensure a consistent spacing between inputs.

Show code
<div class="field-row">
  <input id="radio17" type="radio" name="first-example">
  <label for="radio17">Yes</label>
</div>
<div class="field-row">
  <input id="radio18" type="radio" name="first-example">
  <label for="radio18">No</label>
</div>

Option buttons can also be checked and disabled with their corresponding HTML attributes.

Show code
<div class="field-row">
  <input id="radio19" type="radio" name="second-example">
  <label for="radio19">Peanut butter should be smooth</label>
</div>
<div class="field-row">
  <input checked disabled id="radio20" type="radio" name="second-example">
  <label for="radio20">I understand why people like crunchy peanut butter</label>
</div>
<div class="field-row">
  <input disabled id="radio21" type="radio" name="second-example">
  <label for="radio21">Crunchy peanut butter is good</label>
</div>

ProgressBar

A common control that displays the progress of a particular operation as a graphical bar.

Progress bars can be created with a div using role="progressbar", and another nested div is required to make the inner bar.

Specify the width of the inner bar to indicate the progress.

For accessibility, you might want to specify the respective aria-* attributes. Refer to MDN for more information.

Show code
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
  <div style="width: 80%"></div>
</div>

To indicate the progress bar in paused state, add a paused class.

Show code
<div role="progressbar" class="paused">
  <div style="width: 50%"></div>
</div>

To indicate the progress bar in error state, add an error class.

Show code
<div role="progressbar" class="error">
  <div style="width: 30%"></div>
</div>

To animate the progress bar, add an animate class.

Show code
<div role="progressbar" class="animate">
  <div style="width: 60%"></div>
</div>

To create an indeterminate progress bar, add a marquee class and remove the nested div.

Show code
<div role="progressbar" class="marquee"></div>

Scrollbar

A control that allows users to scroll the content of a window, either vertically or horizontally.

To override the browser scrollbar's system styling for a particular section, add a has-scrollbar class to the container element.

Note that this only works with WebKit-based browsers.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae, scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut. Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend. Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit. Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae, scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut. Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend. Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit. Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.

Show code
<div class="has-scrollbar" style="width: 300px; height: 150px; overflow: auto">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,
  scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.
  Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.
  Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.
  Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,
  scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.
  Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.
  Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.
  Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.
</div>
With a Search box, users can quickly locate specific objects or text within a large set of data by filtering or highlighting matches.

There are 2 variants of the search box available.

An instant search, where the results are displayed immediately as the user types, can be rendered just by specifying a type="search" attribute on an input element:

Show code
<input type="search" placeholder="Search" />

A regular search, where a search is performed when the user clicks the search button, requires a search input and a button wrapped inside a container a container element with the class searchbox.

Show code
<div class="searchbox">
  <input type="search" placeholder="Search" />
  <button aria-label="search"></button>
</div>

Slider

A slider, sometimes called a trackbar control, consists of a bar that defines the extent or range of the adjustment and an indicator that shows the current value for the control...

Sliders can rendered by specifying a range type on an input element.

Show code
<div class="field-row" style="max-width: 300px">
  <label>Volume:</label>
  <label>Low</label>
  <input type="range" min="1" max="11" value="5" />
  <label>High</label>
</div>

You can make use of the has-box-indicator class replace the default indicator with a box indicator, furthermore the slider can be wrapped with a div using is-vertical to display the input vertically.

Note: To change the length of a vertical slider, the input width and div height.

Show code
<div class="field-row">
  <label>Cowbell</label>
  <div class="is-vertical">
    <input class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" />
  </div>
</div>

Spinner

A spinner or loader, also referred as ProgressRing, is a type of progress control to indicate that an operation is underway and its completion time is unknown.

To render a spinner element, use either a spinner or a loader class. To animate the spinner, add an animate class.

For accessibility, we use an aria-label attribute with a desired text to inform assistive technologies about the presence of the spinner.

Show code
<span class="spinner" aria-label="Spinning"></span>
<span class="loader" aria-label="Loading"></span>
<span class="loader animate" aria-label="Processing your request"></span>

Tabs

Tabs provide a way to present related information on separate labeled pages.

Creating tabs

To create a tab, use a menu element with role="tablist". Then for the tab titles, use a button with role="tab", and set the aria-controls attribute to the corresponding id of the element with role="tabpanel".

Read more at MDN Web docs - ARIA: tab role

More...

This tab contains a GroupBox

Disabling tabs

Simply add a disabled attribute on the tab.

Justified tabs

Add the justified class to the tablist menu to make the tabs, well, justified.

Disabled Tab

This tab is disabled, so you should not be able to read this.

Show code
<section class="tabs" style="max-width: 500px">
  <menu role="tablist" aria-label="Sample Tabs">
    <button role="tab" aria-controls="tab-A" aria-selected="true">Instruction</button>
    <button role="tab" aria-controls="tab-B">Example</button>
    <button role="tab" aria-controls="tab-C">More instruction</button>
    <button role="tab" aria-controls="tab-D" disabled>Disabled Tab</button>
  </menu>
  <!-- the tab content -->
  <article role="tabpanel" id="tab-A">
    <h3>Creating tabs</h3>
    <p>
      To create a tab, use a <code>menu</code> element with <code>role="tablist"</code>.
      Then for the tab titles, use a <code>button</code> with <code>role="tab"</code>, and set the <code>aria-controls</code> attribute to
      the corresponding id of the element with <code>role="tabpanel"</code>.
    </p>
    <p>
      Read more at <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role"
        target="_blank">MDN Web docs - ARIA: tab role</a>
    </p>
  </article>
  <article role="tabpanel" id="tab-B" hidden>
    <h3>More...</h3>
    <p>This tab contains a GroupBox</p>
    <fieldset>
      <legend>Today's mood</legend>
      <div class="field-row">
        <input id="radio22" type="radio" name="fieldset-example2">
        <label for="radio22">Claire Saffitz</label>
      </div>
      <div class="field-row">
        <input id="radio23" type="radio" name="fieldset-example2">
        <label for="radio23">Brad Leone</label>
      </div>
      <div class="field-row">
        <input id="radio24" type="radio" name="fieldset-example2">
        <label for="radio24">Chris Morocco</label>
      </div>
      <div class="field-row">
        <input id="radio25" type="radio" name="fieldset-example2">
        <label for="radio25">Carla Lalli Music</label>
      </div>
    </fieldset>
  </article>
  <article role="tabpanel" id="tab-C" hidden>
    <h3>Disabling tabs</h3>
    <p>Simply add a <code>disabled</code> attribute on the tab.</p>
    <h3>Justified tabs</h3>
    <p>Add the <code>justified</code> class to the <code>tablist</code> menu to make the tabs, well, justified.</p>
  </article>
  <article role="tabpanel" id="tab-D" hidden>
    <h3>Disabled Tab</h3>
    <p>This tab is disabled, so you should not be able to read this.</p>
  </article>
</section>

A simplified template is as below:

Tab A is active
Tab B is active
Tab C is active
Tab D is inactive

Show code
<section class="tabs">
  <menu role="tablist" aria-label="Tabs Template">
    <button role="tab" aria-controls="tab-A" aria-selected="true">Tab A</button>
    <button role="tab" aria-controls="tab-B">Tab B</button>
    <button role="tab" aria-controls="tab-C">Tab C</button>
    <button role="tab" aria-controls="tab-D" disabled>Tab D</button>
  </menu>
  <article role="tabpanel" id="tab-A">Tab A is active</article>
  <article role="tabpanel" id="tab-B" hidden>Tab B is active</article>
  <article role="tabpanel" id="tab-C" hidden>Tab C is active</article>
  <article role="tabpanel" id="tab-D" hidden>Tab D is inactive</article>
</section>

TextBox

A text box (also referred to as an edit control) is a rectangular control where the user enters or edits text. It can be defined to support a single line or multiple lines of text.

Text boxes can rendered by specifying a text type on an input element. As with checkboxes and radio buttons, you should provide a corresponding label with a properly set for attribute, and wrap both in a container with the field-row class.

Show code
<div class="field-row">
  <label for="text26">Occupation</label>
  <input id="text26" type="text" />
</div>

Additionally, you can make use of the field-row-stacked class to position your label above the input instead of beside it.

Show code
<div class="field-row-stacked" style="width: 200px">
  <label for="text27">Address (Line 1)</label>
  <input id="text27" type="text" />
</div>
<div class="field-row-stacked" style="width: 200px">
  <label for="text28">Address (Line 2)</label>
  <input id="text28" type="text" />
</div>

To support multiple lines in the user's input, use the textarea element instead.

Show code
<div class="field-row-stacked" style="width: 200px">
  <label for="text29">Additional notes</label>
  <textarea id="text29" rows="8"></textarea>
</div>

TreeView

A tree view control is a special list box control that displays a set of objects as an indented outline based on their logical hierarchical relationship.

To render a tree view, use an ul element with the tree-view class. The children of this list (li elements), can contain whatever you'd like.

  • We can put
  • ✨ Whatever ✨
  • We want in here
Show code
<ul class="tree-view has-container">
  <li>We can put</li>
  <li><strong style="color: purple">✨ Whatever ✨</strong></li>
  <li>We want in here</li>
</ul>

To make this a tree, we can nest further ul elements (no class needed on these). This will provide them with indentation to illustrate the hierarchical relations of the tree.

To create collapsible sections, wrap child lists inside details elements.

  • Table of Contents
  • What is web development?
  • CSS
    • Selectors
    • Specificity
    • Properties
  • JavaScript
    • Avoid at all costs
    • Unless
      • Avoid
      • At
        • Avoid
        • At
        • All
        • Cost
      • All
      • Cost
  • HTML
  • Special Thanks
Show code
<ul class="tree-view has-container">
  <li>Table of Contents</li>
  <li>What is web development?</li>
  <li>
    CSS
    <ul>
      <li>Selectors</li>
      <li>Specificity</li>
      <li>Properties</li>
    </ul>
  </li>
  <li>
    <details open>
      <summary>JavaScript</summary>
      <ul>
        <li>Avoid at all costs</li>
        <li>
          <details>
            <summary>Unless</summary>
            <ul>
              <li>Avoid</li>
              <li>
                <details>
                  <summary>At</summary>
                  <ul>
                    <li>Avoid</li>
                    <li>At</li>
                    <li>All</li>
                    <li>Cost</li>
                  </ul>
                </details>
              </li>
              <li>All</li>
              <li>Cost</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
  <li>HTML</li>
  <li>Special Thanks</li>
</ul>

The has-connector class may be used to render a dotted border to illustrate the structure more clearly, and the has-collapse-button class to change the expand/collapse carets to buttons.

    JavaScript
    • Avoid at all costs
    • Unless
      • Avoid
      • At
        • Avoid
        • At
        • All
        • Cost
      • All
      • Cost
Show code
<ul class="tree-view has-collapse-button has-connector has-container">
  <details open>
    <summary>JavaScript</summary>
    <ul>
      <li>Avoid at all costs</li>
      <li>
        <details>
          <summary>Unless</summary>
          <ul>
            <li>Avoid</li>
            <li>
              <details>
                <summary>At</summary>
                <ul>
                  <li>Avoid</li>
                  <li>At</li>
                  <li>All</li>
                  <li>Cost</li>
                </ul>
              </details>
            </li>
            <li>All</li>
            <li>Cost</li>
          </ul>
        </details>
      </li>
    </ul>
  </details>
</ul>

Window

The following components illustrate how to build complete windows using 7.css.

Title Bar

At the top edge of the window, inside its border, is the title bar (also reffered to as the caption or caption bar), which extends across the width of the window. The title bar identifies the contents of the window.
Include command buttons associated with the common commands of the primary window in the title bar. These buttons act as shortcuts to specific window commands.

You can build a complete title bar by making use of three classes, title-bar, title-bar-text, and title-bar-controls.

Show code
<div class="title-bar">
  <div class="title-bar-text">A Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Close"></button>
  </div>
</div>

We make use of aria-label to render the Close button, to let assistive technologies know the intent of this button. You may also use "Minimize", "Maximize", "Restore" and "Help" like so:

Show code
<div class="title-bar">
  <div class="title-bar-text">A Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Minimize"></button>
    <button aria-label="Maximize"></button>
    <button aria-label="Close"></button>
  </div>
</div>
<br>
<div class="title-bar">
  <div class="title-bar-text">A maximized Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Minimize"></button>
    <button aria-label="Restore"></button>
    <button aria-label="Close"></button>
  </div>
</div>
<br>
<div class="title-bar">
  <div class="title-bar-text">A help Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Help"></button>
    <button aria-label="Close"></button>
  </div>
</div>

Alternatively, you can use the is-close, is-minimize, is-maximize, is-restore, is-help classes to target the respective controls for your styling preference.

To give our title bar a home, we wrap it in a window container. This provides a drop shadow to it. We can freely resize the window by specifying a width in the container style.

Show code
<div class="window" style="max-width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A complete window</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
</div>

Place an active class either on the window container or the title bar itself to enable the active styles for the controls.

Show code
<div class="window active" style="max-width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A complete window</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize" disabled></button>
      <button aria-label="Close"></button>
    </div>
  </div>
</div>

Window body

Every window has a boundary that defines its shape.

To draw the contents of the window, we use the window-body class under the title bar. You may use the has-space class to add some padding to the window body.

There's so much room for activities!

Show code
<div class="window active" style="max-width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A window with contents</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <p>There's so much room for activities!</p>
  </div>
</div>

Another window with contents

Set your listening preferences

You create the content for each tab by using an article tag.

Show code
<div class="window active" style="max-width: 400px">
  <div class="title-bar">
    <div class="title-bar-text">Another window with contents</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <menu role="tablist" aria-label="Window with Tabs">
      <button role="tab" aria-controls="music" aria-selected="true">Music</button>
      <button role="tab" aria-controls="dogs">Dogs</button>
      <button role="tab" aria-controls="food">Food</button>
    </menu>
    <article role="tabpanel" id="music">
      <p>Set your listening preferences</p>
      <fieldset>
        <legend>Today's mood</legend>
        <div class="field-row">
          <input id="radio30" type="radio" name="fieldset-example2">
          <label for="radio30">Nicki Minaj</label>
        </div>
        <div class="field-row">
          <input id="radio31" type="radio" name="fieldset-example2">
          <label for="radio31">Bell Towers</label>
        </div>
        <div class="field-row">
          <input id="radio32" type="radio" name="fieldset-example2">
          <label for="radio32">The Glamorous Monique</label>
        </div>
        <div class="field-row">
          <input id="radio33" type="radio" name="fieldset-example2">
          <label for="radio33">EN. V</label>
        </div>
      </fieldset>
      <section class="field-row">
        <button>Reset Alarm...</button>
        <label>Try this to get some attention</label>
      </section>
    </article>
    <article role="tabpanel" hidden id="dogs">
      <img style="width: 100%"
        src="data:image/jpeg;base64,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" />
    </article>
    <article role="tabpanel" hidden id="food">
      <p>
        You create the content for each tab by using an <code>article</code> tag.
      </p>
      <iframe width="100%" height="200" src="https://www.youtube.com/embed/TODJBQ0tnow" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </article>
    <section class="field-row" style="justify-content: flex-end">
      <button class="default">OK</button>
      <button>Cancel</button>
    </section>
  </div>
</div>

Status Bar

A status bar is a special area within a window, typically the bottom, that displays information about the current state of what is being viewed in the window or any other contextual information, such as keyboard state.

You can render a status bar with the status-bar class, and status-bar-field for every child text element.

A Window With A Status Bar

There are just so many possibilities:

  • A Task Manager
  • A Notepad
  • Or even a File Explorer!

Press F1 for help

Slide 1

CPU Usage: 14%

Show code
<div class="window" style="max-width: 320px">
  <div class="title-bar">
    <div class="title-bar-text">A Window With A Status Bar</div>
  </div>
  <div class="window-body has-space">
    <p> There are just so many possibilities:</p>
    <ul>
      <li>A Task Manager</li>
      <li>A Notepad</li>
      <li>Or even a File Explorer!</li>
    </ul>
  </div>
  <div class="status-bar">
    <p class="status-bar-field">Press F1 for help</p>
    <p class="status-bar-field">Slide 1</p>
    <p class="status-bar-field">CPU Usage: 14%</p>
  </div>
</div>

Glass frame & Color

The glass window frames are a striking new aspect of the Microsoft Windows aesthetic, aiming to be both attractive and lightweight. These translucent frames give windows an open, less intrusive appearance, helping users focus on content and functionality rather than the interface surrounding it.

You can produce this "striking aspect" of the window with a glass class. The window frame then becomes translucent, the background is blurred behind the window.

The background behind is blurred.

Show code
<div class="background">
  <div class="window glass active" style="max-width: 100%">
    <div class="title-bar">
      <div class="title-bar-text">A glass window frame</div>
      <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Close"></button>
      </div>
    </div>
    <div class="window-body has-space">
      <p>The background behind is blurred.</p>
    </div>
  </div>
</div>

If you want to override the default color of the window, you can redefine the --window-background-color variable as an inline value of the style attribute.

You can change the window color just as simple.

A glass violet window frame

And even the glass window frame as well.

Show code
<div class="window active" style="max-width: 100%; margin: 0 1.5em; --window-background-color: #805ba5;">
  <div class="title-bar">
    <div class="title-bar-text">A violet window frame</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <p>You can change the window color just as simple.</p>
  </div>
</div>
<div class="background">
  <div class="window glass active" style="max-width: 100%; --window-background-color: #805ba5;">
    <div class="title-bar">
      <div class="title-bar-text">A glass violet window frame</div>
      <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Close"></button>
      </div>
    </div>
    <div class="window-body has-space">
      <p>And even the glass window frame as well.</p>
    </div>
  </div>
</div>

Dialog Box

A dialog box is a secondary window that allows users to perform a command, asks users a question, or provides users with information or progress feedback.

Without JavaScript, a dialog box can be triggered by utilizing the URL fragment of an a element (denoted by the # sign), targeting a corresponding dialog box element with the matching id.

For accessibility, define the role="dialog" attribute on the element. Additionally, label the dialog using the aria-labelledby attribute, with the value pointing to the id of the title bar's text element.

Show code
<a href="#dialog-demo">Open Dialog</a>
<div class="window active is-bright" id="dialog-demo" role="dialog" aria-labelledby="dialog-title">
  <div class="title-bar">
    <div class="title-bar-text" id="dialog-title">Problem Diagnostics</div>
    <div class="title-bar-controls">
      <button aria-label="Close" onclick="history.back()"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <h2 class="instruction instruction-primary">Identifying your problem...</h2>
    <div role="progressbar" class="marquee"></div>
  </div>
  <footer style="text-align: right">
    <button onclick="history.back()">Cancel</button>
  </footer>
</div>

Issues, Contributing, etc.

7.css is MIT licensed. Refer to the GitHub issues page to report any issue in the code.

Started as a clone of XP.css, 7.css is a fun project I worked on in my free time to enhance my tech skills.

Consider starring this project if it is useful to you in some way or if you also share the love for Windows 7 with me ;)

{
"by": "nomdep",
"descendants": 9,
"id": 40219057,
"kids": [
40219312,
40219203,
40221272,
40219564,
40219438,
40219240,
40219204,
40221864,
40219353
],
"score": 39,
"time": 1714532319,
"title": "A CSS framework for recreating Windows 7 UI",
"type": "story",
"url": "https://khang-nd.github.io/7.css/"
}
{
"author": "© 2020 KhangND",
"date": null,
"description": "A design system for building faithful recreations of the Windows 7 UI.",
"image": "https://raw.githubusercontent.com/khang-nd/7.css/main/docs/window.png",
"logo": null,
"publisher": "A CSS framework for recreating Windows 7 UI",
"title": "7.css",
"url": "https://khang-nd.github.io/7.css"
}
{
"url": "https://khang-nd.github.io/7.css",
"title": "7.css",
"description": "A design system for building faithful recreations of old UIs. Intro 7.css is a CSS framework for building interface components that look like...",
"links": [
"https://khang-nd.github.io/7.css",
"https://khang-nd.github.io/7.css/"
],
"image": "https://raw.githubusercontent.com/khang-nd/7.css/main/docs/window.png",
"content": "<div>\n <hr />\n <p>A design system for building faithful recreations of old UIs.</p>\n <p>\n <a target=\"_blank\" href=\"http://npm.im/7.css\">\n <img alt=\"npm\" src=\"https://img.shields.io/npm/v/7.css\" />\n </a>\n <a target=\"_blank\" href=\"https://unpkg.com/7.css\">\n <img alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/7.css\" />\n </a>\n </p>\n <h2 id=\"intro\">Intro</h2>\n <p>\n 7.css is a CSS framework for building interface components that look like Windows 7.\n It is built on top of the GUI backbone of <a target=\"_blank\" href=\"https://github.com/botoxparty/XP.css\">XP.css</a>,\n which is an extension of <a target=\"_blank\" href=\"https://github.com/jdan/98.css\">98.css</a>.\n</p>\n<p>\n This framework relies on the usage of <strong>semantic HTML</strong>. To make a button, you'll need\n to use a <code>&lt;button&gt;</code>. Input elements require labels. Tabs rely on the <code>role=\"tab\"</code>\n attribute.\n This page will guide you through that process, but accessibility is a primary goal of this project.\n</p>\n<p>\n You can override many of the styles of your elements while maintaining the appearance provided by\n this framework. Need more padding on your buttons? Go for it. Need to add some color to your input labels?\n Be our guest.\n</p>\n<p>\n <strong>This framework does not contain any JavaScript</strong>, it merely styles your HTML with some CSS.\n This means 7.css is compatible with your frontend framework of choice.\n</p>\n <h2 id=\"install\">Installation / Usage</h2>\n <p>\n The fastest way to use 7.css is to import it from unpkg.\n</p>\n<pre>&lt;link rel=\"stylesheet\" href=\"https://unpkg.com/7.css\"&gt;</pre>\n<p>\n You can also install 7.css <a target=\"_blank\" href=\"https://www.npmjs.com/package/7.css\">from npm</a>.\n</p>\n<p><em>Installation</em></p>\n<pre>npm install 7.css</pre>\n<p><em>Usage</em></p>\n<pre>import \"7.css/dist/7.css\";</pre>\n<h3 id=\"scoping\">Scoping</h3>\n<p>In case you need 7.css to coexist with another CSS/styling framework, you may use the <code>7.scoped.css</code>\n stylesheet instead to scope the styling within a <code>win7</code> class.</p>\n<p>unpkg:</p>\n<pre>https://unpkg.com/7.css/dist/7.scoped.css</pre>\n<p>or npm:</p>\n<pre>import \"7.css/dist/7.scoped.css\"</pre>\n<p>Then in your code, wrap the component with <code>.win7</code>:</p>\n<div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"win7\"</span>&gt;</span>\n <span>&lt;<span>button</span>&gt;</span>A Win7-styled button<span>&lt;/<span>button</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n<p>Also note that using the scoped stylesheet will eliminate the scrollbar styling as well.</p>\n<h3 id=\"tree-shaking\">Tree-shaking</h3>\n<p>In case you only need the styling of certain components rather than\n the complete stylesheet as a whole, you may import them separately as below:</p>\n<p>unpkg:</p>\n<pre>\nhttps://unpkg.com/7.css/dist/gui/buttons.css\nhttps://unpkg.com/7.css/dist/gui/tabs.css</pre>\n<p>or npm:</p>\n<pre>\nimport \"7.css/dist/gui/buttons.css\"\nimport \"7.css/dist/gui/tabs.css\"</pre>\n<p>\n For more components, see <a target=\"_blank\" href=\"https://unpkg.com/browse/7.css/dist/gui/\">the published gui\n folder</a>.\n</p>\n <h2 id=\"components\">Components</h2>\n <section>\n <h3 id=\"balloon\">Balloon</h3>\n <div>\n <blockquote>\n A <em>balloon</em> is a small pop-up window that informs users\n of a non-critical problem or special condition in a control.\n </blockquote>\n <p>\n A balloon or tooltip can be created using the <code>role=\"tooltip\"</code> attribute.\n </p>\n <div>\n <div><p>A balloon is better known as tooltip in web development.</p></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>role</span>=<span>\"tooltip\"</span>&gt;</span>A balloon is better known as tooltip in web development.<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n A control may bind to a balloon with the <code>aria-describedby</code> attribute.\n You will need to set up an event for the control to trigger the balloon.\n </p>\n <div>\n <div><p>Press Backspace to dismiss</p></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>input</span> <span>type</span>=<span>\"text\"</span> <span>placeholder</span>=<span>\"Press Enter\"</span> <span>aria-describedby</span>=<span>\"balloon-password\"</span> /&gt;</span>\n<span>&lt;<span>div</span> <span>role</span>=<span>\"tooltip\"</span> <span>id</span>=<span>\"balloon-password\"</span> <span>hidden</span>&gt;</span>Press Backspace to dismiss<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To change the position of the balloon, which subsequently change the placement of its tail, combine\n the respective vertical and horizontal classes:\n </p><ul>\n <li>Vertical: <code>.is-top</code> / <code>.is-bottom</code></li>\n <li>Horizontal: <code>.is-left</code> / <code>.is-right</code></li>\n </ul>\n <div>\n <div><p>This balloon is positioned bottom right of the source control (default behavior).</p>\n<p>This balloon is positioned bottom left of the source control.</p>\n<p>This balloon is positioned top left of the source control.</p>\n<p>This balloon is positioned top right of the source control.</p></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>role</span>=<span>\"tooltip\"</span>&gt;</span>This balloon is positioned bottom right of the source control (default behavior).<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>role</span>=<span>\"tooltip\"</span> <span>class</span>=<span>\"is-bottom is-left\"</span>&gt;</span>This balloon is positioned bottom left of the source control.<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>role</span>=<span>\"tooltip\"</span> <span>class</span>=<span>\"is-top is-left\"</span>&gt;</span>This balloon is positioned top left of the source control.<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>role</span>=<span>\"tooltip\"</span> <span>class</span>=<span>\"is-top is-right\"</span>&gt;</span>This balloon is positioned top right of the source control.<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"button\">Button</h3>\n <div>\n <blockquote>\n A <em>command button</em>, also referred to as a push button, is a control\n that causes the application to perform some action when the user clicks it.\n </blockquote>\n <p>\n A standard button measures 75px wide and 23px tall with 12px of horizontal padding by default.\n They are styled with 2 shades of gray as a vertical gradient.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>button</span>&gt;</span>Click me<span>&lt;/<span>button</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n When buttons are clicked, the gray gradient is shifted to corresponding sky blues.\n The following button is simulated to be in the pressed (active) state.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>button</span>&gt;</span>I am being pressed<span>&lt;/<span>button</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Disabled buttons have solid background and lighter border.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>button</span> <span>disabled</span>&gt;</span>I cannot be clicked<span>&lt;/<span>button</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Button focus is communicated with a dotted border, set 4px within the contents of the button.\n The following example is simulated to be focused.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>button</span>&gt;</span>I am focused<span>&lt;/<span>button</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n A default button (in Windows, hitting the Enter key in a dialog context triggers the button)\n has a greenish-blue border and a light blue gradient shade.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>button</span> <span>class</span>=<span>\"default\"</span>&gt;</span>I am the one!<span>&lt;/<span>button</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"checkbox\">CheckBox</h3>\n <div>\n <blockquote>\n A <em>check box</em> represents an independent or non-exclusive choice.\n </blockquote>\n <p>\n Checkboxes are represented with a sunken panel, populated with a \"check\" icon when\n selected, next to a label indicating the choice.\n </p>\n <p>\n Note: You <strong>must</strong> include a corresponding label <strong>after</strong>\n your checkbox, using the <code>&lt;label&gt;</code> element with a <code>for</code> attribute\n pointed at the <code>id</code> of your input. This ensures the checkbox is easy to use with\n assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key,\n being able to click the entire label to select the box).\n </p>\n <div>\n <p>\n<label>This is a checkbox</label></p>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>input</span> <span>type</span>=<span>\"checkbox\"</span> <span>id</span>=<span>\"example1\"</span>&gt;</span>\n<span>&lt;<span>label</span> <span>for</span>=<span>\"example1\"</span>&gt;</span>This is a checkbox<span>&lt;/<span>label</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Checkboxes can be selected and disabled with the standard <code>checked</code> and <code>disabled</code>\n attributes.\n </p>\n <p>\n When grouping inputs, wrap each input in a container with the <code>field-row</code> class. This ensures\n a consistent spacing between inputs.\n </p>\n <div>\n <div><p>\n <label>I am checked</label>\n</p>\n<p>\n <label>I am inactive</label>\n</p>\n<p>\n <label>I am inactive but still checked</label>\n</p></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>checked</span> <span>type</span>=<span>\"checkbox\"</span> <span>id</span>=<span>\"example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example2\"</span>&gt;</span>I am checked<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>disabled</span> <span>type</span>=<span>\"checkbox\"</span> <span>id</span>=<span>\"example3\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example3\"</span>&gt;</span>I am inactive<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>checked</span> <span>disabled</span> <span>type</span>=<span>\"checkbox\"</span> <span>id</span>=<span>\"example4\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example4\"</span>&gt;</span>I am inactive but still checked<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"collapse\">Collapse</h3>\n <div>\n <blockquote>\n Users can show or hide additional information including data, options, or commands.\n </blockquote>\n <p>\n A collapsible section can be created using the elements <code>details</code> and\n <code>summary</code>.\n </p>\n <div>\n <div><details>\n <summary>Expand me to see something interesting</summary>\n <p>🎉 Tadah!</p>\n</details></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>details</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>Expand me to see something interesting<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>🎉 Tadah!<span>&lt;/<span>p</span>&gt;</span>\n<span>&lt;/<span>details</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>Add an <code>open</code> attribute to expand the content by default.</p>\n <div>\n <div><details>\n <summary>I open myself willingly</summary>\n <ul>\n <li>This is my family</li>\n <li>This is my house</li>\n <li>This is my car</li>\n </ul>\n</details></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>details</span> <span>open</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>I open myself willingly<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>This is my family<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>This is my house<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>This is my car<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n<span>&lt;/<span>details</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"combobox\">Combobox</h3>\n <div>\n <blockquote>\n A <i>combo box</i> is a combination of a standard list box or a drop-down list\n and an editable text box, thus allowing users to enter a value that isn't in the list.\n </blockquote>\n <p>\n To render a combo box, use a text <code>input</code>, a <code>button</code>,\n a parent <code>ul</code>, and children <code>li</code> together,\n wrapped inside a container element with the <code>combobox</code> class.\n For accessibility, follow the minimum requirements as below:\n </p>\n <ul>\n <li>Add a <code>role=\"combobox\"</code> attribute to the text <code>input</code></li>\n <li>Add a <code>role=\"listbox\"</code> attribute to the <code>ul</code></li>\n <li>Add a <code>role=\"option\"</code> attribute to each <code>li</code></li>\n <li>\n Specify the relationship between the list box and the text box by combining\n the <code>id</code> of the <code>listbox</code> with the <code>aria-owns</code> attribute\n on the text <code>input</code>\n </li>\n </ul>\n <div>\n <div>\n <ul>\n <li>Facebook</li>\n <li>Amazon</li>\n <li>Apple</li>\n <li>Netflix</li>\n <li>Google</li>\n </ul>\n</div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"combobox\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"text\"</span> <span>role</span>=<span>\"combobox\"</span> <span>aria-owns</span>=<span>\"company\"</span> /&gt;</span>\n <span>&lt;<span>button</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"listbox\"</span> <span>id</span>=<span>\"company\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Facebook<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Amazon<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Apple<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Netflix<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Google<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n For more options of the list box, see the <a target=\"_blank\" href=\"https://khang-nd.github.io/7.css#listbox\">ListBox</a> section.\n </p>\n </div>\n</section> <section>\n <h3 id=\"dropdown\">Dropdown</h3>\n <div>\n <blockquote>\n A <em>drop-down list box</em> allows the selection of only a\n single item from a list. In its closed state, the control displays\n the current value for the control. The user opens the list to change\n the value.\n </blockquote>\n <p>\n Dropdowns can be rendered by using the <code>select</code> and <code>option</code>\n elements.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>select</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>5 - Incredible!<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>4 - Great!<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>3 - Pretty good<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>2 - Not so great<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>1 - Unfortunate<span>&lt;/<span>option</span>&gt;</span>\n<span>&lt;/<span>select</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n By default, the first option will be selected. You can change this by\n giving one of your <code>option</code> elements the <code>selected</code>\n attribute.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>select</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>5 - Incredible!<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>4 - Great!<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span> <span>selected</span>&gt;</span>3 - Pretty good<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>2 - Not so great<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>1 - Unfortunate<span>&lt;/<span>option</span>&gt;</span>\n<span>&lt;/<span>select</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"groupbox\">GroupBox</h3>\n <div>\n <blockquote>\n A <em>group box</em> is a special control you can use to organize a set of\n controls. A group box is a rectangular frame with an optional label that surrounds\n a set of controls.\n </blockquote>\n <p>\n A group box can be used by wrapping your elements with the <code>fieldset</code> tag.\n It contains a sunken outer border and a raised inner border, resembling an engraved box\n around your controls.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>fieldset</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>Select one:<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio5\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio5\"</span>&gt;</span>Diners<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio6\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio6\"</span>&gt;</span>Drive-Ins<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio7\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio7\"</span>&gt;</span>Dives<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>fieldset</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n You can provide your group with a label by placing a <code>legend</code> element\n within the <code>fieldset</code>.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>fieldset</span>&gt;</span>\n <span>&lt;<span>legend</span>&gt;</span>Today's mood<span>&lt;/<span>legend</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio8\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio8\"</span>&gt;</span>Claire Saffitz<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio9\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio9\"</span>&gt;</span>Brad Leone<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio10\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio10\"</span>&gt;</span>Chris Morocco<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio11\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio11\"</span>&gt;</span>Carla Lalli Music<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>fieldset</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"listbox\">ListBox</h3>\n <div>\n <blockquote>\n With a <i>list box</i>, users can select from a set of values presented in a list that is always visible.\n </blockquote>\n <p>\n There are 2 ways you can render a list box. The simple one is using the <code>select</code>\n element with a <code>multiple</code> attribute specified.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>select</span> <span>multiple</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>5 - Incredible!<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span> <span>selected</span>&gt;</span>4 - Great!<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>3 - Pretty good<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>2 - Not so great<span>&lt;/<span>option</span>&gt;</span>\n <span>&lt;<span>option</span>&gt;</span>1 - Unfortunate<span>&lt;/<span>option</span>&gt;</span>\n<span>&lt;/<span>select</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n The complex one is using a combination of the <code>ul</code>/<code>li</code> elements\n with the <code>role</code> attributes.\n </p>\n <div>\n <div><ul>\n <li>Facebook</li>\n <li>Amazon</li>\n <li>Apple</li>\n <li>Netflix</li>\n <li>Google</li>\n</ul></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>role</span>=<span>\"listbox\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Facebook<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span> <span>aria-selected</span>=<span>\"true\"</span>&gt;</span>Amazon<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Apple<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Netflix<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Google<span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n The latter offers more flexibility over using a mere <code>select</code> element.\n Choose the one that is more appropriate depending on your context or use case.\n </p>\n <p>\n To add a drop shadow to the list box, use the <code>has-shadow</code> class.\n To add a hovering style on the list box items (using <code>role</code> attribute only),\n use the <code>has-hover</code> class.\n </p>\n <div>\n <div><ul>\n <li>Facebook</li>\n <li>Amazon</li>\n <li>Apple</li>\n <li>Netflix</li>\n <li>Google</li>\n</ul></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>role</span>=<span>\"listbox\"</span> <span>class</span>=<span>\"has-shadow has-hover\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Facebook<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Amazon<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Apple<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Netflix<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"option\"</span>&gt;</span>Google<span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section>\n <h3 id=\"nav\">Navigation</h3>\n <p>\n The following components compose a complete navigation menu, also known as Navbar.\n </p>\n <div>\n <blockquote>\n <em>Menus</em> are hierarchical lists of commands or options available to users in the current context.\n </blockquote>\n <p>\n A menu can be rendered using a composition of a parent <code>ul</code> and child items\n <code>li</code>, <code>role=\"menu\"</code> and <code>role=\"menuitem\"</code> attributes\n must be specified on the <code>ul</code> and <code>li</code> respectively.\n </p>\n <p>\n If a menu item has a submenu, add an <code>aria-haspopup=\"true\"</code> attribute to it\n to render a caret indicator.\n </p>\n <p>\n To make the menu focusable, specify the <code>tabindex</code> attributes on the items.\n Alternatively, you can use an <code>a</code> to achieve the same.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span> <span>style</span>=<span>\"width: 200px\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>View<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>\n Sort by\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Name<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Size<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Item type<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Date modified<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Refresh<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Paste<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Paste shortcut<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Screen resolution<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Gadgets<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Personalize<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n By default, the submenu is only shown when the linked item is focused/clicked.\n To add the hovering/mouse-over trigger, you can add a <code>can-hover</code>\n class to the root container.\n </p>\n <p>\n Use a <code>has-divider</code> class to make a horizontal line after the menu item.\n Disable a menu item by placing an <code>aria-disabled</code> attribute on it.\n </p>\n <p>\n You may associate a menu item with an icon by using the <code>img</code> element.\n (Icons provided by <a href=\"https://icons8.com/\" target=\"_blank\">Icons8</a>)\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span> <span>class</span>=<span>\"can-hover\"</span> <span>style</span>=<span>\"width: 200px\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>View<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>\n Sort by\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Name<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Size<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Item type<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Date modified<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>class</span>=<span>\"has-divider\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Refresh<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>aria-disabled</span>=<span>\"true\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Paste<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>aria-disabled</span>=<span>\"true\"</span> <span>class</span>=<span>\"has-divider\"</span>&gt;</span>\n <span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Paste shortcut<span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>img</span> <span>src</span>=<span>\"https://img.icons8.com/color/18/000000/monitor--v1.png\"</span>/&gt;</span>\n <span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Screen resolution<span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>img</span> <span>src</span>=<span>\"https://img.icons8.com/color/18/000000/virtual-machine2.png\"</span>/&gt;</span>\n <span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Gadgets<span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>img</span> <span>src</span>=<span>\"https://img.icons8.com/color/18/000000/remote-desktop.png\"</span>/&gt;</span>\n <span>&lt;<span>a</span> <span>href</span>=<span>\"#menu\"</span>&gt;</span>Personalize<span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To render menu items that are options with bullets and checkmarks, use the corresponding\n input type (<code>radio</code> or <code>checkbox</code>).\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span> <span>style</span>=<span>\"width: 200px\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"icon-size\"</span> <span>id</span>=<span>\"example12\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example12\"</span>&gt;</span>Large icons<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"icon-size\"</span> <span>id</span>=<span>\"example13\"</span> <span>checked</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example13\"</span>&gt;</span>Medium icons<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>class</span>=<span>\"has-divider\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"icon-size\"</span> <span>id</span>=<span>\"example14\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example14\"</span>&gt;</span>Small icons<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"checkbox\"</span> <span>id</span>=<span>\"example15\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example15\"</span>&gt;</span>Auto arrange icons<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"checkbox\"</span> <span>id</span>=<span>\"example16\"</span> <span>checked</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"example16\"</span>&gt;</span>Align icons to grid<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div> </div> <div>\n <blockquote>\n A <em>menu bar</em> is a list of labeled menu categories typically located near the top of a window.\n </blockquote>\n <p>\n A menu bar can be created in a similar manner to the menu, however, use a\n <code>role=\"menubar\"</code> attribute in place of <code>role=\"menu\"</code>.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>role</span>=<span>\"menubar\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span>&gt;</span>File<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span>&gt;</span>Edit<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span>&gt;</span>View<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span>&gt;</span>Help<span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Combining it with the Menu component, we will have a complete menu bar\n with the associated menu dropdowns.\n </p>\n <p>\n To accommodate an extra piece of info for a menu item (like a shortcut mnemonic)\n on the right side, nest it with an <code>span</code> element.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>role</span>=<span>\"menubar\"</span> <span>class</span>=<span>\"can-hover\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>\n File\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>\n Open <span>&lt;<span>span</span>&gt;</span>Ctrl+O<span>&lt;/<span>span</span>&gt;</span>\n <span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span>\n <span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>\n Save <span>&lt;<span>span</span>&gt;</span>Ctrl+S<span>&lt;/<span>span</span>&gt;</span>\n <span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>class</span>=<span>\"has-divider\"</span>&gt;</span>\n <span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>\n Save As... <span>&lt;<span>span</span>&gt;</span>Ctrl+Shift+S<span>&lt;/<span>span</span>&gt;</span>\n <span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Exit<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>\n Edit\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Undo<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Copy<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Cut<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>class</span>=<span>\"has-divider\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Paste<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Delete<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Find...<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Replace...<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Go to...<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>\n View\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>\n Zoom\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>button</span>&gt;</span>Zoom In<span>&lt;/<span>button</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>button</span>&gt;</span>Zoom Out<span>&lt;/<span>button</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>Status Bar<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span> <span>tabindex</span>=<span>\"0\"</span> <span>aria-haspopup</span>=<span>\"true\"</span>&gt;</span>\n Help\n <span>&lt;<span>ul</span> <span>role</span>=<span>\"menu\"</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>View Help<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span> <span>role</span>=<span>\"menuitem\"</span>&gt;</span><span>&lt;<span>a</span> <span>href</span>=<span>\"#menubar\"</span>&gt;</span>About<span>&lt;/<span>a</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n <section>\n <h3 id=\"radio\">OptionButton</h3>\n <div>\n <blockquote>\n An <em>option button</em>, also referred to as a radio button, represents a single\n choice within a limited set of mutually exclusive choices. That is, the user can choose only\n one set of options.\n </blockquote>\n <p>\n Option buttons can be used via the <code>radio</code> type on an input element.\n </p>\n <p>\n Option buttons can be grouped by specifying a shared <code>name</code> attribute on each\n input. Just as before: when grouping inputs, wrap each input in a container with the\n <code>field-row</code> class to ensure a consistent spacing between inputs.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio17\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"first-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio17\"</span>&gt;</span>Yes<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio18\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"first-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio18\"</span>&gt;</span>No<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Option buttons can also be <code>checked</code> and <code>disabled</code> with their corresponding\n HTML attributes.\n </p>\n <div>\n <div><p>\n <label>Peanut butter should be smooth</label>\n</p>\n<p>\n <label>I understand why people like crunchy peanut butter</label>\n</p>\n<p>\n <label>Crunchy peanut butter is good</label>\n</p></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio19\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"second-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio19\"</span>&gt;</span>Peanut butter should be smooth<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>checked</span> <span>disabled</span> <span>id</span>=<span>\"radio20\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"second-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio20\"</span>&gt;</span>I understand why people like crunchy peanut butter<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>disabled</span> <span>id</span>=<span>\"radio21\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"second-example\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio21\"</span>&gt;</span>Crunchy peanut butter is good<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"progressbar\">ProgressBar</h3>\n <div>\n <blockquote>\n A common control that displays the progress of a particular operation as a graphical bar.\n </blockquote>\n <p>\n Progress bars can be created with a <code>div</code> using <code>role=\"progressbar\"</code>,\n and another nested <code>div</code> is required to make the inner bar.\n </p>\n <p>Specify the width of the inner bar to indicate the progress.</p>\n <p>\n For accessibility, you might want to specify the respective <code>aria-*</code> attributes.\n Refer to <a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role\">MDN</a>\n for more information.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>role</span>=<span>\"progressbar\"</span> <span>aria-valuemin</span>=<span>\"0\"</span> <span>aria-valuemax</span>=<span>\"100\"</span> <span>aria-valuenow</span>=<span>\"80\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>style</span>=<span>\"width: 80%\"</span>&gt;</span><span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To indicate the progress bar in paused state, add a <code>paused</code> class.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>role</span>=<span>\"progressbar\"</span> <span>class</span>=<span>\"paused\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>style</span>=<span>\"width: 50%\"</span>&gt;</span><span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To indicate the progress bar in error state, add an <code>error</code> class.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>role</span>=<span>\"progressbar\"</span> <span>class</span>=<span>\"error\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>style</span>=<span>\"width: 30%\"</span>&gt;</span><span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To animate the progress bar, add an <code>animate</code> class.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>role</span>=<span>\"progressbar\"</span> <span>class</span>=<span>\"animate\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>style</span>=<span>\"width: 60%\"</span>&gt;</span><span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To create an indeterminate progress bar, add a <code>marquee</code> class\n and remove the nested <code>div</code>.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>role</span>=<span>\"progressbar\"</span> <span>class</span>=<span>\"marquee\"</span>&gt;</span><span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"scrollbar\">Scrollbar</h3>\n <div>\n <blockquote>\n A control that allows users to scroll the content of a window, either vertically or horizontally.\n </blockquote>\n <p>\n To override the browser scrollbar's system styling for a particular section, add a <code>has-scrollbar</code>\n class to the container element.\n </p>\n <p>\n Note that this only works with WebKit-based browsers.\n </p>\n <div>\n <div><p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,\n scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.\n Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.\n Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.\n Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,\n scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.\n Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.\n Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.\n Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.\n</p></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"has-scrollbar\"</span> <span>style</span>=<span>\"width: 300px; height: 150px; overflow: auto\"</span>&gt;</span>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,\n scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.\n Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.\n Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.\n Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,\n scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.\n Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.\n Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.\n Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"searchbox\">SearchBox</h3>\n <div>\n <blockquote>\n With a <em>Search box</em>, users can quickly locate specific objects or text within a large set of data by\n filtering or highlighting matches.\n </blockquote>\n <p>\n There are 2 variants of the search box available.\n </p>\n <p>\n An <strong>instant search</strong>, where the results are displayed immediately as the user types, can be rendered\n just by specifying a <code>type=\"search\"</code> attribute on an <code>input</code> element:\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>input</span> <span>type</span>=<span>\"search\"</span> <span>placeholder</span>=<span>\"Search\"</span> /&gt;</span></code></pre>\n </details>\n </div>\n <p>\n A <strong>regular search</strong>, where a search is performed when the user clicks the search button, requires\n a search input and a button wrapped inside a container a container element with the class <code>searchbox</code>.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"searchbox\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"search\"</span> <span>placeholder</span>=<span>\"Search\"</span> /&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"search\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"slider\">Slider</h3>\n <div>\n <blockquote>\n A <em>slider</em>, sometimes called a trackbar control, consists of a bar that\n defines the extent or range of the adjustment and an indicator that\n shows the current value for the control...\n </blockquote>\n <p>\n Sliders can rendered by specifying a <code>range</code> type on an\n <code>input</code> element.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span> <span>style</span>=<span>\"max-width: 300px\"</span>&gt;</span>\n <span>&lt;<span>label</span>&gt;</span>Volume:<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;<span>label</span>&gt;</span>Low<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;<span>input</span> <span>type</span>=<span>\"range\"</span> <span>min</span>=<span>\"1\"</span> <span>max</span>=<span>\"11\"</span> <span>value</span>=<span>\"5\"</span> /&gt;</span>\n <span>&lt;<span>label</span>&gt;</span>High<span>&lt;/<span>label</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n You can make use of the <code>has-box-indicator</code> class replace the\n default indicator with a box indicator, furthermore the slider can be wrapped\n with a <code>div</code> using <code>is-vertical</code> to display the input vertically.\n </p>\n <p>\n Note: To change the length of a vertical slider, the <code>input</code> width\n and <code>div</code> height.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>label</span>&gt;</span>Cowbell<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"is-vertical\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>class</span>=<span>\"has-box-indicator\"</span> <span>type</span>=<span>\"range\"</span> <span>min</span>=<span>\"1\"</span> <span>max</span>=<span>\"3\"</span> <span>step</span>=<span>\"1\"</span> <span>value</span>=<span>\"2\"</span> /&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"spinner\">Spinner</h3>\n <div>\n <blockquote>\n A <i>spinner</i> or loader, also referred as\n <a href=\"https://learn.microsoft.com/en-us/windows/apps/design/controls/progress-controls\" target=\"_blank\">ProgressRing</a>,\n is a type of progress control to indicate that an operation is underway\n and its completion time is unknown.\n </blockquote>\n <p>\n To render a spinner element, use either a <code>spinner</code> or a <code>loader</code>\n class. To animate the spinner, add an <code>animate</code> class.\n </p>\n <p>\n For accessibility, we use an <code>aria-label</code> attribute with a desired text\n to inform assistive technologies about the presence of the spinner.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>span</span> <span>class</span>=<span>\"spinner\"</span> <span>aria-label</span>=<span>\"Spinning\"</span>&gt;</span><span>&lt;/<span>span</span>&gt;</span>\n<span>&lt;<span>span</span> <span>class</span>=<span>\"loader\"</span> <span>aria-label</span>=<span>\"Loading\"</span>&gt;</span><span>&lt;/<span>span</span>&gt;</span>\n<span>&lt;<span>span</span> <span>class</span>=<span>\"loader animate\"</span> <span>aria-label</span>=<span>\"Processing your request\"</span>&gt;</span><span>&lt;/<span>span</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"tabs\">Tabs</h3>\n <div>\n <blockquote>\n <em>Tabs</em> provide a way to present related information on separate labeled pages.\n </blockquote>\n <div>\n <section>\n <article>\n <h3>Creating tabs</h3>\n <p>\n To create a tab, use a <code>menu</code> element with <code>role=\"tablist\"</code>.\n Then for the tab titles, use a <code>button</code> with <code>role=\"tab\"</code>, and set the <code>aria-controls</code> attribute to\n the corresponding id of the element with <code>role=\"tabpanel\"</code>.\n </p>\n <p>\n Read more at <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role\" target=\"_blank\">MDN Web docs - ARIA: tab role</a>\n </p>\n </article>\n <article>\n <h3>More...</h3>\n <p>This tab contains a GroupBox</p>\n </article>\n <article>\n <h3>Disabling tabs</h3>\n <p>Simply add a <code>disabled</code> attribute on the tab.</p>\n <h3>Justified tabs</h3>\n <p>Add the <code>justified</code> class to the <code>tablist</code> menu to make the tabs, well, justified.</p>\n </article>\n <article>\n <h3>Disabled Tab</h3>\n <p>This tab is disabled, so you should not be able to read this.</p>\n </article>\n</section>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>section</span> <span>class</span>=<span>\"tabs\"</span> <span>style</span>=<span>\"max-width: 500px\"</span>&gt;</span>\n <span>&lt;<span>menu</span> <span>role</span>=<span>\"tablist\"</span> <span>aria-label</span>=<span>\"Sample Tabs\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-A\"</span> <span>aria-selected</span>=<span>\"true\"</span>&gt;</span>Instruction<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-B\"</span>&gt;</span>Example<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-C\"</span>&gt;</span>More instruction<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-D\"</span> <span>disabled</span>&gt;</span>Disabled Tab<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>menu</span>&gt;</span>\n <span>&lt;!-- the tab content --&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-A\"</span>&gt;</span>\n <span>&lt;<span>h3</span>&gt;</span>Creating tabs<span>&lt;/<span>h3</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>\n To create a tab, use a <span>&lt;<span>code</span>&gt;</span>menu<span>&lt;/<span>code</span>&gt;</span> element with <span>&lt;<span>code</span>&gt;</span>role=\"tablist\"<span>&lt;/<span>code</span>&gt;</span>.\n Then for the tab titles, use a <span>&lt;<span>code</span>&gt;</span>button<span>&lt;/<span>code</span>&gt;</span> with <span>&lt;<span>code</span>&gt;</span>role=\"tab\"<span>&lt;/<span>code</span>&gt;</span>, and set the <span>&lt;<span>code</span>&gt;</span>aria-controls<span>&lt;/<span>code</span>&gt;</span> attribute to\n the corresponding id of the element with <span>&lt;<span>code</span>&gt;</span>role=\"tabpanel\"<span>&lt;/<span>code</span>&gt;</span>.\n <span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>\n Read more at <span>&lt;<span>a</span> <span>href</span>=<span>\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role\"</span>\n <span>target</span>=<span>\"_blank\"</span>&gt;</span>MDN Web docs - ARIA: tab role<span>&lt;/<span>a</span>&gt;</span>\n <span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-B\"</span> <span>hidden</span>&gt;</span>\n <span>&lt;<span>h3</span>&gt;</span>More...<span>&lt;/<span>h3</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>This tab contains a GroupBox<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>fieldset</span>&gt;</span>\n <span>&lt;<span>legend</span>&gt;</span>Today's mood<span>&lt;/<span>legend</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio22\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio22\"</span>&gt;</span>Claire Saffitz<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio23\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio23\"</span>&gt;</span>Brad Leone<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio24\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio24\"</span>&gt;</span>Chris Morocco<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio25\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio25\"</span>&gt;</span>Carla Lalli Music<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>fieldset</span>&gt;</span>\n <span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-C\"</span> <span>hidden</span>&gt;</span>\n <span>&lt;<span>h3</span>&gt;</span>Disabling tabs<span>&lt;/<span>h3</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>Simply add a <span>&lt;<span>code</span>&gt;</span>disabled<span>&lt;/<span>code</span>&gt;</span> attribute on the tab.<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>h3</span>&gt;</span>Justified tabs<span>&lt;/<span>h3</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>Add the <span>&lt;<span>code</span>&gt;</span>justified<span>&lt;/<span>code</span>&gt;</span> class to the <span>&lt;<span>code</span>&gt;</span>tablist<span>&lt;/<span>code</span>&gt;</span> menu to make the tabs, well, justified.<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-D\"</span> <span>hidden</span>&gt;</span>\n <span>&lt;<span>h3</span>&gt;</span>Disabled Tab<span>&lt;/<span>h3</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>This tab is disabled, so you should not be able to read this.<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>article</span>&gt;</span>\n<span>&lt;/<span>section</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>A simplified template is as below:</p>\n <div>\n <p></p><section>\n <article>Tab A is active</article>\n <article>Tab B is active</article>\n <article>Tab C is active</article>\n <article>Tab D is inactive</article>\n</section><p></p>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>section</span> <span>class</span>=<span>\"tabs\"</span>&gt;</span>\n <span>&lt;<span>menu</span> <span>role</span>=<span>\"tablist\"</span> <span>aria-label</span>=<span>\"Tabs Template\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-A\"</span> <span>aria-selected</span>=<span>\"true\"</span>&gt;</span>Tab A<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-B\"</span>&gt;</span>Tab B<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-C\"</span>&gt;</span>Tab C<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"tab-D\"</span> <span>disabled</span>&gt;</span>Tab D<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>menu</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-A\"</span>&gt;</span>Tab A is active<span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-B\"</span> <span>hidden</span>&gt;</span>Tab B is active<span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-C\"</span> <span>hidden</span>&gt;</span>Tab C is active<span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"tab-D\"</span> <span>hidden</span>&gt;</span>Tab D is inactive<span>&lt;/<span>article</span>&gt;</span>\n<span>&lt;/<span>section</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"textbox\">TextBox</h3>\n <div>\n <blockquote>\n A <em>text box</em> (also referred to as an edit control) is a\n rectangular control where the user enters or edits text. It can\n be defined to support a single line or multiple lines of text.\n </blockquote>\n <p>\n Text boxes can rendered by specifying a <code>text</code> type on an\n <code>input</code> element. As with checkboxes and radio buttons, you\n should provide a corresponding label with a properly set <code>for</code>\n attribute, and wrap both in a container with the <code>field-row</code> class.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"text26\"</span>&gt;</span>Occupation<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"text26\"</span> <span>type</span>=<span>\"text\"</span> /&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Additionally, you can make use of the <code>field-row-stacked</code> class\n to position your label above the input instead of beside it.\n </p>\n <div>\n <div><p><label>Address (Line 1)</label>\n</p>\n<p><label>Address (Line 2)</label>\n</p></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row-stacked\"</span> <span>style</span>=<span>\"width: 200px\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"text27\"</span>&gt;</span>Address (Line 1)<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"text27\"</span> <span>type</span>=<span>\"text\"</span> /&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"field-row-stacked\"</span> <span>style</span>=<span>\"width: 200px\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"text28\"</span>&gt;</span>Address (Line 2)<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"text28\"</span> <span>type</span>=<span>\"text\"</span> /&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To support multiple lines in the user's input, use the <code>textarea</code>\n element instead.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"field-row-stacked\"</span> <span>style</span>=<span>\"width: 200px\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"text29\"</span>&gt;</span>Additional notes<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;<span>textarea</span> <span>id</span>=<span>\"text29\"</span> <span>rows</span>=<span>\"8\"</span>&gt;</span><span>&lt;/<span>textarea</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h3 id=\"tree-view\">TreeView</h3>\n <div>\n <blockquote>\n A <em>tree view control</em> is a special list box control\n that displays a set of objects as an indented outline based\n on their logical hierarchical relationship.\n </blockquote>\n <p>\n To render a tree view, use an <code>ul</code> element with the\n <code>tree-view</code> class. The children of this list (<code>li</code>\n elements), can contain whatever you'd like.\n </p>\n <div>\n <div><ul>\n <li>We can put</li>\n <li><strong>✨ Whatever ✨</strong></li>\n <li>We want in here</li>\n</ul></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>class</span>=<span>\"tree-view has-container\"</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>We can put<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span><span>&lt;<span>strong</span> <span>style</span>=<span>\"color: purple\"</span>&gt;</span>✨ Whatever ✨<span>&lt;/<span>strong</span>&gt;</span><span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>We want in here<span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n To make this a tree, we can nest further <code>ul</code> elements\n (no class needed on these). This will provide them with indentation\n to illustrate the hierarchical relations of the tree.\n </p>\n <p>\n To create collapsible sections, wrap child lists inside <code>details</code> elements.\n </p>\n <div>\n <div><ul>\n <li>Table of Contents</li>\n <li>What is web development?</li>\n <li>\n CSS\n <ul>\n <li>Selectors</li>\n <li>Specificity</li>\n <li>Properties</li>\n </ul>\n </li>\n <li>\n <details>\n <summary>JavaScript</summary>\n <ul>\n <li>Avoid at all costs</li>\n <li>\n <details>\n <summary>Unless</summary>\n <ul>\n <li>Avoid</li>\n <li>\n <details>\n <summary>At</summary>\n <ul>\n <li>Avoid</li>\n <li>At</li>\n <li>All</li>\n <li>Cost</li>\n </ul>\n </details>\n </li>\n <li>All</li>\n <li>Cost</li>\n </ul>\n </details>\n </li>\n </ul>\n </details>\n </li>\n <li>HTML</li>\n <li>Special Thanks</li>\n</ul></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>class</span>=<span>\"tree-view has-container\"</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Table of Contents<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>What is web development?<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>\n CSS\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Selectors<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Specificity<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Properties<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>\n <span>&lt;<span>details</span> <span>open</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>JavaScript<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Avoid at all costs<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>\n <span>&lt;<span>details</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>Unless<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Avoid<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>\n <span>&lt;<span>details</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>At<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Avoid<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>At<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>All<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Cost<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>details</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>All<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Cost<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>details</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>details</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>HTML<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Special Thanks<span>&lt;/<span>li</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n The <code>has-connector</code> class may be used to render a dotted border to illustrate\n the structure more clearly, and the <code>has-collapse-button</code> class to change\n the expand/collapse carets to buttons.\n </p>\n <div>\n <div><ul>\n <details>\n <summary>JavaScript</summary>\n <ul>\n <li>Avoid at all costs</li>\n <li>\n <details>\n <summary>Unless</summary>\n <ul>\n <li>Avoid</li>\n <li>\n <details>\n <summary>At</summary>\n <ul>\n <li>Avoid</li>\n <li>At</li>\n <li>All</li>\n <li>Cost</li>\n </ul>\n </details>\n </li>\n <li>All</li>\n <li>Cost</li>\n </ul>\n </details>\n </li>\n </ul>\n </details>\n</ul></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>ul</span> <span>class</span>=<span>\"tree-view has-collapse-button has-connector has-container\"</span>&gt;</span>\n <span>&lt;<span>details</span> <span>open</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>JavaScript<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Avoid at all costs<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>\n <span>&lt;<span>details</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>Unless<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Avoid<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>\n <span>&lt;<span>details</span>&gt;</span>\n <span>&lt;<span>summary</span>&gt;</span>At<span>&lt;/<span>summary</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Avoid<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>At<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>All<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Cost<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>details</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>All<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Cost<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>details</span>&gt;</span>\n <span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>details</span>&gt;</span>\n<span>&lt;/<span>ul</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section>\n <h3 id=\"window\">Window</h3>\n <p>\n The following components illustrate how to build complete windows using\n 7.css.\n </p>\n <section>\n <h4 id=\"title-bar\">Title Bar</h4>\n <div>\n <blockquote>\n At the top edge of the window, inside its border, is the title bar\n (also reffered to as the caption or caption bar), which extends across\n the width of the window. The title bar identifies the contents of the\n window.\n </blockquote>\n <blockquote>\n Include command buttons associated with the common commands of the\n primary window in the title bar. These buttons act as shortcuts to specific\n window commands.\n </blockquote>\n <p>\n You can build a complete title bar by making use of three classes,\n <code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A Title Bar<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n We make use of <code>aria-label</code> to render the Close button, to let\n assistive technologies know the intent of this button. You may also use\n \"Minimize\", \"Maximize\", \"Restore\" and \"Help\" like so:\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A Title Bar<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Maximize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>br</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A maximized Title Bar<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Restore\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>br</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A help Title Bar<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Help\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Alternatively, you can use the <code>is-close</code>, <code>is-minimize</code>,\n <code>is-maximize</code>, <code>is-restore</code>, <code>is-help</code> classes to target the respective\n controls for your styling preference.\n </p>\n <p>\n To give our title bar a home, we wrap it in a <code>window</code> container.\n This provides a drop shadow to it. We can freely resize the window by specifying\n a width in the container style.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"window\"</span> <span>style</span>=<span>\"max-width: 300px\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A complete window<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Maximize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n Place an <code>active</code> class either on the <code>window</code> container or\n the title bar itself to enable the active styles for the controls.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"window active\"</span> <span>style</span>=<span>\"max-width: 300px\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A complete window<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Maximize\"</span> <span>disabled</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h4 id=\"window-body\">Window body</h4>\n <div>\n <blockquote>\n Every window has a boundary that defines its shape.\n </blockquote>\n <p>\n To draw the contents of the window, we use the <code>window-body</code>\n class under the title bar. You may use the <code>has-space</code> class to add some padding\n to the window body.\n </p>\n <div>\n <div>\n <p>There's so much room for activities!</p>\n</div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"window active\"</span> <span>style</span>=<span>\"max-width: 300px\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A window with contents<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Maximize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window-body has-space\"</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>There's so much room for activities!<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <div>\n <div>\n <div>\n <p>Another window with contents</p>\n </div>\n <div>\n <article>\n <p>Set your listening preferences</p>\n <section>\n <label>Try this to get some attention</label>\n </section>\n </article>\n <article>\n </article>\n <article>\n <p>\n You create the content for each tab by using an <code>article</code> tag.\n </p>\n <iframe width=\"100%\" height=\"200\" src=\"https://www.youtube.com/embed/TODJBQ0tnow\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"></iframe>\n </article>\n </div>\n</div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"window active\"</span> <span>style</span>=<span>\"max-width: 400px\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>Another window with contents<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Maximize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window-body has-space\"</span>&gt;</span>\n <span>&lt;<span>menu</span> <span>role</span>=<span>\"tablist\"</span> <span>aria-label</span>=<span>\"Window with Tabs\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"music\"</span> <span>aria-selected</span>=<span>\"true\"</span>&gt;</span>Music<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"dogs\"</span>&gt;</span>Dogs<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>role</span>=<span>\"tab\"</span> <span>aria-controls</span>=<span>\"food\"</span>&gt;</span>Food<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>menu</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>id</span>=<span>\"music\"</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>Set your listening preferences<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>fieldset</span>&gt;</span>\n <span>&lt;<span>legend</span>&gt;</span>Today's mood<span>&lt;/<span>legend</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio30\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio30\"</span>&gt;</span>Nicki Minaj<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio31\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio31\"</span>&gt;</span>Bell Towers<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio32\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio32\"</span>&gt;</span>The Glamorous Monique<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>input</span> <span>id</span>=<span>\"radio33\"</span> <span>type</span>=<span>\"radio\"</span> <span>name</span>=<span>\"fieldset-example2\"</span>&gt;</span>\n <span>&lt;<span>label</span> <span>for</span>=<span>\"radio33\"</span>&gt;</span>EN. V<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>fieldset</span>&gt;</span>\n <span>&lt;<span>section</span> <span>class</span>=<span>\"field-row\"</span>&gt;</span>\n <span>&lt;<span>button</span>&gt;</span>Reset Alarm...<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>label</span>&gt;</span>Try this to get some attention<span>&lt;/<span>label</span>&gt;</span>\n <span>&lt;/<span>section</span>&gt;</span>\n <span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>hidden</span> <span>id</span>=<span>\"dogs\"</span>&gt;</span>\n <span>&lt;<span>img</span> <span>style</span>=<span>\"width: 100%\"</span>\n <span>src</span>=<span>\"data:image/jpeg;base64,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\"</span> /&gt;</span>\n <span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>article</span> <span>role</span>=<span>\"tabpanel\"</span> <span>hidden</span> <span>id</span>=<span>\"food\"</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>\n You create the content for each tab by using an <span>&lt;<span>code</span>&gt;</span>article<span>&lt;/<span>code</span>&gt;</span> tag.\n <span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>iframe</span> <span>width</span>=<span>\"100%\"</span> <span>height</span>=<span>\"200\"</span> <span>src</span>=<span>\"https://www.youtube.com/embed/TODJBQ0tnow\"</span> <span>frameborder</span>=<span>\"0\"</span>\n <span>allow</span>=<span>\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"</span>\n <span>allowfullscreen</span>&gt;</span><span>&lt;/<span>iframe</span>&gt;</span>\n <span>&lt;/<span>article</span>&gt;</span>\n <span>&lt;<span>section</span> <span>class</span>=<span>\"field-row\"</span> <span>style</span>=<span>\"justify-content: flex-end\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>class</span>=<span>\"default\"</span>&gt;</span>OK<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span>&gt;</span>Cancel<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>section</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n </div>\n</section> <section>\n <h4 id=\"status-bar\">Status Bar</h4>\n <div>\n <blockquote>\n A status bar is a special area within a window, typically the bottom, that displays information\n about the current state of what is being viewed in the window or any other contextual information, such as\n keyboard\n state.\n </blockquote>\n <p>\n You can render a status bar with the <code>status-bar</code> class,\n and <code>status-bar-field</code> for every child text element.\n </p>\n <div>\n <div>\n <div>\n <p>A Window With A Status Bar</p>\n </div>\n <div>\n <p> There are just so many possibilities:</p>\n <ul>\n <li>A Task Manager</li>\n <li>A Notepad</li>\n <li>Or even a File Explorer!</li>\n </ul>\n </div>\n <div>\n <p>Press F1 for help</p>\n <p>Slide 1</p>\n <p>CPU Usage: 14%</p>\n </div>\n</div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"window\"</span> <span>style</span>=<span>\"max-width: 320px\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A Window With A Status Bar<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window-body has-space\"</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span> There are just so many possibilities:<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>ul</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>A Task Manager<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>A Notepad<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;<span>li</span>&gt;</span>Or even a File Explorer!<span>&lt;/<span>li</span>&gt;</span>\n <span>&lt;/<span>ul</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"status-bar\"</span>&gt;</span>\n <span>&lt;<span>p</span> <span>class</span>=<span>\"status-bar-field\"</span>&gt;</span>Press F1 for help<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>p</span> <span>class</span>=<span>\"status-bar-field\"</span>&gt;</span>Slide 1<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;<span>p</span> <span>class</span>=<span>\"status-bar-field\"</span>&gt;</span>CPU Usage: 14%<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n</div></section> <section>\n <h4 id=\"glass-frame-color\">Glass frame &amp; Color</h4>\n <div>\n <blockquote>\n The glass window frames are a striking new aspect of the Microsoft Windows aesthetic,\n aiming to be both attractive and lightweight. These translucent frames give windows\n an open, less intrusive appearance, helping users focus on content and functionality\n rather than the interface surrounding it.\n </blockquote>\n <p>\n You can produce this \"striking aspect\" of the window with a <code>glass</code> class.\n The window frame then becomes translucent, the background is blurred behind the window.\n </p>\n <div>\n <div>\n <p>The background behind is blurred.</p>\n </div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"background\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window glass active\"</span> <span>style</span>=<span>\"max-width: 100%\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A glass window frame<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window-body has-space\"</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>The background behind is blurred.<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n <p>\n If you want to override the default color of the window, you can redefine the \n <code>--window-background-color</code> variable as an inline value of the <code>style</code> attribute.\n </p>\n <div>\n <div><div>\n <p>You can change the window color just as simple.</p>\n</div>\n<div>\n <div>\n <p>A glass violet window frame</p>\n </div>\n <p>And even the glass window frame as well.</p>\n </div></div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>div</span> <span>class</span>=<span>\"window active\"</span> <span>style</span>=<span>\"max-width: 100%; margin: 0 1.5em; --window-background-color: #805ba5;\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A violet window frame<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window-body has-space\"</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>You can change the window color just as simple.<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"background\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window glass active\"</span> <span>style</span>=<span>\"max-width: 100%; --window-background-color: #805ba5;\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span>&gt;</span>A glass violet window frame<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Minimize\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window-body has-space\"</span>&gt;</span>\n <span>&lt;<span>p</span>&gt;</span>And even the glass window frame as well.<span>&lt;/<span>p</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n</div></section> <section>\n <h4 id=\"dialog-box\">Dialog Box</h4>\n <div>\n <blockquote>\n A dialog box is a secondary window that allows users to perform a command,\n asks users a question, or provides users with information or progress feedback.\n </blockquote>\n <p>\n Without JavaScript, a dialog box can be triggered by utilizing the URL fragment of an <code>a</code> element\n (denoted by the # sign), targeting a corresponding dialog box element with the matching <code>id</code>.\n </p>\n <p>\n For accessibility, define the <code>role=\"dialog\"</code> attribute on the element.\n Additionally, label the dialog using the <code>aria-labelledby</code> attribute, with the value\n pointing to the <code>id</code> of the title bar's text element.\n </p>\n <div>\n <details>\n <summary>Show code</summary>\n <pre><code><span>&lt;<span>a</span> <span>href</span>=<span>\"#dialog-demo\"</span>&gt;</span>Open Dialog<span>&lt;/<span>a</span>&gt;</span>\n<span>&lt;<span>div</span> <span>class</span>=<span>\"window active is-bright\"</span> <span>id</span>=<span>\"dialog-demo\"</span> <span>role</span>=<span>\"dialog\"</span> <span>aria-labelledby</span>=<span>\"dialog-title\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar\"</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-text\"</span> <span>id</span>=<span>\"dialog-title\"</span>&gt;</span>Problem Diagnostics<span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"title-bar-controls\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>aria-label</span>=<span>\"Close\"</span> <span>onclick</span>=<span>\"history.back()\"</span>&gt;</span><span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>div</span> <span>class</span>=<span>\"window-body has-space\"</span>&gt;</span>\n <span>&lt;<span>h2</span> <span>class</span>=<span>\"instruction instruction-primary\"</span>&gt;</span>Identifying your problem...<span>&lt;/<span>h2</span>&gt;</span>\n <span>&lt;<span>div</span> <span>role</span>=<span>\"progressbar\"</span> <span>class</span>=<span>\"marquee\"</span>&gt;</span><span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;/<span>div</span>&gt;</span>\n <span>&lt;<span>footer</span> <span>style</span>=<span>\"text-align: right\"</span>&gt;</span>\n <span>&lt;<span>button</span> <span>onclick</span>=<span>\"history.back()\"</span>&gt;</span>Cancel<span>&lt;/<span>button</span>&gt;</span>\n <span>&lt;/<span>footer</span>&gt;</span>\n<span>&lt;/<span>div</span>&gt;</span></code></pre>\n </details>\n </div>\n</div></section>\n <h2 id=\"issues-contributing-etc\">Issues, Contributing, etc.</h2>\n <p>\n 7.css is <a target=\"_blank\" href=\"https://github.com/khang-nd/7.css/blob/main/LICENSE\">MIT licensed</a>.\n Refer to <a target=\"_blank\" href=\"https://github.com/khang-nd/7.css/issues\">the GitHub issues page</a> to report any issue in\n the\n code.\n </p>\n <p>\n Started as a clone of <a target=\"_blank\" href=\"https://github.com/botoxparty/XP.css\">XP.css</a>, 7.css is a fun project I\n worked on in my free time to enhance my tech skills.\n </p>\n <p>\n Consider <a target=\"_blank\" href=\"https://github.com/khang-nd/7.css/stargazers\">starring this project</a>\n if it is useful to you in some way or if you also share the love for Windows 7 with me ;)\n </p>\n </div>",
"author": "@_khangnd",
"favicon": "",
"source": "khang-nd.github.io",
"published": "",
"ttr": 1034,
"type": "website"
}