Mediawiki UI

# Wikimedia UI

Back to menu

## Getting started

Step one

Download a starter html
Then, open with Sublime code editor

Step two

## Iconography

Example

`<wiki-icon icon="unstar"></wiki-icon>` generates

Interface icons

Editing icons

Media icons

Messaging icons

References icons

Moderation icons

User icons

Accessibility icons

## Layouts

Layout 1

Mark Twain Public domain - Mathew Brady via Wikimedia Commons February 7, 1871
Nikola Tesla Public domain - Napoleon Sarony via Wikimedia Commons A photograph image of Nikola Tesla (1856-1943) at age 34.
Hypatia Public domain - Hulton Archive/Getty Images via Wikimedia Commons An actress, possibly Mary Anderson, in the title role of the play Hypatia, circa 1900.

Code snippet

    <div class="container">
      <div class="row">

        <!-- Card 1 -->
        <div class="col-sm-12 col-sm-4">
          <wiki-card orientation="portrait" img-src="http://bit.ly/1G2ydaH">
            <wiki-card-title>
              Mark Twain
            </wiki-card-title>
            <wiki-card-label icon='wikiglyph-public-domain'>
              Public domain - Mathew Brady via Wikimedia Commons
            </wiki-card-label>
            <wiki-card-content>
              February 7, 1871
            </wiki-card-content>
          </wiki-card>
        </div>

        <!-- Card 2 -->
        <div class="col-sm-12 col-sm-4">
          <wiki-card orientation="portrait" img-src="http://bit.ly/1RDV4dA">
            <wiki-card-title>
              Nikola Tesla
            </wiki-card-title>
            <wiki-card-label icon='wikiglyph-public-domain'>
              Public domain - Napoleon Sarony via Wikimedia Commons
            </wiki-card-label>
            <wiki-card-content>
              A photograph image of Nikola Tesla (1856-1943) at age 34.
            </wiki-card-content>
          </wiki-card>
        </div>

        <!-- Card 3 -->
        <div class="col-sm-12 col-sm-4">
          <wiki-card orientation="portrait" img-src="http://bit.ly/1Mo3Vvy">
            <wiki-card-title>
              Hypatia
            </wiki-card-title>
            <wiki-card-label icon='wikiglyph-public-domain'>
              Public domain - Hulton Archive/Getty Images via Wikimedia Commons
            </wiki-card-label>
            <wiki-card-content>
              An actress, possibly Mary Anderson, in the title role of the play Hypatia, circa 1900.
            </wiki-card-content>
          </wiki-card>
        </div>
      </div>
    </div>

Layout 2

#### Lorem ipsum

Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa.

#### Dolor sit amet

Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa ut sem efficitur. Pellentesque pulvinar elit cursus.

#### Consectetur

Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa ut sem efficitur.

Code snippet

    <div class="container">

      <!-- Image -->
      <div class="row">

        <div class="col-md-12">
          <img src="http://bit.ly/22LnRCw" class="img-responsive" alt="Responsive image">
        </div>

      </div>

      <!-- 3-column text -->
      <div class="row">

        <div class="col-sm-2 col-md-4">
          <h4 class="text-center">Lorem ipsum</h4>
          <p class="text-center">Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa.</p>
        </div>

        <div class="col-sm-12 col-md-4">
          <h4 class="text-center">Dolor sit amet</h4>
          <p class="text-center">Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa ut sem efficitur. Pellentesque pulvinar elit cursus.</p>
        </div>

        <div class="col-sm-12 col-md-4">
          <h4 class="text-center">Consectetur</h4>
          <p class="text-center">Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa ut sem efficitur.</p>
        </div>

      </div>

    </div>

Layout 3

##### Martin Luther King, Jr. and Coretta Scott King.

