Wikimedia UI

Back to menu

Step two

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

Responsive image

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.
Responsive image 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

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'


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>
                          

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>

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

Dark theme

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>
                          

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>
                          

Basic tabs

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>
                          

Basic pills

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>
                          

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>
                          

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>
                          

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>
                          

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>
                          

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="...">


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

Simple card

100%

Complex cards

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>


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>