UI Generator

Components

Link to section titled: 01: Buttons

01: Buttons

Link to section titled: 01.01: Icon Button

01.01: Icon Button

An icon-only button for when you want a more minimal interface.

Rendered

<!-- COMPONENT-START: nc-button: icon -->
<button class="nc-button -icon">
    <span class="text-assistive">Screen Reader Label</span>
    <svg
        class="nc-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        aria-hidden="true"
        focusable="false"
    >
        <path
            d="M22 20H2V18H3V11.0314C3 6.04348 7.02944 2 12 2C16.9706 2 21 6.04348 21 11.0314V18H22V20ZM5 18H19V11.0314C19 7.14806 15.866 4 12 4C8.13401 4 5 7.14806 5 11.0314V18ZM9.5 21H14.5C14.5 22.3807 13.3807 23.5 12 23.5C10.6193 23.5 9.5 22.3807 9.5 21Z"
        ></path>
    </svg>
</button>
<!-- COMPONENT-END: nc-button -->

Notes

  • Make sure to set the icon to aria-hidden, so the content isn't read to screen reader users
  • Also add a screen-reader only label
Link to section titled: 02: Form Elements

02: Form Elements

Link to section titled: 02.01: Fieldset

02.01: Fieldset

Used to group inputs that belong together. Mandatory for radio-inputs. Can have a hint to describe what it is about.

Rendered

Legend

An optional hint for the fieldset to describe what it is about. 

<!-- COMPONENT-START: nc-fieldset -->
<fieldset class="nc-fieldset" aria-describedby="fieldset-standard-description">
    <legend>Legend</legend>
    <p class="nc-hint" id="fieldset-standard-description">
        An optional hint for the fieldset to describe what it is about.
    </p>
</fieldset>
<!-- COMPONENT-END: nc-fieldset -->

Examples

Standard Fieldset

A more practical example with inputs and a box around it for design purposes.

Standard Example

An optional hint for the fieldset to describe what it is about. 

<div class="nc-box -bordered">
    <fieldset aria-describedby="fieldset-standard-description">
        <legend>Standard Example</legend>
        <p class="nc-hint" id="fieldset-standard-description">
            An optional hint for the fieldset to describe what it is about.
        </p>
        <div class="nc-stack">
            <div class="nc-input-field">
                <label for="input" class="nc-stack">
                    <span class="nc-input-label">Label</span>
                    <span class="nc-hint"
                        >Hint is an accessible way to provide additional information that might help
                        the user</span
                    >
                </label>
                <input id="input" class="nc-input" />
            </div>
            <div class="nc-input-field">
                <label for="input2" class="nc-stack">
                    <span class="nc-input-label">Label 2</span>
                    <span class="nc-input-error"
                        >An error is a good indicator of something that went wrong</span
                    >
                </label>
                <input id="input2" class="nc-input" />
            </div>
        </div>
    </fieldset>
</div>
Fieldset for single question pages

You can nest an h1 in the legend like this.

Legend as H1

this is a hint for this fieldset

<fieldset>
    <legend>
        <h1>Legend as H1</h1>
    </legend>
    <p class="nc-hint">this is a hint for this fieldset</p>
    <div class="nc-input-field">
        <label for="input3" class="nc-stack">
            <span class="nc-input-label">Label</span>
            <span class="nc-hint"
                >Hint is an accessible way to provide additional information that might help the
                user</span
            >
        </label>
        <input id="input3" class="nc-input" />
    </div>
</fieldset>
Link to section titled: 02.02: Input Fields

02.02: Input Fields

The classic input with a label and optional hint(s) and error(s).

Rendered

<!-- COMPONENT-START: nc-input-field -->
<div class="nc-input-field">
    <label for="input" class="nc-stack">
        <span class="nc-input-label">Label</span>
        <span class="nc-hint"
            >Hint is an accessible way to provide additional information that might help the
            user</span
        >
        <span class="nc-input-error">Render errors here if there is an issue with the input.</span>
    </label>
    <input id="input" class="nc-input" aria-required="true" autocomplete="" type="text" />
</div>
<!-- COMPONENT-END: nc-input-field -->

Notes

  • Ideally, mark labels and inputs as optional and set aria-required="false"
  • You can set min and max-widths globally using --input-field-min-inline-size and --input-field-max-inline-size

Examples

Checkbox Input

A standard checkbox input.

<!-- COMPONENT-START: nc-input-field: Checkbox -->
<div class="nc-cluster | nc-input-field | nc-checkbox-wrapper">
    <label for="input" class="nc-stack">
        <span class="nc-input-label">Label</span>
        <span class="nc-hint"
            >Hint is an accessible way to provide additional information that might help the
            user</span
        >
        <span class="nc-input-error">Render errors here if there is an issue with the input.</span>
    </label>
    <input
        id="input"
        class="nc-input-checkbox"
        aria-required="true"
        autocomplete=""
        type="checkbox"
    />
</div>
<!-- COMPONENT-END: nc-input-field: Checkbox -->
Date Input

Date Inputs can have a little button next to them to make it easier to set the date. You do have to hook up the logic, though.

<!-- COMPONENT-START: nc-input-field with date -->
<div class="nc-input-field">
    <label for="date-input" class="nc-stack">
        <span class="nc-input-label">Label</span>
    </label>
    <div class="nc-cluster full-width nc-input-date">
        <input
            class="nc-input"
            id="date-input"
            name="date-input"
            aria-required="true"
            autocomplete=""
            type="date"
        />
        <button type="button" class="nc-button">Today</button>
    </div>
    <!-- COMPONENT-END: nc-input-field with date -->