Lorem ipsum dolor sit amet, consctetur adipiscing elit. Fusce mauris urna, vestibulum quis malesuada ac, imperdiet ut sem. Suspendisse semper diam non lacus convallis aliquet. Aliquam congue dui in nunc fringilla, ac porttitor dui lobortis. Donec eu pharetra quam, sit amet placerat ipsum. In tristique, augue vitae molestie gravida, dui metus consequat dui, vel luctus nisi quam in massa. Quisque euismod interdum diam eget feugiat. Mauris eu sagittis augue, in eleifend dolor. Nam ac magna sit amet ex pharetra tincidunt. Pellentesque lacinia felis at quam posuere bibendum. In elementum urna nisl, vestibulum molestie quam pharetra ac. Fusce egestas massa in tincidunt ullamcorper. Aenean orci leo, laoreet vitae felis et, interdum rutrum ipsum. Vestibulum quis ex diam.
Author Herman Hiller (1964)
In a ligula sed ligula vestibulum ultricies ac quis turpis. Morbi dictum convallis convallis. Donec quis tellus in risus tristique pellentesque. Vivamus gravida sem nunc, quis vestibulum enim auctor non. Fusce bibendum enim sed tortor faucibus blandit. Ut in mauris cursus, imperdiet urna blandit, ullamcorper felis. Nulla tincidunt, erat at blandit rutrum, elit diam viverra metus, nec venenatis ligula turpis nec erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris urna, vestibulum quis malesuada ac, imperdiet ut sem. Suspendisse semper diam non lacus convallis aliquet. Aliquam congue dui in nunc fringilla, ac porttitor dui lobortis. Donec eu pharetra quam, sit amet placerat ipsum. In tristique, augue vitae molestie gravida, dui metus consequat dui, vel luctus nisi quam in massa. Quisque euismod interdum diam eget feugiat. Mauris eu sagittis augue, in eleifend dolor. Nam ac magna sit amet ex pharetra tincidunt. Pellentesque lacinia felis at quam posuere bibendum. In elementum urna nisl, vestibulum molestie quam pharetra ac. Fusce egestas massa in tincidunt ullamcorper. Aenean orci leo, laoreet vitae felis et, interdum rutrum ipsum. Vestibulum quis ex diam.

Code snippet

    <div class="container">
      <div class="row">

        <!-- Left column text -->
        <div class="col-sm-12 col-sm-4">
          <h5>Martin Luther King, Jr. and Coretta Scott King.</h5>
          <p>Lorem ipsum dolor sit amet, consctetur adipiscing elit. Fusce mauris urna, vestibulum quis malesuada ac, imperdiet ut sem. Suspendisse semper diam non lacus convallis aliquet. Aliquam congue dui in nunc fringilla, ac porttitor dui lobortis. Donec eu pharetra quam, sit amet placerat ipsum. In tristique, augue vitae molestie gravida, dui metus consequat dui, vel luctus nisi quam in massa. Quisque euismod interdum diam eget feugiat. Mauris eu sagittis augue, in eleifend dolor. Nam ac magna sit amet ex pharetra tincidunt. Pellentesque lacinia felis at quam posuere bibendum. In elementum urna nisl, vestibulum molestie quam pharetra ac. Fusce egestas massa in tincidunt ullamcorper. Aenean orci leo, laoreet vitae felis et, interdum rutrum ipsum. Vestibulum quis ex diam.</p>
        </div>

        <!-- Center column -->
        <div class="col-sm-12 col-sm-4">
          <img src="http://bit.ly/1r9aA9h" class="img-responsive" alt="Responsive image"> <!-- Image -->
          <small><abbr title="attribute">Author Herman Hiller (1964)</abbr></small> <!-- Photo credit -->
          <p>In a ligula sed ligula vestibulum ultricies ac quis turpis. Morbi dictum convallis convallis. Donec quis tellus in risus tristique pellentesque. Vivamus gravida sem nunc, quis vestibulum enim auctor non. Fusce bibendum enim sed tortor faucibus blandit. Ut in mauris cursus, imperdiet urna blandit, ullamcorper felis. Nulla tincidunt, erat at blandit rutrum, elit diam viverra metus, nec venenatis ligula turpis nec erat.</p>
        </div>

        <!-- Left column text -->
        <div class="col-sm-12 col-sm-4">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris urna, vestibulum quis malesuada ac, imperdiet ut sem. Suspendisse semper diam non lacus convallis aliquet. Aliquam congue dui in nunc fringilla, ac porttitor dui lobortis. Donec eu pharetra quam, sit amet placerat ipsum. In tristique, augue vitae molestie gravida, dui metus consequat dui, vel luctus nisi quam in massa. Quisque euismod interdum diam eget feugiat. Mauris eu sagittis augue, in eleifend dolor. Nam ac magna sit amet ex pharetra tincidunt. Pellentesque lacinia felis at quam posuere bibendum. In elementum urna nisl, vestibulum molestie quam pharetra ac. Fusce egestas massa in tincidunt ullamcorper. Aenean orci leo, laoreet vitae felis et, interdum rutrum ipsum. Vestibulum quis ex diam.</p>
        </div>

      </div>
    </div>

