bulma/docs/library/debug/debug.html

2172 lines
79 KiB
HTML
Raw Permalink Normal View History

2024-03-21 16:11:54 +00:00
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css">
</head>
<body>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">block</p>
</div>
<div class="column">
<div class="block">
<p>
Quisque ante lacus, malesuada ac auctor vitae, congue
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu
rutrum tellus.
</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">Title</p>
</div>
<div class="column">
<h2 class="title">Hello <strong>Big</strong> World <sub>Sub</sub> <sup>Sup</sup></h2>
<h3 class="subtitle">Vestibulum id ligula porta felis euismod semper.</h3>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">box</p>
</div>
<div class="column">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img
src="https://bulma.io/assets/images/placeholders/128x128.png"
alt="Image"
>
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small>
<small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
egestas. Nullam condimentum luctus turpis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item" aria-label="reply">
<span class="icon is-small">
<i class="fas fa-reply" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="like">
<span class="icon is-small">
<i class="fas fa-heart" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
<article class="media">
<figure class="media-left">
<p class="image is-48x48">
<img
src="https://bulma.io/assets/images/placeholders/96x96.png"
>
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>Sean Brown</strong>
<br>
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a
lobortis leo feugiat.
<br>
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
</p>
</div>
<article class="media">
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet
nec massa.
</article>
<article class="media">
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed
pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
</article>
</div>
</article>
</div>
</article>
</div>
<a class="box">
<p>
<strong>John Smith</strong> <small>@johnsmith</small>
<small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
egestas. Nullam condimentum luctus turpis.
</p>
</a>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">button</p>
</div>
<div class="column">
<nav class="buttons">
<button class="button">Button</button>
<button class="button is-text">Text</button>
<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
</nav>
<nav class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-light is-primary">Primary</button>
<button class="button is-light is-link">Link</button>
<button class="button is-light is-info">Info</button>
</nav>
<nav class="buttons">
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-light is-success">Success</button>
<button class="button is-light is-warning">Warning</button>
<button class="button is-light is-danger">Danger</button>
</nav>
<!--
<nav class="buttons">
<button class="button is-small">Small</button>
<button class="button">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>
</nav>
-->
<nav class="buttons">
<button class="button is-outlined">Outline</button>
<button class="button is-primary is-outlined">Outline</button>
<button class="button is-link is-outlined">Outline</button>
</nav>
<nav class="buttons">
<button class="button is-info is-outlined">Outline</button>
<button class="button is-success is-outlined">Outline</button>
<button class="button is-danger is-outlined">Outline</button>
</nav>
<nav class="buttons">
<button class="button is-loading">Load</button>
<button class="button is-primary is-loading">Load</button>
<button class="button is-link is-loading">Load</button>
</nav>
<nav class="buttons">
<button class="button is-info is-loading">Load</button>
<button class="button is-success is-loading">Load</button>
<button class="button is-warning is-loading">Load</button>
<button class="button is-danger is-loading">Load</button>
</nav>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">select</p>
</div>
<div class="column">
<div class="field">
<div class="select is-white">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-light">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-dark">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-black">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-primary">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-link">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-info">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-success">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-warning">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="select is-danger">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">tag</p>
</div>
<div class="column">
<div class="tags">
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
</div>
<div class="tags">
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
</div>
<div class="tags has-addons">
<span class="tag">Package</span>
<span class="tag is-primary">Bulma</span>
</div>
<div class="tags has-addons">
<span class="tag is-danger">Alex Smith</span>
<a class="tag is-delete"></a>
</div>
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">npm</span>
<span class="tag is-info">0.7.0</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">build</span>
<span class="tag is-success">passing</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">chat</span>
<span class="tag is-primary">on gitter</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">card</p>
</div>
<div class="column">
<!--
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img alt="Placeholder" src="images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img alt="Placeholder" src="images/placeholders/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
-->
<div class="block">
<div class="card">
<header class="card-header">
<p class="card-header-title">Component</p>
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a href="#">@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<!--
<div class="card">
<div class="card-content">
<p class="title">
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
</p>
<p class="subtitle">
Jeff Atwood
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
</span>
</p>
<p class="card-footer-item">
<span>
Share on <a href="#">Facebook</a>
</span>
</p>
</footer>
</div>
-->
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">progress</p>
</div>
<div class="column">
<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress is-primary" value="15" max="100">15%</progress>
<progress class="progress is-link" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>
<progress class="progress is-danger" value="90" max="100">90%</progress>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">notification</p>
</div>
<div class="column">
<div class="notification">
<button aria-label="delete" class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-primary">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-link">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-info">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-success">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-warning">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-danger">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-black">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-dark">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-light">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
<div class="notification is-white">
<button aria-label="delete" class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
<pre>Hello World</pre>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">message</p>
</div>
<div class="column">
<article class="message is-test">
<div class="message-header">
<p>Hello World</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<!--
<article class="message">
<div class="message-header">
<p>Hello World</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing <strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
-->
<article class="message is-primary">
<div class="message-header">
<p>Primary</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<article class="message is-link">
<div class="message-header">
<p>Link</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<article class="message is-info">
<div class="message-header">
<p>Info</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<article class="message is-success">
<div class="message-header">
<p>Success</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<article class="message is-warning">
<div class="message-header">
<p>Warning</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<article class="message is-danger">
<div class="message-header">
<p>Danger</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<article class="message is-black">
<div class="message-header">
<p>Black</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
<article class="message is-dark">
<div class="message-header">
<p>Dark</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit ametfejsoum adipiscing
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
</div>
</article>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">tabs</p>
</div>
<div class="column">
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
<div class="tabs is-toggle">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
<div class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">pagination</p>
</div>
<div class="column">
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link" aria-label="Goto page 1">1</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 45">45</a>
</li>
<li>
<a
class="pagination-link is-current"
aria-label="Page 46"
aria-current="page"
>46</a
>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 47">47</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 86">86</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">breadcrumb</p>
</div>
<div class="column">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#">Bulma</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Components</a></li>
<li class="is-active">
<a href="#" aria-current="page">Breadcrumb</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<section class="section" style="height: 20rem">
<div class="columns">
<div class="column is-2">
<p class="title">dropdown</p>
</div>
<div class="column">
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button
class="button"
aria-haspopup="true"
aria-controls="dropdown-menu"
>
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item"> Dropdown item </a>
<a class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item"> With a divider </a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">general</p>
</div>
<div class="column">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input">
</div>
</div>
<div class="field">
<label class="label">Username</label>
<div class="control has-icons-left has-icons-right">
<input
class="input is-success"
type="text"
placeholder="Text input"
value="bulma"
>
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
<p class="help is-success">This username is available</p>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left has-icons-right">
<input
class="input is-danger"
type="email"
placeholder="Email input"
value="hello@"
>
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<p class="help is-danger">This email is invalid</p>
</div>
<div class="field">
<label class="label">Subject</label>
<div class="control">
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" placeholder="Textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="question">
Yes
</label>
<label class="radio">
<input type="radio" name="question">
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
<div class="control">
<button class="button is-text">Cancel</button>
</div>
</div>
<div class="field has-addons">
<div class="control">
<input
class="input"
type="text"
placeholder="Find a repository"
>
</div>
<div class="control">
<a class="button is-info"> Search </a>
</div>
</div>
<div class="field has-addons">
<p class="control">
<input class="input" type="text" placeholder="Your email">
</p>
<p class="control">
<a class="button is-static"> @gmail.com </a>
</p>
</div>
<div class="field has-addons">
<p class="control">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option></option>
</select>
</span>
</p>
<p class="control">
<input class="input" type="text" placeholder="Amount of money">
</p>
<p class="control">
<a class="button"> Transfer </a>
</p>
</div>
<div class="field has-addons">
<p class="control">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option></option>
</select>
</span>
</p>
<p class="control is-expanded">
<input class="input" type="text" placeholder="Amount of money">
</p>
<p class="control">
<a class="button"> Transfer </a>
</p>
</div>
<div class="field has-addons">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select name="country">
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</div>
</div>
<div class="control">
<button type="submit" class="button is-primary">Choose</button>
</div>
</div>
<div class="field is-grouped is-grouped-multiline">
<p class="control">
<a class="button"> One </a>
</p>
<p class="control">
<a class="button"> Two </a>
</p>
<p class="control">
<a class="button"> Three </a>
</p>
<p class="control">
<a class="button"> Four </a>
</p>
<p class="control">
<a class="button"> Five </a>
</p>
<p class="control">
<a class="button"> Six </a>
</p>
<p class="control">
<a class="button"> Seven </a>
</p>
<p class="control">
<a class="button"> Eight </a>
</p>
<p class="control">
<a class="button"> Nine </a>
</p>
<p class="control">
<a class="button"> Ten </a>
</p>
<p class="control">
<a class="button"> Eleven </a>
</p>
<p class="control">
<a class="button"> Twelve </a>
</p>
<p class="control">
<a class="button"> Thirteen </a>
</p>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">From</label>
</div>
<div class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder="Name">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</p>
</div>
<div class="field">
<p class="control is-expanded has-icons-left has-icons-right">
<input
class="input is-success"
type="email"
placeholder="Email"
value="alex@smith.com"
>
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label"></div>
<div class="field-body">
<div class="field is-expanded">
<div class="field has-addons">
<p class="control">
<a class="button is-static"> +44 </a>
</p>
<p class="control is-expanded">
<input
class="input"
type="tel"
placeholder="Your phone number"
>
</p>
</div>
<p class="help">Do not enter the first zero</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Department</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select>
<option>Business development</option>
<option>Marketing</option>
<option>Sales</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Already a member?</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<label class="radio">
<input type="radio" name="member">
Yes
</label>
<label class="radio">
<input type="radio" name="member">
No
</label>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Subject</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
class="input is-danger"
type="text"
placeholder="e.g. Partnership opportunity"
>
</div>
<p class="help is-danger">This field is required</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Question</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<textarea
class="textarea"
placeholder="Explain how we can help you"
></textarea>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="button is-primary">Send message</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">file</p>
</div>
<div class="column">
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label"> Choose a file… </span>
</span>
</label>
</div>
<div class="file has-name is-boxed">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label"> Choose a file… </span>
</span>
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
</label>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">icon</p>
</div>
<div class="column">
<div class="block">
<span class="icon is-small has-text-info">
<i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
<i class="fas fa-check-square"></i>
</span>
<span class="icon is-medium has-text-warning">
<i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon is-large has-text-danger">
<i class="fas fa-ban"></i>
</span>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">delete</p>
</div>
<div class="column">
<div class="block">
<a class="delete is-small"></a>
<a class="delete"></a>
<a class="delete is-medium"></a>
<a class="delete is-large"></a>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">menu</p>
</div>
<div class="column">
<div class="block">
<aside class="menu">
<p class="menu-label">General</p>
<ul class="menu-list">
<li><a>Dashboard</a></li>
<li><a>Customers</a></li>
</ul>
<p class="menu-label">Administration</p>
<ul class="menu-list">
<li><a>Team Settings</a></li>
<li>
<a class="is-active">Manage Your Team</a>
<ul>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<li><a>Invitations</a></li>
<li><a>Cloud Storage Environment Settings</a></li>
<li><a>Authentication</a></li>
</ul>
<p class="menu-label">Transactions</p>
<ul class="menu-list">
<li><a>Payments</a></li>
<li><a>Transfers</a></li>
<li><a>Balance</a></li>
</ul>
</aside>
</div>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">panel</p>
</div>
<div class="column">
<nav class="panel">
<p class="panel-heading">Repositories</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" placeholder="search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
mojs
</a>
<label class="panel-block">
<input type="checkbox">
remember me
</label>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth">reset all filters</button>
</div>
</nav>
</div>
</div>
</section>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">table</p>
</div>
<div class="column">
<table class="table">
<thead>
<tr>
<th><abbr title="Position">Pos</abbr></th>
<th>Team</th>
<th><abbr title="Played">Pld</abbr></th>
<th><abbr title="Won">W</abbr></th>
<th><abbr title="Drawn">D</abbr></th>
<th><abbr title="Lost">L</abbr></th>
<th><abbr title="Goals for">GF</abbr></th>
<th><abbr title="Goals against">GA</abbr></th>
<th><abbr title="Goal difference">GD</abbr></th>
<th><abbr title="Points">Pts</abbr></th>
<th>Qualification or relegation</th>
</tr>
</thead>
<tfoot>
<tr>
<th><abbr title="Position">Pos</abbr></th>
<th>Team</th>
<th><abbr title="Played">Pld</abbr></th>
<th><abbr title="Won">W</abbr></th>
<th><abbr title="Drawn">D</abbr></th>
<th><abbr title="Lost">L</abbr></th>
<th><abbr title="Goals for">GF</abbr></th>
<th><abbr title="Goals against">GA</abbr></th>
<th><abbr title="Goal difference">GD</abbr></th>
<th><abbr title="Points">Pts</abbr></th>
<th>Qualification or relegation</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
title="Leicester City F.C."
>Leicester City</a
>
<strong>(C)</strong>
</td>
<td>38</td>
<td>23</td>
<td>12</td>
<td>3</td>
<td>68</td>
<td>36</td>
<td>+32</td>
<td>81</td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="201617 UEFA Champions League"
>Champions League group stage</a
>
</td>
</tr>
<tr>
<th>2</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Arsenal_F.C."
title="Arsenal F.C."
>Arsenal</a
>
</td>
<td>38</td>
<td>20</td>
<td>11</td>
<td>7</td>
<td>65</td>
<td>36</td>
<td>+29</td>
<td>71</td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="201617 UEFA Champions League"
>Champions League group stage</a
>
</td>
</tr>
<tr>
<th>3</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C."
title="Tottenham Hotspur F.C."
>Tottenham Hotspur</a
>
</td>
<td>38</td>
<td>19</td>
<td>13</td>
<td>6</td>
<td>69</td>
<td>35</td>
<td>+34</td>
<td>70</td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="201617 UEFA Champions League"
>Champions League group stage</a
>
</td>
</tr>
<tr class="is-selected">
<th>4</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Manchester_City_F.C."
title="Manchester City F.C."
>Manchester City</a
>
</td>
<td>38</td>
<td>19</td>
<td>9</td>
<td>10</td>
<td>71</td>
<td>41</td>
<td>+30</td>
<td>66</td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round"
title="201617 UEFA Champions League"
>Champions League play-off round</a
>
</td>
</tr>
<tr>
<th>5</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Manchester_United_F.C."
title="Manchester United F.C."
>Manchester United</a
>
</td>
<td>38</td>
<td>19</td>
<td>9</td>
<td>10</td>
<td>49</td>
<td>35</td>
<td>+14</td>
<td>66</td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
title="201617 UEFA Europa League"
>Europa League group stage</a
>
</td>
</tr>
<tr>
<th>6</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Southampton_F.C."
title="Southampton F.C."
>Southampton</a
>
</td>
<td>38</td>
<td>18</td>
<td>9</td>
<td>11</td>
<td>59</td>
<td>41</td>
<td>+18</td>
<td>63</td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
title="201617 UEFA Europa League"
>Europa League group stage</a
>
</td>
</tr>
<tr>
<th>7</th>
<td>
<a
href="https://en.wikipedia.org/wiki/West_Ham_United_F.C."
title="West Ham United F.C."
>West Ham United</a
>
</td>
<td>38</td>
<td>16</td>
<td>14</td>
<td>8</td>
<td>65</td>
<td>51</td>
<td>+14</td>
<td>62</td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round"
title="201617 UEFA Europa League"
>Europa League third qualifying round</a
>
</td>
</tr>
<tr>
<th>8</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Liverpool_F.C."
title="Liverpool F.C."
>Liverpool</a
>
</td>
<td>38</td>
<td>16</td>
<td>12</td>
<td>10</td>
<td>63</td>
<td>50</td>
<td>+13</td>
<td>60</td>
<td></td>
</tr>
<tr>
<th>9</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Stoke_City_F.C."
title="Stoke City F.C."
>Stoke City</a
>
</td>
<td>38</td>
<td>14</td>
<td>9</td>
<td>15</td>
<td>41</td>
<td>55</td>
<td>14</td>
<td>51</td>
<td></td>
</tr>
<tr>
<th>10</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Chelsea_F.C."
title="Chelsea F.C."
>Chelsea</a
>
</td>
<td>38</td>
<td>12</td>
<td>14</td>
<td>12</td>
<td>59</td>
<td>53</td>
<td>+6</td>
<td>50</td>
<td></td>
</tr>
<tr>
<th>11</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Everton_F.C."
title="Everton F.C."
>Everton</a
>
</td>
<td>38</td>
<td>11</td>
<td>14</td>
<td>13</td>
<td>59</td>
<td>55</td>
<td>+4</td>
<td>47</td>
<td></td>
</tr>
<tr>
<th>12</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C."
title="Swansea City A.F.C."
>Swansea City</a
>
</td>
<td>38</td>
<td>12</td>
<td>11</td>
<td>15</td>
<td>42</td>
<td>52</td>
<td>10</td>
<td>47</td>
<td></td>
</tr>
<tr>
<th>13</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Watford_F.C."
title="Watford F.C."
>Watford</a
>
</td>
<td>38</td>
<td>12</td>
<td>9</td>
<td>17</td>
<td>40</td>
<td>50</td>
<td>10</td>
<td>45</td>
<td></td>
</tr>
<tr>
<th>14</th>
<td>
<a
href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C."
title="West Bromwich Albion F.C."
>West Bromwich Albion</a
>
</td>
<td>38</td>
<td>10</td>
<td>13</td>
<td>15</td>
<td>34</td>
<td>48</td>
<td>14</td>
<td>43</td>
<td></td>
</tr>
<tr>
<th>15</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C."
title="Crystal Palace F.C."
>Crystal Palace</a
>
</td>
<td>38</td>
<td>11</td>
<td>9</td>
<td>18</td>
<td>39</td>
<td>51</td>
<td>12</td>
<td>42</td>
<td></td>
</tr>
<tr>
<th>16</th>
<td>
<a
href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth"
title="A.F.C. Bournemouth"
>AFC Bournemouth</a
>
</td>
<td>38</td>
<td>11</td>
<td>9</td>
<td>18</td>
<td>45</td>
<td>67</td>
<td>22</td>
<td>42</td>
<td></td>
</tr>
<tr>
<th>17</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Sunderland_A.F.C."
title="Sunderland A.F.C."
>Sunderland</a
>
</td>
<td>38</td>
<td>9</td>
<td>12</td>
<td>17</td>
<td>48</td>
<td>62</td>
<td>14</td>
<td>39</td>
<td></td>
</tr>
<tr>
<th>18</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Newcastle_United_F.C."
title="Newcastle United F.C."
>Newcastle United</a
>
<strong>(R)</strong>
</td>
<td>38</td>
<td>9</td>
<td>10</td>
<td>19</td>
<td>44</td>
<td>65</td>
<td>21</td>
<td>37</td>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="201617 Football League Championship"
>Football League Championship</a
>
</td>
</tr>
<tr>
<th>19</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Norwich_City_F.C."
title="Norwich City F.C."
>Norwich City</a
>
<strong>(R)</strong>
</td>
<td>38</td>
<td>9</td>
<td>7</td>
<td>22</td>
<td>39</td>
<td>67</td>
<td>28</td>
<td>34</td>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="201617 Football League Championship"
>Football League Championship</a
>
</td>
</tr>
<tr>
<th>20</th>
<td>
<a
href="https://en.wikipedia.org/wiki/Aston_Villa_F.C."
title="Aston Villa F.C."
>Aston Villa</a
>
<strong>(R)</strong>
</td>
<td>38</td>
<td>3</td>
<td>8</td>
<td>27</td>
<td>27</td>
<td>76</td>
<td>49</td>
<td>17</td>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="201617 Football League Championship"
>Football League Championship</a
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<nav class="navbar is-">
<div class="navbar-brand">
<a class="navbar-item">
<img
src="images/bulma-logo.png"
alt="Bulma: a modern CSS framework based on Flexbox"
width="112"
height="28"
>
Test
</a>
<div class="navbar-burger burger" data-target="navMenuColor-example">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColor-example" class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item" href=""> Home </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="documentation/overview/start/"> Docs </a>
<div class="navbar-dropdown">
<a class="navbar-item" href="documentation/overview/start/"> Overview </a>
<a class="navbar-item" href="documentation/modifiers/syntax/"> Modifiers </a>
<a class="navbar-item" href="documentation/columns/basics/"> Columns </a>
<a class="navbar-item" href="documentation/layout/container/"> Layout </a>
<a class="navbar-item" href="documentation/form/general/"> Form </a>
<hr class="navbar-divider">
<a class="navbar-item" href="documentation/elements/box/"> Elements </a>
<a
class="navbar-item is-active"
href="documentation/components/breadcrumb/"
>
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<a class="button is-primary" href="#">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span>Download</span>
</a>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="columns">
<div class="column is-2">
<p class="title">content</p>
</div>
<div class="column">
<div class="content">
<h1>Hello World</h1>
<p>
Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper
dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as
well!
</p>
<h2>Second level</h2>
<p>
Curabitur accumsan turpis pharetra
<strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id.
Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus
facilisis. Donec at dignissim dui. Ut et neque nisl.
</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
<h3>Third level</h3>
<p>
Quisque ante lacus, malesuada ac auctor vitae, congue
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu
rutrum tellus.
</p>
<ol>
<li>Donec blandit a lorem id convallis.</li>
<li>Cras gravida arcu at diam gravida gravida.</li>
<li>Integer in volutpat libero.</li>
<li>Donec a diam tellus.</li>
<li>Aenean nec tortor orci.</li>
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
<li>Vivamus maximus ultricies pulvinar.</li>
</ol>
<blockquote>
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus
sit amet turpis.
</blockquote>
<p>
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi
molestie.
</p>
<p>
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus.
Maecenas vestibulum interdum commodo.
</p>
<dl>
<dt>Web</dt>
<dd>The part of the Internet that contains websites and web pages</dd>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A technology to make HTML look better</dd>
</dl>
<p>
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet,
mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
</p>
<h4>Fourth level</h4>
<p>
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus
laoreet, at elementum ex efficitur.
</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut
vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
</p>
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
<p>
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in
felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper.
Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac
posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero
accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl
vel condimentum. Nam pharetra varius metus non pellentesque.
</p>
<h5>Fifth level</h5>
<p>
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit.
Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a
eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
</p>
<figure>
<img alt="Placeholder" src="images/placeholders/256x256.png">
<img alt="Placeholder" src="images/placeholders/256x256.png">
<figcaption>Figure 1: Some beautiful placeholders</figcaption>
</figure>
<h6>Sixth level</h6>
<p>
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend
eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim
vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit
vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
</p>
</div>
</div>
</div>
</section>
</body>
</html>