Step one
Step two
Layout 1
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
Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa.
Nunc sit amet purus ornare, egestas sapien id, cursus erat. Fusce ullamcorper massa ut sem efficitur. Pellentesque pulvinar elit cursus.
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
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
whiteprimary
bluesuccess
greenwarning
orangedanger
redSizes
Change the size within button-size="..."
sm
extra-smallsm
smalllg
largeAdd an icon
Add icon='wikiglyph-star'
Button groups
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>
Dropdowns
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
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
smallbtn-group-lg
largeLight 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 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>
Basic pills
Pills with dropdown
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
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
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>
<wiki-list-title>...</wiki-list-title>
<wiki-list-sub-title>...</wiki-list-sub-title>
<wiki-list-content>...</wiki-list-content>
Add img-src="..."
to <wiki-list-item img-src="...">
Complex list
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
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
Panel with image
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
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
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
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>
Simple card
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>