## Buttons

Buttons

Code snippet

    <button is='wiki-Button' button-type="default" button-size="sm" type="submit" >
      Extra-small button
    </button>

    <button is='wiki-Button' button-type="primary" button-size="sm" type="submit" >
      Small button
    </button>

    <button is='wiki-Button' button-type="success" type="submit" >
      Regular button
    </button>

    <button is='wiki-Button' icon='wikiglyph-trash' button-type="danger" button-size="lg" type="submit">
      Large icon button
    </button>

Colors

Change button type within `button-type="..."`

- `default` white
- `primary` blue
- `success` green
- `warning` orange
- `danger` red

Sizes

Change the size within `button-size="..."`

- `sm` extra-small
- `sm` small
- `lg` large

Add an icon

Add `icon='wikiglyph-star'`

Button groups

1 2 3 4
Button 1 Button 2
Button 1
A dropdown

Code snippet

    <!-- Text only -->

    <div class="btn-toolbar">
      <div class="btn-group">
       <a href="#" class="btn btn-default">1</a>
       <a href="#" class="btn btn-default">2</a>
       <a href="#" class="btn btn-default">3</a>
       <a href="#" class="btn btn-default">4</a>
     </div>
    </div>

    <!-- Icon only -->

    <div class="btn-toolbar">
      <div class="btn-group">

        <a href="#" class="btn btn-default"> <!-- First button -->
          <wiki-icon icon="stripe-flow"></wiki-icon>
        </a>

        <a href="#" class="btn btn-default"> <!-- Second button -->
          <wiki-icon icon="view-details"></wiki-icon>
        </a>

        <a href="#" class="btn btn-default"> <!-- Third button -->
          <wiki-icon icon="view-compact"></wiki-icon>
        </a>

      </div>
    </div>

    <!-- Labeled icon -->

    <div class="btn-toolbar">
      <div class="btn-group">

        <a href="#" class="btn btn-default"> <!-- First button -->
          <wiki-icon icon="map-pin"></wiki-icon>
          Button 1
        </a>

        <a href="#" class="btn btn-default"> <!-- Second button -->
          <wiki-icon icon="block"></wiki-icon>
          Button 2
        </a>
      </div>
    </div>

    <!-- with dropdown -->

    <div class="btn-toolbar">
      <div class="btn-group">

        <a href="#" class="btn btn-default"> <!-- First button -->
          <wiki-icon icon="edit"></wiki-icon>
          Button 1
        </a>

        <div class="btn-group"> <!-- Second button with dropdown -->
          <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            A dropdown
            <wiki-icon icon="caret-down"></wiki-icon>
          </a>
          <ul class="dropdown-menu"> <!-- Dropdown menu -->
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
          </ul>
        </div>

      </div>
    </div>

## Dropdown

Dropdowns

Button dropdown
Button dropdown

Button + Dropdown

Code snippet

    <!-- Regular dropdown -->

    <div class="btn-group">

      <a href="" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Button dropdown
        <wiki-icon icon="caret-down"></wiki-icon>
      </a>

      <ul class="dropdown-menu"> <!-- dropdown menu -->
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
      </ul>

    </div>

    <!-- Primary dropdown with menu separator -->

    <div class="btn-group">

      <a href="" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Button dropdown
        <wiki-icon icon="caret-down"></wiki-icon>
      </a>

      <ul class="dropdown-menu"> <!-- dropdown menu -->
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li role="separator" class="divider"></li> <!-- menu separator -->
        <li><a href="#">Option 4</a></li>
      </ul>

    </div>

Add a divider

Add `<li role="separator" class="divider"></li>`

## Form elements

Input groups

wikipedia.org
$ .00

