Paperbase components

All icons

Default


<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Active


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--active
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Circle


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--circle
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Square


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--square
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Invert


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--invert
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Square invert


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--invert pb-icon--square
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Dense


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--dense
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Big


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--big
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Large


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--large
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Inline


<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--inline
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>

Default


<div class="pb-list">
            <div class="pb-list_item">
                <div class="pb-list_header">List item 1</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 2</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 3</div>
            </div>
        </div>

List item 1

List item 2

List item 3

With divider


<div class="pb-list pb-list--divider">
            <div class="pb-list_item">
                <div class="pb-list_header">List item 1</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 2</div>
            </div>
            <div class="pb-list_item">
                <div class="pb-list_header">List item 3</div>
            </div>
        </div>

List item 1

List item 2

List item 3

Dividers indented


<div class="pb-list">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_account_circle"/>
</svg>
                <div class="pb-list_header">List item 2</div>
            </div>
            <hr class="pb-divider pb-divider--indent">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_account_circle"/>
</svg>
                <div class="pb-list_header">List item 3</div>
            </div>
        </div>

List item 2

List item 3

With icons


<div class="pb-list">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_image"/>
</svg>
                <div class="pb-list_header">List item 1</div>
            </div>
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_movie"/>
</svg>
                <div class="pb-list_header">List item 2</div>
            </div>
        </div>

List item 1

List item 2

With icons and secondary actions


<div class="pb-list">
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_image"/>
</svg>
                <div class="pb-list_header">List item 1</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--dense
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_message"/>
</svg>
            </div>
            <div class="pb-list_item">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_movie"/>
</svg>
                <div class="pb-list_header">List item 2</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_delete"/>
</svg>
            </div>
        </div>

List item 1

List item 2

All buttons

Default


        <button class="pb-button">
        <span class="pb-button_label">Default</span>
    </button>

Active


        <button class="pb-button pb-button--active">
        <span class="pb-button_label">Active</span>
    </button>

Disabled


        <button class="pb-button pb-button--disabled">
        <span class="pb-button_label">Disabled</span>
    </button>

Raised


        <button class="pb-button pb-button--raised">
        <span class="pb-button_label">Raised</span>
    </button>

Text


        <button class="pb-button pb-button--text">
        <span class="pb-button_label">Text</span>
    </button>

Text active


        <button class="pb-button pb-button--text pb-button--active">
        <span class="pb-button_label">Text active</span>
    </button>

Text disabled


        <button class="pb-button pb-button--text pb-button--disabled">
        <span class="pb-button_label">Text disabled</span>
    </button>

Outline


        <button class="pb-button pb-button--outline">
        <span class="pb-button_label">Outline</span>
    </button>

Outline active


        <button class="pb-button pb-button--outline pb-button--active">
        <span class="pb-button_label">Outline active</span>
    </button>

Outline disabled


        <button class="pb-button pb-button--outline pb-button--disabled">
        <span class="pb-button_label">Outline disabled</span>
    </button>

Icon left


        <button class="pb-button">
        <span class="pb-button_label">Icon left</span>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_arrow_back"/>
</svg>
    </button>

Icon right


        <button class="pb-button pb-button--iconright">
        <span class="pb-button_label">Icon right</span>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_arrow_forward"/>
</svg>
    </button>

Icon only


        <button class="pb-button pb-button--icon">
        <span class="pb-button_label">Icon only</span>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>
    </button>

All chips

Default

With icon

With delete icon

With icon and delete icon

Default

With icon

With delete icon

With icon and delete icon

Default

With icon

With delete icon

With icon and delete icon

Default chip


    <div class="pb-chip">
        <div class="pb-chip_label">Default</div>
    </div>
    <div class="pb-chip pb-chip--active">
        <div class="pb-chip_label">Active</div>
    </div>
    <div class="pb-chip pb-chip--outline">
        <div class="pb-chip_label">Outline</div>
    </div>
    <div class="pb-chip pb-chip--square">
        <div class="pb-chip_label">Square</div>
    </div>

