[ctrl+alt+n]
Cards
Assignment Card
Media Card
Slide Card
Thread Card
Controls
Checkbox
Flat Button
Floating Action Button
Percent
Radio Button
Raised Button
Search
Select Input
Text Area
Text Field
Toggle Switch
Examples
Page example threads
Page layout example
Intro
Components
Action Row
Assignment Card
Button Bar
Checkbox
Chip
Colors
Curtain
Dialog
Drop Zone
Fat Icon
Flat Button
Floating Action Button
Icon Button
Large Dialog
Media Card
Media Overlay
Menu
Navigation Bar
Page example threads
Page layout
Page layout example
Panel Layout
Percent
Popout
Process Indicator
Progress Indicator
Radio Button
Raised Button
Search
Select Input
Separator
Single line list
Slide Card
Stepper
Tabs
Text Area
Text Field
Thread Card
Thread grid
Three line list
Toast
Toggle Switch
Top App Bar (regular)
Two line list
Typography
Search
Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Page example threads@1.0.0

[ctrl+alt+o]
alpha
example
layout
page
<div class="c-top-app-bar--dark">

  <div class="c-top-app-bar__left">
    <div class="c-top-app-bar__logo">
      <i class="material-icons">arrow_back</i>
    </div>
    <h1 class="c-top-app-bar__title">
      Foo Bar
    </h1>
    <div class="c-top-app-bar__actions">
      <button class="c-icon-button--light">
        <i class="c-icon-button__icon--dark material-icons">edit</i>
        <i class="c-icon-button__icon--dark material-icons">arrow_drop_down</i>
      </button>
    </div>
  </div>

  <div class="c-top-app-bar__right">
    <div class="c-top-app-bar__notifications">
        <div class="c-top-app-bar__notifications-container">
            <p>3</p>
        </div>
    </div>
    <div class="c-top-app-bar__profile-menu material-icons">account_circle</div>
  </div>
</div>
<div class="c-stepper--dark">
    <div class="c-stepper__step">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p class="material-icons">mode_edit</p>
            </div>
        </div>
        <p>Choose activity</p>
        <hr />
    </div>
    <div class="c-stepper__step--active">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>2</p>
            </div>
        </div>
        <p>Choose options</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>3</p>
            </div>
        </div>
        <p>Choose content</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>4</p>
            </div>
        </div>
        <p>Choose assessment</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>5</p>
            </div>
        </div>
        <p>Finalize and publish</p>
        <hr />
    </div>
</div>
<div class="o-page-layout">
    <div class="o-page-layout__cell--1">
        <div class="c-search">
            <div class="c-search__icon material-icons">search</div>
            <input type="text" class="c-search__native-control" placeholder="Search" />
        </div>
    </div>
    <div class="o-page-layout__cell--4">
        <div class="c-grid">
            <div class="c-thread-card">
                <div class="c-thread-card__image">
                    <img src="https://source.unsplash.com/random/344x208" />
                </div>
                <div class="c-thread-card__bottom">
                    <p class="c-thread-card__bottom-title">Dickens, the early years</p>
                    <div class="c-thread-card__bottom-button">
                        <button class="c-button-flat--dark">
                            Preview
                        </button>
                    </div>
                    <div class="c-thread-card__bottom-radio">
                        <div class="c-radio-container">
                            <div class="c-radio">
                                <input class="c-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                                <div class="c-radio__background">
                                    <div class="c-radio__outer-circle"></div>
                                    <div class="c-radio__inner-circle"></div>
                                </div>
                            </div>
                            <label for="radio-1" class="c-radio__label"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-thread-card">
                <div class="c-thread-card__image">
                    <img src="https://source.unsplash.com/random/344x208" />
                </div>
                <div class="c-thread-card__bottom">
                    <p class="c-thread-card__bottom-title">Dickens, the early years</p>
                    <div class="c-thread-card__bottom-button">
                        <button class="c-button-flat--dark">
                            Preview
                        </button>
                    </div>
                    <div class="c-thread-card__bottom-radio">
                        <div class="c-radio-container">
                            <div class="c-radio">
                                <input class="c-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                                <div class="c-radio__background">
                                    <div class="c-radio__outer-circle"></div>
                                    <div class="c-radio__inner-circle"></div>
                                </div>
                            </div>
                            <label for="radio-1" class="c-radio__label"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-thread-card">
                <div class="c-thread-card__image">
                    <img src="https://source.unsplash.com/random/344x208" />
                </div>
                <div class="c-thread-card__bottom">
                    <p class="c-thread-card__bottom-title">Dickens, the early years</p>
                    <div class="c-thread-card__bottom-button">
                        <button class="c-button-flat--dark">
                            Preview
                        </button>
                    </div>
                    <div class="c-thread-card__bottom-radio">
                        <div class="c-radio-container">
                            <div class="c-radio">
                                <input class="c-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                                <div class="c-radio__background">
                                    <div class="c-radio__outer-circle"></div>
                                    <div class="c-radio__inner-circle"></div>
                                </div>
                            </div>
                            <label for="radio-1" class="c-radio__label"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-thread-card">
                <div class="c-thread-card__image">
                    <img src="https://source.unsplash.com/random/344x208" />
                </div>
                <div class="c-thread-card__bottom">
                    <p class="c-thread-card__bottom-title">Dickens, the early years</p>
                    <div class="c-thread-card__bottom-button">
                        <button class="c-button-flat--dark">
                            Preview
                        </button>
                    </div>
                    <div class="c-thread-card__bottom-radio">
                        <div class="c-radio-container">
                            <div class="c-radio">
                                <input class="c-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                                <div class="c-radio__background">
                                    <div class="c-radio__outer-circle"></div>
                                    <div class="c-radio__inner-circle"></div>
                                </div>
                            </div>
                            <label for="radio-1" class="c-radio__label"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-thread-card">
                <div class="c-thread-card__image">
                    <img src="https://source.unsplash.com/random/344x208" />
                </div>
                <div class="c-thread-card__bottom">
                    <p class="c-thread-card__bottom-title">Dickens, the early years</p>
                    <div class="c-thread-card__bottom-button">
                        <button class="c-button-flat--dark">
                            Preview
                        </button>
                    </div>
                    <div class="c-thread-card__bottom-radio">
                        <div class="c-radio-container">
                            <div class="c-radio">
                                <input class="c-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                                <div class="c-radio__background">
                                    <div class="c-radio__outer-circle"></div>
                                    <div class="c-radio__inner-circle"></div>
                                </div>
                            </div>
                            <label for="radio-1" class="c-radio__label"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-thread-card">
                <div class="c-thread-card__image">
                    <img src="https://source.unsplash.com/random/344x208" />
                </div>
                <div class="c-thread-card__bottom">
                    <p class="c-thread-card__bottom-title">Dickens, the early years</p>
                    <div class="c-thread-card__bottom-button">
                        <button class="c-button-flat--dark">
                            Preview
                        </button>
                    </div>
                    <div class="c-thread-card__bottom-radio">
                        <div class="c-radio-container">
                            <div class="c-radio">
                                <input class="c-radio__native-control" type="radio" id="radio-1" name="radios" checked>
                                <div class="c-radio__background">
                                    <div class="c-radio__outer-circle"></div>
                                    <div class="c-radio__inner-circle"></div>
                                </div>
                            </div>
                            <label for="radio-1" class="c-radio__label"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>