Code snippet

    <!-- Icon + text field -->

    <div class="input-group">

      <span class="input-group-addon" id="basic-addon1"> <!-- Icon -->
        <wiki-icon icon="magnifying-glass"></wiki-icon>
      </span>

      <input type="text" placeholder="Search Wikipedia" class="form-control" aria-describedby="..."> <!-- Text field -->

    </div>

    <!-- Text field + text -->

    <div class="input-group">

      <input type="text" class="form-control" placeholder="Language code" aria-describedby="..."> <!-- Text field -->
      <span class="input-group-addon" id="basic-addon2">wikipedia.org</span> <!-- Text -->

    </div>

    <!-- EXAMPLE: Icon + text field + text -->

    <div class="input-group">

      <span class="input-group-addon">$</span> <!-- Icon -->
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <!-- Text field -->
      <span class="input-group-addon">.00</span> <!-- Text -->

    </div>

    <!-- Text field + button -->

    <div class="input-group">

      <input type="text" class="form-control" placeholder="Search Wikipedia"> <!-- Text field -->

      <span class="input-group-btn">
        <button class="btn btn-primary" type="button"> <!-- Button -->
          Search
        </button>
      </span>

    </div>

    <!-- Icon buttons + Text field -->

    <div class="input-group">

      <div class="input-group-btn">
        <button type="button" class="btn btn-default" aria-label="Regular text size"> <!-- Icon 1 -->
          <wiki-icon icon="large-text"></wiki-icon>
        </button>

        <button type="button" class="btn btn-default" aria-label="Small text size"> <!-- Icon 2 -->
          <wiki-icon icon="smaller-text"></wiki-icon>
        </button>
      </div>

      <input type="text" class="form-control" aria-label="..."> <!-- Text field -->

    </div>

    <!-- Text field + icon button + button -->

    <div class="input-group">

      <input type="text" class="form-control" aria-label="..."> <!-- Text field -->

      <div class="input-group-btn">
        <button type="button" class="btn btn-default" aria-label="Add image"> <!-- Icon button -->
          <wiki-icon icon="image-add"></wiki-icon>
        </button>

        <button type="button" class="btn btn-success"> <!-- Button -->
          Submit
        </button>
      </div>

    </div>

    <!-- Dropdown + text field -->

    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <!-- Dropdown -->
          Search in Wikipedia
          <wiki-icon icon="caret-down"></wiki-icon>
        </button>

        <ul class="dropdown-menu"> <!-- Dropdown menu -->
          <li><a href="#">Wikimedia Commons</a></li>
          <li><a href="#">Wiktionary</a></li>
          <li><a href="#">Wikiquote</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">MediaWiki</a></li>
        </ul>
      </div>

      <input type="text" class="form-control" aria-label="..."> <!-- Text field -->

    </div>

    <!-- Text field + dropdown -->

    <div class="input-group">

      <input type="text" class="form-control" aria-label="..."> <!-- Text field -->

      <div class="input-group-btn">

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <wiki-icon icon="caret-down"></wiki-icon>
        </button>

        <ul class="dropdown-menu dropdown-menu-right"> Dropdown menu
          <li><a href="">Option 1</a></li>
          <li><a href="">Option 2</a></li>
          <li><a href="">Option 3</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="">Option 4</a></li>
        </ul>

      </div>

    </div>

Input sizes

The default size is regular. See example on how to change input sizes.

- `btn-group-sm` small
- `btn-group-lg` large

## Navigation bar

Light theme

Dark theme

Replace `navbar-default` to `navbar-inverse`

Code snippet

    <!-- Navigation bar -->

    <nav class="navbar navbar-default">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Wikimedia</a> <!-- Brand name -->

      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">
          <li><a href="#">Link <span class="sr-only">(current)</span></a></li> <!-- First link -->
          <li><a href="#">Link</a></li> <!-- Second link -->
          <li class="dropdown"> <!-- Dropdown -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu"> <!-- Dropdown menu -->
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>

      </div>
    </nav>

    <!-- Dark theme navigation bar -->

    <nav class="navbar navbar-default">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Wikimedia</a> <!-- Brand name -->

      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">
          <li><a href="#">Link <span class="sr-only">(current)</span></a></li> <!-- First link -->
          <li><a href="#">Link</a></li> <!-- Second link -->
          <li class="dropdown"> <!-- Dropdown -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu"> <!-- Dropdown menu -->
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>

      </div>
    </nav>

Navigation bar with links

Code snippet

    <nav class="navbar navbar-default">

      <div class="navbar-header">
        <a class="navbar-brand" href="">Wikimedia</a> <!-- Brand name -->
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <p class="navbar-text navbar-right">

          <a href="" class="navbar-link">
            <wiki-icon icon="user-avatar"></wiki-icon> <!-- Link 1 icon -->
            Violetto <!-- Link 1 -->
          </a>
          <a href="" class="navbar-link">
            Talk page <!-- Link 2 -->
          </a>
          <a href="" class="navbar-link">
            Contributions <!-- Link 3 -->
          </a>

        </p>
      </div>

    </nav>