Default

Active

Outline

Square

Chip with icon


    <div class="pb-chip">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>
        <div class="pb-chip_label">With icon</div>
    </div>

With icon

Chip with delete icon


    <div class="pb-chip">
        <div class="pb-chip_label">With delete icon</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--invert
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_close"/>
</svg>
    </div>

With delete icon

Chip with icon and delete icon


    <div class="pb-chip">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_filter_list"/>
</svg>
        <div class="pb-chip_label">With icon and delete icon</div>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--invert
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_close"/>
</svg>
    </div>

With icon and delete icon

Bottomnavigation


<div class="pb-bottomnav">
            <div class="pb-flex">
                <div class="pb-flexitem pb-is-center">
                    <div class="pb-bottomnav_button pb-bottomnav_button--active">
<svg viewbox="0 0 24 24" class="pb-icon
 pb-icon--bottomnav
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_mail"/>
</svg>
                        <label class="pb-bottomnav_label">Action 1</label>
                    </div>
                </div>
                <div class="pb-flexitem pb-is-center">
                    <div class="pb-bottomnav_button">
<svg viewbox="0 0 24 24" class="pb-icon
 pb-icon--bottomnav
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_search"/>
</svg>
                        <label class="pb-bottomnav_label">Action 2</label>
                    </div>
                </div>
                <div class="pb-flexitem pb-is-center">
                    <div class="pb-bottomnav_button">
<svg viewbox="0 0 24 24" class="pb-icon
 pb-icon--bottomnav
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_print"/>
</svg>
                        <label class="pb-bottomnav_label">Action 3</label>
                    </div>
                </div>
            </div>
        </div>

Action 1

Action 2

Action 3

Stepper


<div class="pb-stepper">
    <div class="pb-stepper_step">
        <div class="pb-stepper_step-circle">1</div>
        <label class="pb-stepper_step-label">Step 1</label>
    </div>
    <div class="pb-stepper_step">
        <div class="pb-stepper_step-circle">2</div>
        <label class="pb-stepper_step-label">Step 2</label>
    </div>
    <div class="pb-stepper_step pb-stepper_step--active">
        <div class="pb-stepper_step-circle">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_done"/>
</svg>
</div>
        <label class="pb-stepper_step-label">Step 3</label>
    </div>
</div>

1

Step 1

2

Step 2

Step 3

Tabs


<nav class="pb-tabs pb-theme_primary">
            <button class="pb-tabs_tab pb-tabs_tab--active">Tab item 1</button>
            <button class="pb-tabs_tab">Tab item 2</button>
            <button class="pb-tabs_tab">Tab item 3</button>
        </nav>

Notifications


<div class="pb-snackbar pb-theme_dark">
        <div class="pb-list">
            <div class="pb-list_item pb-flexitem">
                <div class="pb-list_multiline">
                    <div class="pb-list_header2">Snackbar with action.</div>
                </div>
                <a href="#" class="pb-button pb-button--text pb-flexitem--center">Action</a>
            </div>
        </div>
    </div>

Snackbar with action

Action


<div class="pb-toast">
        <div class="pb-flex">
            <div class="pb-flexitem pb-flexitem--center">
                Simple toast.
            </div>
        </div>
    </div>

Simple toast.

Tables


<table class="pb-table pb-color_content">
            <caption>Enterprise</caption>
            <thead>
            <tr>
                <th>Nr.</th>
                <th>Name.</th>
                <th>Position</th>
            </tr>
            </thead>
            <tr>
                <td>1</td>
                <td>Picard</td>
                <td>Captain</td>
            </tr>
        </table>

Enterprise
Nr.	Name.	Position
1	Picard	Captain
2	Ryker	Number two
3	Worf	PITA

Dialogs


<div class="pb-dialog">[some code ...]</div>

Example of a simple modal dialog.

Bottomsheets


<div class="pb-bottomsheet">
            [... some code]
        </div>

Example of a simple bottomsheet.