</div>
Range Input

It is nice to display the range value below, we think. You need to keep it in sync yourself though.

{range input value} 
<!-- COMPONENT-START: nc-input-field: Range -->
<div class="nc-input-field">
    <label for="input" class="nc-stack">
        <span class="nc-input-label">Label</span>
    </label>
    <div class="nc-stack full-width -nogap | nc-input-range">
        <input id="input" class="nc-input" aria-required="true" autocomplete="" type="range" />
        <small class="nc-hint">{range input value}</small>
    </div>
</div>
<!-- COMPONENT-END: nc-input-field -->
Select

Selects are useful for when you have more than 5 items, but still a managable amount.

<!-- COMPONENT-START: nc-input-field: Textarea -->
<div class="nc-input-field">
    <label for="input" class="nc-stack">
        <span class="nc-input-label">Label</span>
    </label>
    <select class="nc-select" id="input" name="input" aria-required="input">
        <option value="value 1" selected="true">Value 1</option>
        <option value="value 2">Value 2</option>
        <option value="value 3">Value 3</option>
    </select>
</div>
<!-- COMPONENT-END: nc-input-field: Textarea -->
Textarea

Need more space? Use a textarea.

<!-- COMPONENT-START: nc-input-field: Textarea -->
<div class="nc-input-field">
    <label for="input" class="nc-stack">
        <span class="nc-input-label">Label</span>
    </label>
    <textarea
        id="input"
        class="nc-input nc-textarea"
        aria-required="true"
        autocomplete=""
    ></textarea>
</div>
<!-- COMPONENT-END: nc-input-field: Textarea -->
Link to section titled: 03: Data Display

03: Data Display

Link to section titled: 03.01: Meta List

03.01: Meta List

Display tags and meta data for posts and alike.

Rendered

  • Label:  This is a content
  • Year:  1989
  • Tags:  Science, Fiction
<!-- COMPONENT-START: nc-meta-list -->
<ul class="nc-list-reset nc-cluster -nogap nc-meta-list">
    <li><span class="strong">Label: &nbsp;</span><span>This is a content</span></li>
    <li><span class="strong">Year: &nbsp;</span><span>1989</span></li>
    <li><span class="strong">Tags: &nbsp;</span><span>Science, Fiction</span></li>
</ul>
<!-- COMPONENT-END: nc-meta-list -->
Link to section titled: 03.02: Descriptions List

03.02: Descriptions List

Description lists are a way to organize and explain related information. They’re particularly useful when you need to list and define terms such as in a glossary. (from shopify)

Rendered

Label
This is your content if you want it to be
Short
Very short content
Long
Hey there! How are you doing today? I hope you're having a fantastic time! Just wanted to fill this space with some friendly placeholder text. So here it goes 
<!-- COMPONENT-START: nc-description-list -->
<dl>
    <dt>Label</dt>
    <dd>This is your content if you want it to be</dd>
    <dt>Short</dt>
    <dd>Very short content</dd>
    <dt>Long</dt>
    <dd>
        Hey there! How are you doing today? I hope you're having a fantastic time! Just wanted to
        fill this space with some friendly placeholder text. So here it goes
    </dd>
</dl>
<!-- COMPONENT-END: nc-description-list -->
Link to section titled: 03.03: Tables

03.03: Tables

It's a table. It's good for displaying lots of data in columns.

Rendered

Standard Table
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 
<!-- COMPONENT-START: nc-table -->
<div class="nc-table" role="group" aria-labelledby="table-standard" tabindex="0">
    <table>
        <caption id="table-standard">
            Standard Table
        </caption>
        <thead>
            <tr>
                <th>Table Heading 1</th>
                <th>Table Heading 2</th>
                <th>Table Heading 3</th>
                <th>Table Heading 4</th>
                <th>Table Heading 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Table Footer 1</th>
                <th>Table Footer 2</th>
                <th>Table Footer 3</th>
                <th>Table Footer 4</th>
                <th>Table Footer 5</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- COMPONENT-END: nc-table -->

Notes

  • Make sure all data is visible in all responsive setups. We do that using a scroll.
  • You can change the background-color using --nc-table-background-lch

Examples

Horizontal Table

Sometimes tables make more sense to be horizontal. This is how you do it.

Horizontal Table
Row 1 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Row 2 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Row 3 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Row 4 Header Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 
<!-- COMPONENT-START: nc-table: horizontal -->
<div class="nc-table" role="group" aria-labelledby="table-horizontal" tabindex="0">
    <table>
        <caption id="table-horizontal">
            Horizontal Table
        </caption>
        <tbody>
            <tr>
                <th>Row 1 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th>Row 2 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th>Row 3 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
            <tr>
                <th>Row 4 Header</th>
                <td>Table Cell 1</td>
                <td>Table Cell 2</td>
                <td>Table Cell 3</td>
                <td>Table Cell 4</td>
                <td>Table Cell 5</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- COMPONENT-END: nc-table -->
Link to section titled: 04: Navigation

04: Navigation

Link to section titled: 04.01: Breadcrumbs

04.01: Breadcrumbs

Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy.

Rendered

<!-- COMPONENT-START: nc-breadcrumbs -->
<nav>
    <ol class="nc-list-reset nc-cluster -nogap nc-breadcrumbs">
        <li><a href="#">NordCode</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#" aria-current="page">Lukas</a></li>
    </ol>
</nav>
<!-- COMPONENT-END: nc-breadcrumbs -->

Notes

  • Pay attention to detail here to get the styling just right and the list accessible.