## Tabs

Basic tabs

Tabs with dropdown

Code snippet

    <!-- Basic tabs -->

    <ul class="nav nav-tabs">

      <li role="presentation" class="active">
        <a href="#">Tab 1</a>
      </li>
      <li role="presentation">
        <a href="#">Tab 2</a>
      </li>
      <li role="presentation">
        <a href="#">Tab 3</a>
      </li>

    </ul>

    <!-- Tabs with dropdown -->

    <ul class="nav nav-tabs">

      <li role="presentation" class="active">
        <a href="">Tab 1</a>
      </li>
      <li role="presentation">
        <a href="">Tab 2</a>
      </li>
      <li role="presentation">
        <a href="">Tab 3</a>
      </li>

      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <wiki-icon icon='caret-down'></wiki-icon>
        </a>

        <ul class="dropdown-menu">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
        </ul>
      </li>

    </ul>

## Pills

Basic pills

Pills with dropdown

Full-width pills

Add `nav-justified`

Code snippet

    <!-- Basic pills -->

    <ul class="nav nav-pills">

      <li role="presentation" class="active">
        <a href="">Pill 1</a>
      </li>
      <li role="presentation">
        <a href="">Pill 2</a>
      </li>
      <li role="presentation">
        <a href="">Pill 3</a>
      </li>
      <li role="presentation">
        <a href="#">Pill 4</a>
      </li>

    </ul>

    <!-- Pills with dropdown -->

    <ul class="nav nav-pills">

      <li role="presentation" class="active">
        <a href="">Pill 1</a>
      </li>
      <li role="presentation">
        <a href="">Pill 2</a>
      </li>
      <li role="presentation">
        <a href="">Pill 3</a>
      </li>
      <li role="presentation">
        <a href="#">Pill 4</a>
      </li>

      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <wiki-icon icon="caret-down"></wiki-icon>
        </a>
        <ul class="dropdown-menu">
          <li><a href="">Option 1</a></li>
          <li><a href="">Option 2</a></li>
          <li><a href="">Option 3</a></li>
        </ul>
      </li>

    </ul>

    <!-- Basic pills -->

    <ul class="nav nav-pills nav-justified">

      <li role="presentation" class="active">
        <a href="">Pill 1</a>
      </li>
      <li role="presentation">
        <a href="">Pill 2</a>
      </li>
      <li role="presentation">
        <a href="">Pill 3</a>
      </li>
      <li role="presentation">
        <a href="#">Pill 4</a>
      </li>

    </ul>

## Breadcrumb

Basic breadcrumb

Code snippet

    <ol class="breadcrumb">

      <li><a href="">Home</a></li>
      <li><a href="">Library</a></li>
      <li class="active">Data</li>

    </ol>

## Pagination

Basic pagination

Code snippet

    <nav>
      <ul class="pagination">

        <li>
          <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <!-- Disabled previous button -->
        </li>

        <li class="active"><a href="#">1</a></li> <!-- Currently selected page -->
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>

        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> <!-- Next button -->

      </ul>
    </nav>

Pager

Edge pagers

Code snippet

    <!-- Pager pagers -->
    <nav>
      <ul class="pager">
        <li><a href="">Previous</a></li>
        <li><a href="">Next</a></li>
      </ul>
    </nav>

    <!-- Edge pagers -->
    <nav>
      <ul class="pager">
        <li class="previous disabled"><a href=""><span aria-hidden="true">←</span> Older</a></li> <!-- Disabled older button -->
        <li class="next"><a href="">Newer <span aria-hidden="true">→</span></a></li>
      </ul>
    </nav>

## Badges

Badge with pill navigation

Badge with a link

Inbox 42

Insert `<span class="badge">...</span>` within `<a></a>`

Code snippet

    <!-- badges with pill navigation -->

    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active">
        <a href="#">Home <span class="badge">42</span></a>
      </li>

      <li role="presentation">
        <a href="#">Profile</a>
      </li>

      <li role="presentation">
        <a href="#">Messages <span class="badge">3</span></a>
      </li>
    </ul>

    <!-- badges with link -->

    <a href="">Inbox <span class="badge">42</span></a>

## Lists

Basic list

Title 1 Description or secondary information for Title 1 Title 2 Description or secondary information for Title 2 Title 3 Description or secondary information for Title 3 Title 4 Description or secondary information for Title 3
OCT 2015 Title 1 Description or secondary information for Title 1 NOV 2015 Title 2 Description or secondary information for Title 2 DEC 2015 Title 3 Description or secondary information for Title 3

Code snippet

    <!-- Basic list -->

    <wiki-list>

      <wiki-list-item>
        <wiki-list-title> Title 1 </wiki-list-title>
        <wiki-list-content> Description or secondary information for Title 1 </wiki-list-content>
      </wiki-list-item>

      <wiki-list-item>
        <wiki-list-title> Title 2 </wiki-list-title>
        <wiki-list-content> Description or secondary information for Title 2</wiki-list-content>
      </wiki-list-item>

      <wiki-list-item>
        <wiki-list-title> Title 3 </wiki-list-title>
        <wiki-list-content> Description or secondary information for Title 3 </wiki-list-content>
      </wiki-list-item>

      <wiki-list-item>
        <wiki-list-title> Title 4 </wiki-list-title>
        <wiki-list-content> Description or secondary information for Title 3 </wiki-list-content>
      </wiki-list-item>

    </wiki-list>

    <!-- Basic list 2 -->

    <wiki-list>

      <wiki-list-item>
        <wiki-list-sub-title> OCT 2015 </wiki-list-sub-title>
        <wiki-list-title> Title 1 </wiki-list-title>
        <wiki-list-content> Description or secondary information for Title 1 </wiki-list-content>
      </wiki-list-item>

      <wiki-list-item>
        <wiki-list-sub-title> NOV 2015 </wiki-list-sub-title>
        <wiki-list-title> Title 2 </wiki-list-title>
        <wiki-list-content> Description or secondary information for Title 2 </wiki-list-content>
      </wiki-list-item>

      <wiki-list-item>
        <wiki-list-sub-title> DEC 2015 </wiki-list-sub-title>
        <wiki-list-title> Title 3 </wiki-list-title>
        <wiki-list-content> Description or secondary information for Title 3 </wiki-list-content>
      </wiki-list-item>

    </wiki-list>

List content
Title
`<wiki-list-title>...</wiki-list-title>`
Sub-title
`<wiki-list-sub-title>...</wiki-list-sub-title>`
Content
`<wiki-list-content>...</wiki-list-content>`
Add image

Add `img-src="..."` to `<wiki-list-item img-src="...">`

Complex list

Image label Image label 2 Image label 3 Image label 4
OCT 2015 Title 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor felis vitae elit rutrum, eget mollis risus laoreet. NOV 2015 Title 2 Cras augue sem, lacinia sit amet sem eu, vehicula fringilla mi. Aenean tincidunt cursus lacinia. Mauris consectetur lectus id erat lacinia, at volutpat purus congue. DEC 2015 Title 3 Nullam nec egestas massa. Vivamus egestas dictum efficitur. Mauris eu nisi auctor, facilisis magna nec, maximus ipsum. In rutrum auctor venenatis.

Code snippet

    <!-- Complex list -->
    <wiki-list>

      <wiki-list-item img-src="http://bit.ly/212gvt9"> <!-- Image link -->
        <wiki-list-content> Image label </wiki-list-content> <!-- List item 1 -->
      </wiki-list-item>

      <wiki-list-item img-src="http://bit.ly/1U8BoC4">
        <wiki-list-content> Image label 2</wiki-list-content>
      </wiki-list-item>

      <wiki-list-item img-src="http://bit.ly/1UlMb86">
        <wiki-list-content> Image label 3 </wiki-list-content>
      </wiki-list-item>

      <wiki-list-item img-src="http://bit.ly/1U8B3Q2">
        <wiki-list-content> Image label 4 </wiki-list-content>
      </wiki-list-item>

    </wiki-list>

    <!-- Complex list 2 -->
    <wiki-list>

      <wiki-list-item href="#" img-src="http://bit.ly/1UCsKdW"> <!-- Image link -->
        <wiki-list-sub-title> OCT 2015 </wiki-list-sub-title>
        <wiki-list-title> Title 1 </wiki-list-title>
        <wiki-list-content> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor felis vitae elit rutrum, eget mollis risus laoreet. </wiki-list-content>
      </wiki-list-item>

      <wiki-list-item href="#" img-src="http://bit.ly/1r9pb4z">
        <wiki-list-sub-title> NOV 2015 </wiki-list-sub-title>
        <wiki-list-title> Title 2 </wiki-list-title>
        <wiki-list-content> Cras augue sem, lacinia sit amet sem eu, vehicula fringilla mi. Aenean tincidunt cursus lacinia. Mauris consectetur lectus id erat lacinia, at volutpat purus congue.</wiki-list-content>
      </wiki-list-item>

      <wiki-list-item href="#" img-src="http://bit.ly/1ZqDFsF">
        <wiki-list-sub-title> DEC 2015 </wiki-list-sub-title>
        <wiki-list-title> Title 3 </wiki-list-title>
        <wiki-list-content> Nullam nec egestas massa. Vivamus egestas dictum efficitur. Mauris eu nisi auctor, facilisis magna nec, maximus ipsum. In rutrum auctor venenatis.</wiki-list-content>
      </wiki-list-item>

    </wiki-list>

Button list

Button list with badges

- 14 Cras justo odio
- 1 Morbi leo risus
- 100 Vestibulum at eros

Code snippet

    <!-- Button list -->
    <div class="list-group">

      <button type="button" class="list-group-item"> Cras justo odio </button>
      <button type="button" class="list-group-item"> Dapibus ac facilisis in </button>
      <button type="button" class="list-group-item"> Morbi leo risus </button>
      <button type="button" class="list-group-item"> Porta ac consectetur ac </button>
      <button type="button" class="list-group-item"> Vestibulum at eros </button>

    </div>

    <!-- Button list with badges -->
    <ul class="list-group">

      <li class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
      </li>

      <li class="list-group-item">
        <span class="badge">1</span>
        Morbi leo risus
      </li>

      <li class="list-group-item">
        <span class="badge">100</span>
        Vestibulum at eros
      </li>

    </ul>

## Panels

Simple panel

Leadership of Indian independence movement, philosophy of Satyagraha, Ahimsa or nonviolence, pacifism Alfred High School, Rajkot, Samaldas College, Bhavnagar, University College, London (UCL) Indian National Congress

Panel with image

Mahatma Gandhi, Bapu, Gandhiji Gujarati Cremated at Rajghat, Delhi 28.6415°N 77.2483°E

Code snippet

    <!-- Basic panel -->
    <div class='col-sm-12 col-md-6'>
      <wiki-info-panel title="Mahatma Gandhi">

        <wiki-info-panel-content title="Known for"> Leadership of Indian independence movement, philosophy of Satyagraha, Ahimsa or nonviolence, pacifism</wiki-info-panel-content>
        <wiki-info-panel-content title="Alma mater"> Alfred High School, Rajkot, Samaldas College, Bhavnagar, University College, London (UCL) </wiki-info-panel-content>
        <wiki-info-panel-content title="Movement"> Indian National Congress </wiki-info-panel-content>

      </wiki-info-panel>
    </div>

    <!-- Basic panel -->
    <div class='col-sm-12 col-md-6'>
      <wiki-info-panel title="Mahatma Gandhi" img-src="http://bit.ly/1TshXjd">

        <wiki-info-panel-content title="Other names"> Mahatma Gandhi, Bapu, Gandhiji </wiki-info-panel-content>
        <wiki-info-panel-content title="Ethnicity"> Gujarati </wiki-info-panel-content>
        <wiki-info-panel-content title="Resting place"> Cremated at Rajghat, Delhi 28.6415°N 77.2483°E </wiki-info-panel-content>
        <wiki-info-panel-content title="Signature"> <img src="http://bit.ly/1WT0aH6" class="img-responsive"></wiki-info-panel-content> <!-- Signature image -->

      </wiki-info-panel>
    </div>

Panel title

Add title within `<wiki-info-panel title="...">`

Panel content

Content title
`<wiki-info-panel-content title="...">`

Content
`<wiki-info-panel-content>
...
</wiki-info-panel-content>`

Add image

Panel lead image
Add `img-src="..."` to `<wiki-info-panel title="Mahatma Ghandi" img-src="...">`

Content image
Add `img-src="..."` to `<wiki-info-panel-content title="Signature" img-src="...">`

## Cards

Simple cards

Card title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus sodales arcu, non semper tellus. Card category
Martin Luther Lucas Cranach der Ältere (1528)

Code snippet

    <!-- Basic card -->
    <div class="col-md-6 col-sm-12">

      <wiki-card orientation="portrait">
        <wiki-card-title> Card title</wiki-card-title>
        <wiki-card-content> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus sodales arcu, non semper tellus. </wiki-card-content>
        <wiki-card-label> Card category </wiki-card-label>
      </wiki-card>
    </div>

    <!-- Basic card 2 -->
    <div class="col-md-6 col-sm-12">
      <wiki-card orientation="portrait" img-src="http://bit.ly/1KtH8xw">
        <wiki-card-title> Martin Luther </wiki-card-title>
        <wiki-card-content> Lucas Cranach der Ältere (1528) </wiki-card-content>
      </wiki-card>

    </div>

Complex cards

Lunar Libration Simulated views of the Moon over one month, demonstrating librations in latitude and longitude. Also visible are the different phases, and the variation in visual size caused by the variable distance from Earth.
Fluxus Fair use - Fluxus Debris The fluxus manifesto, a visual document written in 1963 by George Maciunas Fluxus Visual art movement

Code snippet

    <!-- Complex card -->
    <div class="col-md-6 col-sm-12">

      <wiki-card orientation="portrait" img-src="http://bit.ly/1r9qZdP">
        <wiki-card-title> Lunar Libration </wiki-card-title>
        <wiki-card-content> Simulated views of the Moon over one month, demonstrating librations in latitude and longitude. Also visible are the different phases, and the variation in visual size caused by the variable distance from Earth.<br>

          <!-- Button -->
          <button is='wiki-Button' type="submit" button-type="primary" button-size="sm">
            Read more
          </button>

        </wiki-card-content>
      </wiki-card>

    </div>

    <!-- Complex card 2 -->
    <div class="col-md-6 col-sm-12">

      <wiki-card orientation="portrait" img-src="http://bit.ly/1t0xQaP">
        <wiki-card-title> Fluxus </wiki-card-title>
        <wiki-card-label icon='wikiglyph-cite'> Fair use - Fluxus Debris </wiki-card-label>
        <wiki-card-content> The fluxus manifesto, a visual document written in 1963 by George Maciunas </wiki-card-content>

        <!-- Footer buttons -->
        <a href="#">Fluxus</a>
        <a href="#">Visual art movement</a>
      </wiki-card>

    </div>

Landscape cards

Dada1 Fair use - Edited by Tristan Tzara. Zürich, 1917. via Wikimedia Commons Cover of the first edition of the publication, ''Dada''

Code snippet

    <div class="col-md-10 col-sm-12">
      <wiki-card orientation="landscape" img-src="http://bit.ly/1UlMW12">

        <wiki-card-title> Dada1 </wiki-card-title>
        <wiki-card-label icon='wikiglyph-cite'> Fair use - Edited by Tristan Tzara. Zürich, 1917. via Wikimedia Commons </wiki-card-label>
        <wiki-card-content> Cover of the first edition of the publication, ''Dada''</wiki-card-content>

      </wiki-card>
    </div>

Card content

TItle
`<wiki-card-title>
...
</wiki-card-title>`

Content
`<wiki-card-content>
...
</wiki-card-content>`

Tags / Label

Add `<a href="#"...</a>` before `</wiki-card>`

Image

Add `img-src="..."` to `<wiki-card img-src="...">`

Landscape orientation

Change `orientation="..."` within `<wiki-card>`

- Portrait
- Landscape

## Alternative cards

Simple card

100%

Complex cards

450,000 San Francisco Article view

Code snippet

    <!-- Basic alternative card -->
    <div class="row col-md-6 col-sm-12">

      <wiki-stat title='Card title' sub-title="Card subtitle">
        <wiki-stat-content>
          100%
        </wiki-stat-content>
      </wiki-stat>

    </div>

    <!-- Complex alternative card -->
    <div class="row col-md-6 col-sm-12">

      <wiki-stat title='"San Francisco" article views' sub-title="JAN 2015">
        <wiki-stat-content> 450,000 </wiki-stat-content>

        <!-- Footer buttons -->
        <a href="#">San Francisco</a>
        <a href="#">Article view</a>
      </wiki-stat>

    </div>

Alternative card content

Title
Add `title='...'` to `<wiki-stat>`

Subtitle
Add `sub-title='...'` to `<wiki-stat>`

Content
`<wiki-stat-content>
...
</wiki-stat-content>`

Tags / Label

Add `<a href="#"...</a>` before `</wiki-stat>`

## Responsive embed

Embed a video

Code snippet

    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="http://bit.ly/1Pe13Ut"></iframe> <!-- Video link -->
    </div>