"name": "Elements",
"path": "/documentation/elements"
},
- "button": {
+ "elements-box": {
+ "name": "Box",
+ "path": "/documentation/elements/box"
+ },
+ "elements-button": {
"name": "Button",
"path": "/documentation/elements/button"
},
+ "elements-content": {
+ "name": "Content",
+ "path": "/documentation/elements/content"
+ },
+ "elements-delete": {
+ "name": "Delete",
+ "path": "/documentation/elements/delete"
+ },
+ "elements-icon": {
+ "name": "Icon",
+ "path": "/documentation/elements/icon"
+ },
+ "elements-image": {
+ "name": "Image",
+ "path": "/documentation/elements/image"
+ },
+ "elements-notification": {
+ "name": "Notification",
+ "path": "/documentation/elements/notification"
+ },
+ "elements-progress": {
+ "name": "Progress bars",
+ "path": "/documentation/elements/progress"
+ },
+ "elements-table": {
+ "name": "Table",
+ "path": "/documentation/elements/table"
+ },
+ "elements-tag": {
+ "name": "Tag",
+ "path": "/documentation/elements/tag"
+ },
+ "elements-title": {
+ "name": "Title",
+ "path": "/documentation/elements/title"
+ },
"components": {
"name": "Components",
"path": "/documentation/components"
},
"order": {
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
+ "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
}
}
-<section class="section bd-typo">
- <div class="container">
- <p class="has-text-grey-light">
- <a href="{{ site.url }}/made-with-bulma/">
- <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
- </a>
- <br>
- This page is <strong class="has-text-grey">open source</strong>.
- Noticed a typo? Or something unclear?
- <br>
- <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
- Improve this page on GitHub
- </a>
- </p>
- </div>
-</section>
+<div class="bd-typo">
+ <p class="has-text-grey-light">
+ <a href="{{ site.url }}/made-with-bulma/">
+ <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
+ </a>
+ <br>
+ This page is <strong class="has-text-grey">open source</strong>.
+ Noticed a typo? Or something unclear?
+ <br>
+ <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
+ Improve this page on GitHub
+ </a>
+ </p>
+</div>
</ul>
</nav>
- <nav class="bd-prev-next">
- {% if previous_link %}
- <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
- ←
- </a>
- {% else %}
- <span>
- ←
- </span>
- {% endif %}
+ {% if previous_link or next_link %}
+ <nav class="bd-prev-next">
+ {% if previous_link %}
+ <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+ ←
+ </a>
+ {% else %}
+ <span>
+ ←
+ </span>
+ {% endif %}
- {% if next_link %}
- <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
- →
- </a>
- {% else %}
- <span>
- →
- </span>
- {% endif %}
- </nav>
+ {% if next_link %}
+ <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+ →
+ </a>
+ {% else %}
+ <span>
+ →
+ </span>
+ {% endif %}
+ </nav>
+ {% endif %}
</div>
<header class="bd-header">
<p class="subtitle is-4">
{{ page.subtitle }}
</p>
+
+ {% if page.meta %}
+ {%
+ include meta.html
+ colors=page.meta.colors
+ sizes=page.meta.sizes
+ variables=page.meta.variables
+ %}
+ {% endif %}
</header>
<div class="bd-content">
.bd-main
padding: 0 3rem
.bd-lead
- padding: 3rem 3rem 3rem 0
+ margin-left: -3rem
+ padding: 3rem
.bd-side
padding: 3rem 0 3rem 1.5rem
.native-js
+ border-top: 2px solid $background
display: none
font-size: 1rem
opacity: 0
+widescreen
.native-js
- font-size: 1.25rem
\ No newline at end of file
+ font-size: 1.25rem
+.bd-typo
+ margin-top: 3rem
+
.bd-has-text-rss
color: $rss
width: 0.5em;
}
-.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
+.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) {
margin-bottom: 1.5rem;
}
.table {
background-color: white;
color: #363636;
- margin-bottom: 1.5rem;
}
.table td,
padding: 0 3rem;
}
.bd-lead {
- padding: 3rem 3rem 3rem 0;
+ margin-left: -3rem;
+ padding: 3rem;
}
.bd-side {
padding: 3rem 0 3rem 1.5rem;
text-decoration: underline;
}
+.bd-typo {
+ margin-top: 3rem;
+}
+
.bd-has-text-rss {
color: #f26522;
}
}
.native-js {
+ border-top: 2px solid whitesmoke;
display: none;
font-size: 1rem;
opacity: 0;
--- /dev/null
+---
+title: Documentation
+subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
+layout: documentation
+breadcrumb:
+- home
+- documentation
+---
- components
- components-breadcrumb
meta:
-- since: "0.4.3"
-- variables: true
-- colors: false
-- sizes: true
+ variables: true
+ colors: false
+ sizes: true
---
{% capture breadcrumb_example %}
---
title: Card
-subtile: "An all-around flexible and composable component"
+subtitle: "An all-around flexible and composable component"
layout: documentation
doc-tab: components
doc-subtab: card
- components
- components-card
meta:
-- variables: true
-- colors: false
-- sizes: false
+ variables: true
+ colors: false
+ sizes: false
---
{% capture card_example %}
- components
- components-dropdown
meta:
-- colors: false
-- sizes: false
-- variables: true
+ colors: false
+ sizes: false
+ variables: true
---
{% capture dropdown_example %}
- components
- components-menu
meta:
-- colors: false
-- sizes: false
-- variables: true
+ colors: false
+ sizes: false
+ variables: true
---
{% capture menu_example %}
layout: documentation
doc-tab: components
doc-subtab: message
-meta:
-- colors: true
-- sizes: true
-- variables: true
breadcrumb:
- home
- documentation
- components
- components-message
+meta:
+ colors: true
+ sizes: true
+ variables: true
---
{% capture message_example %}
layout: documentation
doc-tab: components
doc-subtab: modal
-meta:
-- colors: false
-- sizes: false
-- variables: true
breadcrumb:
- home
- documentation
- components
- components-modal
+meta:
+ colors: false
+ sizes: false
+ variables: true
---
{% capture modal %}
- components
- components-navbar
meta:
-- colors: true
-- sizes: false
-- variables: true
+ colors: true
+ sizes: false
+ variables: true
---
{% capture navbar_example %}
- components
- components-pagination
meta:
-- colors: false
-- sizes: true
-- variables: true
+ colors: false
+ sizes: true
+ variables: true
---
{% capture pagination_example %}
- components
- components-panel
meta:
-- colors: false
-- sizes: false
-- variables: true
+ colors: false
+ sizes: false
+ variables: true
---
{% capture panel_example %}
- components
- components-tabs
meta:
-- colors: false
-- sizes: true
-- variables: true
+ colors: false
+ sizes: true
+ variables: true
---
{% capture tabs_example %}
---
title: Box
+subtitle: "A white <strong>box</strong> to contain other elements"
layout: documentation
doc-tab: elements
doc-subtab: box
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-box
+meta:
+ colors: false
+ sizes: false
+ variables: true
---
-{% include subnav/subnav-elements.html %}
-
{% capture box_example %}
<div class="box">
<article class="media">
</div>
{% endcapture %}
-<section class="section">
- <div class="container">
- <h1 class="title">Box</h1>
- <h2 class="subtitle">
- A white <strong>box</strong> to contain other elements
- </h2>
- {%
- include meta.html
- colors=false
- sizes=false
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>
- The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
- <br>
- For example, you can include a media object:
- </p>
- </div>
-
- {% include snippet.html content=box_example more=true %}
+<div class="content">
+ <p>
+ The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
+ <br>
+ For example, you can include a media object:
+ </p>
+</div>
- {% include variables.html type='element' %}
+{% include snippet.html content=box_example more=true %}
- </div>
-</section>
+{% include variables.html type='element' %}
- home
- documentation
- elements
-- button
+- elements-button
meta:
-- colors: true
-- sizes: true
-- variables: true
+ colors: true
+ sizes: true
+ variables: true
---
{% capture button_example %}
---
title: Content
+subtitle: "A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available"
layout: documentation
doc-tab: elements
doc-subtab: content
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-content
+meta:
+ colors: false
+ sizes: true
+ variables: true
---
{% capture content_pre %}
</div>
{% endcapture %}
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Content</h1>
- <h2 class="subtitle">
- A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
- </h2>
- {%
- include meta.html
- colors=false
- sizes=true
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
- <ul>
- <li><code><p></code> paragraphs</li>
- <li><code><ul></code> <code><ol></code> <code><dl></code> lists</li>
- <li><code><h1></code> to <code><h6></code> headings</li>
- <li><code><blockquote></code> quotes</li>
- <li><code><em></code> and <code><strong></code></li>
- <li><code><table></code> <code><tr></code> <code><th></code> <code><td></code> tables</li>
- </ul>
- <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
- </div>
-
- {% include snippet.html content=content_example %}
-
- {% include anchor.html name="Sizes" %}
+<div class="content">
+ <p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
+ <ul>
+ <li><code><p></code> paragraphs</li>
+ <li><code><ul></code> <code><ol></code> <code><dl></code> lists</li>
+ <li><code><h1></code> to <code><h6></code> headings</li>
+ <li><code><blockquote></code> quotes</li>
+ <li><code><em></code> and <code><strong></code></li>
+ <li><code><table></code> <code><tr></code> <code><th></code> <code><td></code> tables</li>
+ </ul>
+ <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
+</div>
- <div class="content">
- <p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
- </div>
- <div class="bd-example">
- <div class="content is-small">
- <h1>Hello World</h1>
- <p>Lorem ipsum 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.</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>
- </div>
- </div>
- <div class="bd-example">
- <div class="content is-medium">
- <h1>Hello World</h1>
- <p>Lorem ipsum 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.</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>
- </div>
- </div>
- <div class="bd-example">
- <div class="content is-large">
- <h1>Hello World</h1>
- <p>Lorem ipsum 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.</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>
- </div>
- </div>
+{% include snippet.html content=content_example %}
- {% include variables.html type='element' %}
+{% include anchor.html name="Sizes" %}
+<div class="content">
+ <p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
+</div>
+<div class="bd-example">
+ <div class="content is-small">
+ <h1>Hello World</h1>
+ <p>Lorem ipsum 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.</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>
+ </div>
+</div>
+<div class="bd-example">
+ <div class="content is-medium">
+ <h1>Hello World</h1>
+ <p>Lorem ipsum 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.</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>
</div>
-</section>
+</div>
+<div class="bd-example">
+ <div class="content is-large">
+ <h1>Hello World</h1>
+ <p>Lorem ipsum 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.</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>
+ </div>
+</div>
+
+{% include variables.html type='element' %}
---
title: Delete
+subtitle: "A versatile <strong>delete</strong> cross"
layout: documentation
doc-tab: elements
doc-subtab: delete
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-delete
+meta:
+ colors: false
+ sizes: true
+ variables: false
---
{% capture cross_example %}
</article>
{% endcapture %}
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Delete</h1>
- <h2 class="subtitle">
- A versatile <strong>delete</strong> cross
- </h2>
- {%
- include meta.html
- colors=false
- sizes=true
- variables=false
- %}
-
- <hr>
-
- <div class="content">
- <p>
- The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
- </p>
- <p>
- On its own, it's a simple circle with a cross:
- </p>
- </div>
-
- {% include snippet.html content=cross_example %}
+<div class="content">
+ <p>
+ The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+ </p>
+ <p>
+ On its own, it's a simple circle with a cross:
+ </p>
+</div>
- {% include anchor.html name="Sizes" %}
+{% include snippet.html content=cross_example %}
- <div class="content">
- <p>
- It comes in <strong>4 sizes</strong>:
- </p>
- </div>
+{% include anchor.html name="Sizes" %}
- {% include snippet.html content=cross_sizes_example %}
+<div class="content">
+ <p>
+ It comes in <strong>4 sizes</strong>:
+ </p>
+</div>
- {% include anchor.html name="Combinations" %}
+{% include snippet.html content=cross_sizes_example %}
- <div class="content">
- <p>
- Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
- </p>
- </div>
+{% include anchor.html name="Combinations" %}
- {% include snippet.html content=cross_elements_example %}
+<div class="content">
+ <p>
+ Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
+ </p>
+</div>
- </div>
-</section>
+{% include snippet.html content=cross_elements_example %}
---
title: Icon
+subtitle: 'Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.'
fontawesome4: true
iconic: true
ionicons: true
layout: documentation
doc-tab: elements
doc-subtab: icon
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-icon
+meta:
+ colors: true
+ sizes: true
+ variables: true
---
{% capture icon_example %}
</span>
{% endcapture %}
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Icons</h1>
- <h2 class="subtitle">
- Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
- </h2>
- {%
- include meta.html
- colors=true
- sizes=true
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>
- The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
- </div>
-
- <div class="block bd-icon-size">
- {% include snippet.html content=icon_example %}
- </div>
-
- <div class="message is-info">
- <div class="message-body">
- The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
- </div>
- </div>
-
-
- <div class="content">
- <p>
- By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
- </div>
-
- {% include anchor.html name="Colors" %}
-
- <div class="content">
- <p>
- Since icon fonts are simply <strong>text</strong>, you can use the <a href="/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
- </p>
- </div>
-
- {% include snippet.html content=icon_color_example %}
-
- {% include anchor.html name="Sizes" %}
-
- <div class="content">
- <p>
- The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/svg-with-js#additional-styling" target="_blank">additional sizes</a>.
- </p>
- </div>
-
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>Container class</th>
- <th>Container size</th>
- <th>Font Awesome 5 class</th>
- <th>Icon size</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code>icon is-small</code>
- </td>
- <td>
- <code>1rem x 1rem</code>
- </td>
- <td>
- <code>fas</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-small">
- <i class="fas fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td rowspan="2">
- <code>icon</code>
- </td>
- <td rowspan="2">
- <code>1.5rem x 1.5rem</code>
- </td>
- <td>
- <code>fas</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="fas fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>fas fa-lg</code>
- </td>
- <td>
- <code>1.33em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="fas fa-lg fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td rowspan="3">
- <code>icon is-medium</code>
- </td>
- <td rowspan="3">
- <code>2rem x 2rem</code>
- </td>
- <td>
- <code>fas</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <i class="fas fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>fas fa-lg</code>
- </td>
- <td>
- <code>1.33em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <i class="fas fa-lg fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>fas fa-2x</code>
- </td>
- <td>
- <code>2em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <i class="fas fa-2x fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- <code>icon is-large</code>
- </td>
- <td rowspan="4">
- <code>3rem x 3rem</code>
- </td>
- <td>
- <code>fas</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="fas fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>fas fa-lg</code>
- </td>
- <td>
- <code>1.33em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="fas fa-lg fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>fas fa-2x</code>
- </td>
- <td>
- <code>2em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="fas fa-2x fa-home"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>fas fa-3x</code>
- </td>
- <td>
- <code>3em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="fas fa-3x fa-home"></i>
- </span>
- </td>
- </tr>
- </tbody>
- </table>
-
- {% include anchor.html name="Font Awesome variations" %}
-
- <div class="content">
- <p>
- Font Awesome also provides modifier classes for:
- </p>
- <ul>
- <li>
- fixed width icons
- </li>
- <li>
- bordered icons
- </li>
- <li>
- animated icons
- </li>
- <li>
- rotated & flipped icons
- </li>
- <li>
- stacked icons
- </li>
- </ul>
- </div>
-
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>Type</th>
- <th>Font Awesome class</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- Fixed width
- </td>
- <td>
- <code>fas fa-fw</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="fas fa-home fa-fw"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Bordered
- </td>
- <td>
- <code>fas fa-border</code>
- </td>
- <td>
- <span class="icon">
- <i class="fas fa-home fa-border"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Animated
- </td>
- <td>
- <code>fas fa-spinner fa-pulse</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="fas fa-spinner fa-pulse"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Rotated & flipped
- </td>
- <td>
- <code>fas fa-shield-alt</code><br>
- <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-90"</code><br>
- <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-180"</code><br>
- <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-270"</code><br>
- <code>fas fa-shield-alt</code> <code>data-fa-transform="flip-h"</code><br>
- <code>fas fa-shield-alt</code> <code>data-fa-transform="flip-v"</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="fas fa-shield-alt"></i>
- </span>
- <br>
- <span class="icon">
- <i class="fas fa-shield-alt" data-fa-transform="rotate-90"></i>
- </span>
- <br>
- <span class="icon">
- <i class="fas fa-shield-alt" data-fa-transform="rotate-180"></i>
- </span>
- <br>
- <span class="icon">
- <i class="fas fa-shield-alt" data-fa-transform="rotate-270"></i>
- </span>
- <br>
- <span class="icon">
- <i class="fas fa-shield-alt" data-fa-transform="flip-h"></i>
- </span>
- <br>
- <span class="icon">
- <i class="fas fa-shield-alt" data-fa-transform="flip-v"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td rowspan="2">
- Stacked
- </td>
- <td>
- {% highlight html %}<span class="icon is-medium">
+{% capture stacked_medium %}
+<span class="icon is-medium">
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
-</span>{% endhighlight %}
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <span class="fa-stack">
- <i class="fas fa-circle fa-stack-2x"></i>
- <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
- </span>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- {% highlight html %}<span class="icon is-large">
+</span>
+{% endcapture %}
+
+{% capture stacked_large %}
+<span class="icon is-large">
<span class="fa-stack fa-lg">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x has-text-danger"></i>
</span>
-</span>{% endhighlight %}
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <span class="fa-stack fa-lg">
- <i class="fas fa-camera fa-stack-1x"></i>
- <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
- </span>
- </span>
- </td>
- </tr>
- </tbody>
- </table>
-
- {% include anchor.html name="Material Design Icons" %}
-
- <div class="content">
- <p>
- Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
- </p>
- </div>
-
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>Container class</th>
- <th>Container size</th>
- <th>MDI class</th>
- <th>Icon size</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code>icon is-small</code>
- </td>
- <td>
- <code>1rem x 1rem</code>
- </td>
- <td>
- <code>mdi</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-small">
- <i class="mdi mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td rowspan="2">
- <code>icon</code>
- </td>
- <td rowspan="2">
- <code>1.5rem x 1.5rem</code>
- </td>
- <td>
- <code>mdi mdi-18px</code>
- </td>
- <td>
- <code>18px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-18px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-24px</code>
- </td>
- <td>
- <code>24px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-24px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td rowspan="4">
- <code>icon is-medium</code>
- </td>
- <td rowspan="4">
- <code>2rem x 2rem</code>
- </td>
- <td>
- <code>mdi</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <i class="mdi mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-18px</code>
- </td>
- <td>
- <code>18px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <i class="mdi mdi-18px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-24px</code>
- </td>
- <td>
- <code>24px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <i class="mdi mdi-24px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-36px</code>
- </td>
- <td>
- <code>36px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <i class="mdi mdi-36px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td rowspan="5">
- <code>icon is-large</code>
- </td>
- <td rowspan="5">
- <code>3rem x 3rem</code>
- </td>
- <td>
- <code>mdi</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="mdi mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-18px</code>
- </td>
- <td>
- <code>18px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="mdi mdi-18px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-24px</code>
- </td>
- <td>
- <code>24px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="mdi mdi-24px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-36px</code>
- </td>
- <td>
- <code>36px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="mdi mdi-36px mdi-bell"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>mdi mdi-48px</code>
- </td>
- <td>
- <code>48px</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <i class="mdi mdi-48px mdi-bell"></i>
- </span>
- </td>
- </tr>
- </tbody>
- </table>
-
- <div class="content">
- <p>
- MDI also provides modifier classes for:
- </p>
- <ul>
- <li>
- light and dark icons
- </li>
- <li>
- rotated & flipped icons
- </li>
- </ul>
- </div>
-
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>Type</th>
- <th>Material Design Icon class</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- Light color
- </td>
- <td>
- <code>mdi mdi-light</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-light"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Dark color
- </td>
- <td>
- <code>mdi mdi-dark</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-dark"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Light inactive color
- </td>
- <td>
- <code>mdi mdi-light mdi-inactive</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-light mdi-inactive"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Dark inactive color
- </td>
- <td>
- <code>mdi mdi-dark mdi-inactive</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-dark mdi-inactive"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Flipped
- </td>
- <td>
- <code>mdi mdi-flip-h</code>
- <br>
- <code>mdi mdi-flip-v</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-flip-h"></i>
- </span>
- <br>
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-flip-v"></i>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- Rotated
- </td>
- <td>
- <code>mdi mdi-rotate-45</code>
- <br>
- <code>mdi mdi-rotate-90</code>
- <br>
- <code>mdi mdi-rotate-180</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-rotate-45"></i>
- </span>
- <br>
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-rotate-90"></i>
- </span>
- <br>
- <span class="icon">
- <i class="mdi mdi-signal-4g mdi-rotate-180"></i>
- </span>
- </td>
- </tr>
- </tbody>
- </table>
-
- {% include anchor.html name="Open Iconic" %}
-
- <div class="content">
- <p>
- Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
- </p>
- </div>
-
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>Container class</th>
- <th>Container size</th>
- <th>Iconic class</th>
- <th>Icon size</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code>icon is-small</code>
- </td>
- <td>
- <code>1rem x 1rem</code>
- </td>
- <td>
- <code>oi [data-glyph=puzzle-piece]</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-small">
- <span class="oi" data-glyph="puzzle-piece"></span>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>icon</code>
- </td>
- <td>
- <code>1.5rem x 1.5rem</code>
- </td>
- <td>
- <code>oi [data-glyph=puzzle-piece]</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <span class="oi" data-glyph="puzzle-piece"></span>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>icon is-medium</code>
- </td>
- <td>
- <code>2rem x 2rem</code>
- </td>
- <td>
- <code>oi [data-glyph=puzzle-piece]</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <span class="oi" data-glyph="puzzle-piece"></span>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>icon is-large</code>
- </td>
- <td>
- <code>3rem x 3rem</code>
- </td>
- <td>
- <code>oi [data-glyph=puzzle-piece]</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <span class="oi" data-glyph="puzzle-piece"></span>
- </span>
- </td>
- </tr>
- </tbody>
- </table>
-
- {% include anchor.html name="Ionicons" %}
-
- <div class="content">
- <p>
- Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
- </p>
- </div>
+</span>
+{% endcapture %}
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>Container class</th>
- <th>Container size</th>
- <th>Ionicon class</th>
- <th>Icon size</th>
- <th>Result</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code>icon is-small</code>
- </td>
- <td>
- <code>1rem x 1rem</code>
- </td>
- <td>
- <code>ion-ionic</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-small">
- <span class="ion-ionic"></span>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>icon</code>
- </td>
- <td>
- <code>1.5rem x 1.5rem</code>
- </td>
- <td>
- <code>ion-ionic</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon">
- <span class="ion-ionic"></span>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>icon is-medium</code>
- </td>
- <td>
- <code>2rem x 2rem</code>
- </td>
- <td>
- <code>ion-ionic</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-medium">
- <span class="ion-ionic"></span>
- </span>
- </td>
- </tr>
- <tr>
- <td>
- <code>icon is-large</code>
- </td>
- <td>
- <code>3rem x 3rem</code>
- </td>
- <td>
- <code>ion-ionic</code>
- </td>
- <td>
- <code>1em</code>
- </td>
- <td class="bd-icon-size">
- <span class="icon is-large">
- <span class="ion-ionic"></span>
- </span>
- </td>
- </tr>
- </tbody>
- </table>
+<div class="content">
+ <p>
+ The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
+</div>
- {% include variables.html type='element' %}
+<div class="block bd-icon-size">
+ {% include snippet.html content=icon_example %}
+</div>
+<div class="message is-info">
+ <div class="message-body">
+ The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
</div>
-</section>
+</div>
+
+
+<div class="content">
+ <p>
+ By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
+</div>
+
+{% include anchor.html name="Colors" %}
+
+<div class="content">
+ <p>
+ Since icon fonts are simply <strong>text</strong>, you can use the <a href="/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
+ </p>
+</div>
+
+{% include snippet.html content=icon_color_example %}
+
+{% include anchor.html name="Sizes" %}
+
+<div class="content">
+ <p>
+ The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/svg-with-js#additional-styling" target="_blank">additional sizes</a>.
+ </p>
+</div>
+
+<table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>Container class</th>
+ <th>Container size</th>
+ <th>Font Awesome 5 class</th>
+ <th>Icon size</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code>icon is-small</code>
+ </td>
+ <td>
+ <code>1rem x 1rem</code>
+ </td>
+ <td>
+ <code>fas</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-small">
+ <i class="fas fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="2">
+ <code>icon</code>
+ </td>
+ <td rowspan="2">
+ <code>1.5rem x 1.5rem</code>
+ </td>
+ <td>
+ <code>fas</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="fas fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>fas fa-lg</code>
+ </td>
+ <td>
+ <code>1.33em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="fas fa-lg fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="3">
+ <code>icon is-medium</code>
+ </td>
+ <td rowspan="3">
+ <code>2rem x 2rem</code>
+ </td>
+ <td>
+ <code>fas</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <i class="fas fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>fas fa-lg</code>
+ </td>
+ <td>
+ <code>1.33em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <i class="fas fa-lg fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>fas fa-2x</code>
+ </td>
+ <td>
+ <code>2em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <i class="fas fa-2x fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ <code>icon is-large</code>
+ </td>
+ <td rowspan="4">
+ <code>3rem x 3rem</code>
+ </td>
+ <td>
+ <code>fas</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="fas fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>fas fa-lg</code>
+ </td>
+ <td>
+ <code>1.33em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="fas fa-lg fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>fas fa-2x</code>
+ </td>
+ <td>
+ <code>2em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="fas fa-2x fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>fas fa-3x</code>
+ </td>
+ <td>
+ <code>3em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="fas fa-3x fa-home"></i>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+{% include anchor.html name="Font Awesome variations" %}
+
+<div class="content">
+ <p>
+ Font Awesome also provides modifier classes for:
+ </p>
+ <ul>
+ <li>
+ fixed width icons
+ </li>
+ <li>
+ bordered icons
+ </li>
+ <li>
+ animated icons
+ </li>
+ <li>
+ rotated & flipped icons
+ </li>
+ <li>
+ stacked icons
+ </li>
+ </ul>
+</div>
+
+<table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>Type</th>
+ <th>Font Awesome class</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ Fixed width
+ </td>
+ <td>
+ <code>fas fa-fw</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="fas fa-home fa-fw"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Bordered
+ </td>
+ <td>
+ <code>fas fa-border</code>
+ </td>
+ <td>
+ <span class="icon">
+ <i class="fas fa-home fa-border"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Animated
+ </td>
+ <td>
+ <code>fas fa-spinner fa-pulse</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="fas fa-spinner fa-pulse"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Rotated & flipped
+ </td>
+ <td>
+ <code>fas fa-shield-alt</code><br>
+ <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-90"</code><br>
+ <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-180"</code><br>
+ <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-270"</code><br>
+ <code>fas fa-shield-alt</code> <code>data-fa-transform="flip-h"</code><br>
+ <code>fas fa-shield-alt</code> <code>data-fa-transform="flip-v"</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="fas fa-shield-alt"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="fas fa-shield-alt" data-fa-transform="rotate-90"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="fas fa-shield-alt" data-fa-transform="rotate-180"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="fas fa-shield-alt" data-fa-transform="rotate-270"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="fas fa-shield-alt" data-fa-transform="flip-h"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="fas fa-shield-alt" data-fa-transform="flip-v"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="2">
+ Stacked
+ </td>
+ <td>
+ {% highlight html %}{{ stacked_medium }}{% endhighlight %}
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <span class="fa-stack">
+ <i class="fas fa-circle fa-stack-2x"></i>
+ <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
+ </span>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ {% highlight html %}{{ stacked_large }}{% endhighlight %}
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <span class="fa-stack fa-lg">
+ <i class="fas fa-camera fa-stack-1x"></i>
+ <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
+ </span>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+{% include anchor.html name="Material Design Icons" %}
+
+<div class="content">
+ <p>
+ Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
+ </p>
+</div>
+
+<table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>Container class</th>
+ <th>Container size</th>
+ <th>MDI class</th>
+ <th>Icon size</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code>icon is-small</code>
+ </td>
+ <td>
+ <code>1rem x 1rem</code>
+ </td>
+ <td>
+ <code>mdi</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-small">
+ <i class="mdi mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="2">
+ <code>icon</code>
+ </td>
+ <td rowspan="2">
+ <code>1.5rem x 1.5rem</code>
+ </td>
+ <td>
+ <code>mdi mdi-18px</code>
+ </td>
+ <td>
+ <code>18px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-18px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-24px</code>
+ </td>
+ <td>
+ <code>24px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-24px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ <code>icon is-medium</code>
+ </td>
+ <td rowspan="4">
+ <code>2rem x 2rem</code>
+ </td>
+ <td>
+ <code>mdi</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <i class="mdi mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-18px</code>
+ </td>
+ <td>
+ <code>18px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <i class="mdi mdi-18px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-24px</code>
+ </td>
+ <td>
+ <code>24px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <i class="mdi mdi-24px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-36px</code>
+ </td>
+ <td>
+ <code>36px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <i class="mdi mdi-36px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="5">
+ <code>icon is-large</code>
+ </td>
+ <td rowspan="5">
+ <code>3rem x 3rem</code>
+ </td>
+ <td>
+ <code>mdi</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="mdi mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-18px</code>
+ </td>
+ <td>
+ <code>18px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="mdi mdi-18px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-24px</code>
+ </td>
+ <td>
+ <code>24px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="mdi mdi-24px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-36px</code>
+ </td>
+ <td>
+ <code>36px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="mdi mdi-36px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>mdi mdi-48px</code>
+ </td>
+ <td>
+ <code>48px</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <i class="mdi mdi-48px mdi-bell"></i>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<div class="content">
+ <p>
+ MDI also provides modifier classes for:
+ </p>
+ <ul>
+ <li>
+ light and dark icons
+ </li>
+ <li>
+ rotated & flipped icons
+ </li>
+ </ul>
+</div>
+
+<table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>Type</th>
+ <th>Material Design Icon class</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ Light color
+ </td>
+ <td>
+ <code>mdi mdi-light</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-light"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Dark color
+ </td>
+ <td>
+ <code>mdi mdi-dark</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-dark"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Light inactive color
+ </td>
+ <td>
+ <code>mdi mdi-light mdi-inactive</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-light mdi-inactive"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Dark inactive color
+ </td>
+ <td>
+ <code>mdi mdi-dark mdi-inactive</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-dark mdi-inactive"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Flipped
+ </td>
+ <td>
+ <code>mdi mdi-flip-h</code>
+ <br>
+ <code>mdi mdi-flip-v</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-flip-h"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-flip-v"></i>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Rotated
+ </td>
+ <td>
+ <code>mdi mdi-rotate-45</code>
+ <br>
+ <code>mdi mdi-rotate-90</code>
+ <br>
+ <code>mdi mdi-rotate-180</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-rotate-45"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-rotate-90"></i>
+ </span>
+ <br>
+ <span class="icon">
+ <i class="mdi mdi-signal-4g mdi-rotate-180"></i>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+{% include anchor.html name="Open Iconic" %}
+
+<div class="content">
+ <p>
+ Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
+ </p>
+</div>
+
+<table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>Container class</th>
+ <th>Container size</th>
+ <th>Iconic class</th>
+ <th>Icon size</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code>icon is-small</code>
+ </td>
+ <td>
+ <code>1rem x 1rem</code>
+ </td>
+ <td>
+ <code>oi [data-glyph=puzzle-piece]</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-small">
+ <span class="oi" data-glyph="puzzle-piece"></span>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>icon</code>
+ </td>
+ <td>
+ <code>1.5rem x 1.5rem</code>
+ </td>
+ <td>
+ <code>oi [data-glyph=puzzle-piece]</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <span class="oi" data-glyph="puzzle-piece"></span>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>icon is-medium</code>
+ </td>
+ <td>
+ <code>2rem x 2rem</code>
+ </td>
+ <td>
+ <code>oi [data-glyph=puzzle-piece]</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <span class="oi" data-glyph="puzzle-piece"></span>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>icon is-large</code>
+ </td>
+ <td>
+ <code>3rem x 3rem</code>
+ </td>
+ <td>
+ <code>oi [data-glyph=puzzle-piece]</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <span class="oi" data-glyph="puzzle-piece"></span>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+{% include anchor.html name="Ionicons" %}
+
+<div class="content">
+ <p>
+ Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
+ </p>
+</div>
+
+<table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>Container class</th>
+ <th>Container size</th>
+ <th>Ionicon class</th>
+ <th>Icon size</th>
+ <th>Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <code>icon is-small</code>
+ </td>
+ <td>
+ <code>1rem x 1rem</code>
+ </td>
+ <td>
+ <code>ion-ionic</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-small">
+ <span class="ion-ionic"></span>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>icon</code>
+ </td>
+ <td>
+ <code>1.5rem x 1.5rem</code>
+ </td>
+ <td>
+ <code>ion-ionic</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon">
+ <span class="ion-ionic"></span>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>icon is-medium</code>
+ </td>
+ <td>
+ <code>2rem x 2rem</code>
+ </td>
+ <td>
+ <code>ion-ionic</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-medium">
+ <span class="ion-ionic"></span>
+ </span>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <code>icon is-large</code>
+ </td>
+ <td>
+ <code>3rem x 3rem</code>
+ </td>
+ <td>
+ <code>ion-ionic</code>
+ </td>
+ <td>
+ <code>1em</code>
+ </td>
+ <td class="bd-icon-size">
+ <span class="icon is-large">
+ <span class="ion-ionic"></span>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+{% include variables.html type='element' %}
---
title: Image
+subtitle: "A container for <strong>responsive images</strong>"
layout: documentation
doc-tab: elements
doc-subtab: image
- 64
- 96
- 128
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-image
+meta:
+ colors: false
+ sizes: false
+ variables: true
---
{% capture image %}
</figure>
{% endcapture %}
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Images</h1>
- <h2 class="subtitle">
- A container for <strong>responsive images</strong>
- </h2>
- {%
- include meta.html
- colors=false
- sizes=false
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
- </div>
-
- {% include snippet.html content=image %}
-
- {% include anchor.html name="Fixed square images" %}
-
- <div class="content">
- <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
- </div>
-
- <table class="table is-bordered">
- <tbody>
- {% for dimension in page.dimensions %}
- <tr>
- <td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
- <td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
- <td>{{ dimension }}x{{ dimension }}px</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
-
- {% include anchor.html name="Retina images" %}
-
- <div class="content">
- <p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
- </div>
-
- {% include snippet.html content=retina_image %}
-
- {% include anchor.html name="Responsive images with ratios" %}
-
- <div class="content">
- <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
- </div>
-
- <table id="images" class="table is-bordered">
- <tbody>
- <tr>
- <td><code>image is-square</code></td>
- <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
- <td>Square (or 1 by 1)</td>
- </tr>
- <tr>
- <td><code>image is-1by1</code></td>
- <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
- <td>1 by 1</td>
- </tr>
- <tr>
- <td><code>image is-5by4</code></td>
- <td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
- <td>5 by 4</td>
- </tr>
- <tr>
- <td><code>image is-4by3</code></td>
- <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
- <td>4 by 3</td>
- </tr>
- <tr>
- <td><code>image is-3by2</code></td>
- <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
- <td>3 by 2</td>
- </tr>
- <tr>
- <td><code>image is-5by3</code></td>
- <td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
- <td>5 by 3</td>
- </tr>
- <tr>
- <td><code>image is-16by9</code></td>
- <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
- <td>16 by 9</td>
- </tr>
- <tr>
- <td><code>image is-2by1</code></td>
- <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
- <td>2 by 1</td>
- </tr>
- <tr>
- <td><code>image is-3by1</code></td>
- <td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
- <td>3 by 1</td>
- </tr>
- <tr>
- <td><code>image is-4by5</code></td>
- <td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
- <td>4 by 5</td>
- </tr>
- <tr>
- <td><code>image is-3by4</code></td>
- <td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
- <td>3 by 4</td>
- </tr>
- <tr>
- <td><code>image is-2by3</code></td>
- <td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
- <td>2 by 3</td>
- </tr>
- <tr>
- <td><code>image is-3by5</code></td>
- <td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
- <td>3 by 5</td>
- </tr>
- <tr>
- <td><code>image is-9by16</code></td>
- <td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
- <td>9 by 16</td>
- </tr>
- <tr>
- <td><code>image is-1by2</code></td>
- <td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
- <td>1 by 2</td>
- </tr>
- <tr>
- <td><code>image is-1by3</code></td>
- <td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
- <td>1 by 3</td>
- </tr>
- </tbody>
- </table>
-
- <div class="content">
- <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
- </div>
-
- {% include variables.html type='element' %}
-
- </div>
-</section>
+<div class="content">
+ <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
+</div>
+
+{% include snippet.html content=image %}
+
+{% include anchor.html name="Fixed square images" %}
+
+<div class="content">
+ <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
+</div>
+
+<table class="table is-bordered">
+ <tbody>
+ {% for dimension in page.dimensions %}
+ <tr>
+ <td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
+ <td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
+ <td>{{ dimension }}x{{ dimension }}px</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+</table>
+
+{% include anchor.html name="Retina images" %}
+
+<div class="content">
+ <p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
+</div>
+
+{% include snippet.html content=retina_image %}
+
+{% include anchor.html name="Responsive images with ratios" %}
+
+<div class="content">
+ <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
+</div>
+
+<table id="images" class="table is-bordered">
+ <tbody>
+ <tr>
+ <td><code>image is-square</code></td>
+ <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
+ <td>Square (or 1 by 1)</td>
+ </tr>
+ <tr>
+ <td><code>image is-1by1</code></td>
+ <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
+ <td>1 by 1</td>
+ </tr>
+ <tr>
+ <td><code>image is-5by4</code></td>
+ <td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
+ <td>5 by 4</td>
+ </tr>
+ <tr>
+ <td><code>image is-4by3</code></td>
+ <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
+ <td>4 by 3</td>
+ </tr>
+ <tr>
+ <td><code>image is-3by2</code></td>
+ <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
+ <td>3 by 2</td>
+ </tr>
+ <tr>
+ <td><code>image is-5by3</code></td>
+ <td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
+ <td>5 by 3</td>
+ </tr>
+ <tr>
+ <td><code>image is-16by9</code></td>
+ <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
+ <td>16 by 9</td>
+ </tr>
+ <tr>
+ <td><code>image is-2by1</code></td>
+ <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
+ <td>2 by 1</td>
+ </tr>
+ <tr>
+ <td><code>image is-3by1</code></td>
+ <td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
+ <td>3 by 1</td>
+ </tr>
+ <tr>
+ <td><code>image is-4by5</code></td>
+ <td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
+ <td>4 by 5</td>
+ </tr>
+ <tr>
+ <td><code>image is-3by4</code></td>
+ <td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
+ <td>3 by 4</td>
+ </tr>
+ <tr>
+ <td><code>image is-2by3</code></td>
+ <td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
+ <td>2 by 3</td>
+ </tr>
+ <tr>
+ <td><code>image is-3by5</code></td>
+ <td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
+ <td>3 by 5</td>
+ </tr>
+ <tr>
+ <td><code>image is-9by16</code></td>
+ <td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
+ <td>9 by 16</td>
+ </tr>
+ <tr>
+ <td><code>image is-1by2</code></td>
+ <td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
+ <td>1 by 2</td>
+ </tr>
+ <tr>
+ <td><code>image is-1by3</code></td>
+ <td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
+ <td>1 by 3</td>
+ </tr>
+</tbody>
+</table>
+
+<div class="content">
+ <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
+</div>
+
+{% include variables.html type='element' %}
---
title: Notification
+subtitle: "Bold <strong>notification</strong> blocks, to alert your users of something"
layout: documentation
doc-tab: elements
doc-subtab: notification
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-notification
+meta:
+ colors: true
+ sizes: false
+ variables: true
---
{% capture notification %}
{% endfor %}
{% endcapture %}
-{% include subnav/subnav-elements.html %}
+{% include snippet.html content=notification %}
-<section class="section">
- <div class="container">
- <h1 class="title">Notifications</h1>
- <h2 class="subtitle">
- Bold <strong>notification</strong> blocks, to alert your users of something
- </h2>
- {%
- include meta.html
- colors=true
- sizes=false
- variables=true
- %}
+{% include anchor.html name="Colors" %}
- <hr>
+{% include snippet.html content=notification_colors %}
- {% include snippet.html content=notification %}
-
- {% include anchor.html name="Colors" %}
-
- {% include snippet.html content=notification_colors %}
-
- {% include variables.html type='element' %}
-
- </div>
-</section>
+{% include variables.html type='element' %}
---
title: Progress Bar
+subtitle: "Native HTML <strong>progress</strong> bars"
layout: documentation
doc-tab: elements
doc-subtab: progress
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-progress
+meta:
+ colors: true
+ sizes: true
+ variables: true
---
{% capture progress %}
<progress class="progress is-large" value="60" max="100">60%</progress>
{% endcapture %}
-{% include subnav/subnav-elements.html %}
+{% include snippet.html content=progress %}
-<section class="section">
- <div class="container">
- <h1 class="title">Progress bars</h1>
- <h2 class="subtitle">
- Native HTML <strong>progress</strong> bars
- </h2>
- {%
- include meta.html
- colors=true
- sizes=true
- variables=true
- %}
+{% include anchor.html name="Colors" %}
- <hr>
+{% include snippet.html content=progress_colors %}
- {% include snippet.html content=progress %}
+{% include anchor.html name="Sizes" %}
- {% include anchor.html name="Colors" %}
+{% include snippet.html content=progress_sizes %}
- {% include snippet.html content=progress_colors %}
-
- {% include anchor.html name="Sizes" %}
-
- {% include snippet.html content=progress_sizes %}
-
- {% include variables.html type='element' %}
-
- </div>
-</section>
+{% include variables.html type='element' %}
---
title: Table
+subtitle: "The inevitable HTML <strong>table</strong>, with special case cells"
layout: documentation
doc-tab: elements
doc-subtab: table
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-table
+meta:
+ colors: false
+ sizes: false
+ variables: true
---
{% capture table_example %}
</table>
{% endcapture %}
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Tables</h1>
- <h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
- {%
- include meta.html
- colors=false
- sizes=false
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>You simply need to attach a single <code>.table</code> CSS class on a <code><table></code> with the following structure:</p>
+<div class="content">
+ <p>You simply need to attach a single <code>.table</code> CSS class on a <code><table></code> with the following structure:</p>
+ <ul>
+ <li>
+ <code>table</code> the main <strong>container</strong>
<ul>
<li>
- <code>table</code> the main <strong>container</strong>
+ <code>thead</code> the optional <strong>top</strong> part of the table
+ </li>
+ <li>
+ <code>tfoot</code> the optional <strong>bottom</strong> part of the table
+ </li>
+ <li>
+ <code>tbody</code> the main <strong>content</strong> of the table
<ul>
<li>
- <code>thead</code> the optional <strong>top</strong> part of the table
- </li>
- <li>
- <code>tfoot</code> the optional <strong>bottom</strong> part of the table
- </li>
- <li>
- <code>tbody</code> the main <strong>content</strong> of the table
+ <code>tr</code> each table <strong>row</strong>
<ul>
<li>
- <code>tr</code> each table <strong>row</strong>
- <ul>
- <li>
- <code>th</code> a table cell <strong>heading</strong>
- </li>
- <li>
- <code>td</code> a table <strong>cell</strong>
- </li>
- </ul>
+ <code>th</code> a table cell <strong>heading</strong>
+ </li>
+ <li>
+ <code>td</code> a table <strong>cell</strong>
</li>
</ul>
</li>
</ul>
</li>
</ul>
- <p>
- You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
- </p>
- </div>
+ </li>
+ </ul>
+ <p>
+ You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
+ </p>
+</div>
- {% include snippet.html content=table_example horizontal=true more=true %}
+{% include snippet.html content=table_example horizontal=true more=true %}
- {% include anchor.html name="Modifiers" %}
+{% include anchor.html name="Modifiers" %}
- <div class="columns">
- <div class="column">
- <p>Add <strong>borders</strong> to all the cells.</p>
- </div>
- <div class="column">
- <code>table is-bordered</code>
- </div>
- <div class="column is-half">
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>One</th>
- <th>Two</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Three</td>
- <td>Four</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
-
- <div class="columns">
- <div class="column">
- <p>Add <strong>stripes</strong> to the table.</p>
- </div>
- <div class="column">
- <code>table is-striped</code>
- </div>
- <div class="column is-half">
- <table class="table is-striped">
- <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>
- </div>
- </div>
-
- <div class="columns">
- <div class="column">
- <p>Make the cells <strong>narrower</strong>.</p>
- </div>
- <div class="column">
- <code>table is-narrow</code>
- </div>
- <div class="column is-half">
- <table class="table is-narrow">
- <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>
- </div>
- </div>
+<div class="columns">
+ <div class="column">
+ <p>Add <strong>borders</strong> to all the cells.</p>
+ </div>
+ <div class="column">
+ <code>table is-bordered</code>
+ </div>
+ <div class="column is-half">
+ <table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>One</th>
+ <th>Two</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Three</td>
+ <td>Four</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
- <p>You can add a <strong>hover effect</strong> on each row</p>
- </div>
- <code>table is-hoverable</code>
- </div>
-
<div class="column is-half">
- <table class="table is-hoverable">
- <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>
- </div>
- </div>
+<div class="columns">
+ <div class="column">
+ <p>Add <strong>stripes</strong> to the table.</p>
+ </div>
+ <div class="column">
+ <code>table is-striped</code>
+ </div>
+ <div class="column is-half">
+ <table class="table is-striped">
+ <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>
+ </div>
+</div>
- <p>You can have a <strong>fullwidth</strong> table.</p>
- </div>
- <code>table is-fullwidth</code>
- </div>
-
<div class="column is-half">
- <table class="table is-fullwidth">
- <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>
- </div>
- </div>
+<div class="columns">
+ <div class="column">
+ <p>Make the cells <strong>narrower</strong>.</p>
+ </div>
+ <div class="column">
+ <code>table is-narrow</code>
+ </div>
+ <div class="column is-half">
+ <table class="table is-narrow">
+ <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>
+ </div>
+</div>
- <p>You can <strong>combine</strong> all five modifiers.</p>
- </div>
- <code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
- </div>
-
<div class="column is-half">
- <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
- <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>
- </div>
- </div>
+<div class="columns">
+ <div class="column">
+ <p>You can add a <strong>hover effect</strong> on each row</p>
+ </div>
+ <div class="column">
+ <code>table is-hoverable</code>
+ </div>
+ <div class="column is-half">
+ <table class="table is-hoverable">
+ <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>
+ </div>
+</div>
- {% include variables.html type='element' %}
+<div class="columns">
+ <div class="column">
+ <p>You can have a <strong>fullwidth</strong> table.</p>
+ </div>
+ <div class="column">
+ <code>table is-fullwidth</code>
+ </div>
+ <div class="column is-half">
+ <table class="table is-fullwidth">
+ <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>
+ </div>
+</div>
+<div class="columns">
+ <div class="column">
+ <p>You can <strong>combine</strong> all five modifiers.</p>
+ </div>
+ <div class="column">
+ <code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
</div>
-</section>
+ <div class="column is-half">
+ <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
+ <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>
+ </div>
+</div>
+
+{% include variables.html type='element' %}
---
title: Tags
+subtitle: "Small <strong>tag labels</strong> to insert anywhere"
layout: documentation
doc-tab: elements
doc-subtab: tag
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-tag
+meta:
+ colors: true
+ sizes: true
+ variables: true
---
{% capture tag %}
</div>
{% endcapture %}
-<section class="section">
- <div class="container">
- <h1 class="title">Tags</h1>
- <h2 class="subtitle">
- Small <strong>tag labels</strong> to insert anywhere
- </h2>
- {%
- include meta.html
- colors=true
- sizes=true
- variables=true
- %}
-
- <hr>
-
- <div class="columns">
- <div class="column is-4">
- By default, a <strong>tag</strong> is a 1.5rem high label.
- </div>
- <div class="column is-2">
- <span class="tag">
- Tag label
- </span>
- </div>
- <div class="column is-6">
- {% highlight html %}{{ tag }}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-4">
+ By default, a <strong>tag</strong> is a 1.5rem high label.
+ </div>
+ <div class="column is-2">
+ <span class="tag">
+ Tag label
+ </span>
+ </div>
+ <div class="column is-6">
+ {% highlight html %}{{ tag }}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Colors" %}
-
- <div class="columns">
- <div class="column is-4">
- Like with buttons, there are <strong>10 different colors</strong> available.
- </div>
- <div class="column is-2">
- <p class="field">
- <span class="tag is-black">
- Black
- </span>
- </p>
- <p class="field">
- <span class="tag is-dark">
- Dark
- </span>
- </p>
- <p class="field">
- <span class="tag is-light">
- Light
- </span>
- </p>
- <p class="field">
- <span class="tag is-white">
- White
- </span>
- </p>
- <p class="field">
- <span class="tag is-primary">
- Primary
- </span>
- </p>
- <p class="field">
- <span class="tag is-link">
- Link
- </span>
- </p>
- <p class="field">
- <span class="tag is-info">
- Info
- </span>
- </p>
- <p class="field">
- <span class="tag is-success">
- Success
- </span>
- </p>
- <p class="field">
- <span class="tag is-warning">
- Warning
- </span>
- </p>
- <span class="tag is-danger">
- Danger
- </span>
- </div>
- <div class="column is-6">
- {% highlight html %}{{ tags_colors }}{% endhighlight %}
- </div>
- </div>
+{% include anchor.html name="Colors" %}
- {% include anchor.html name="Sizes" %}
-
- <div class="columns">
- <div class="column is-4">
- And <strong>2 additional</strong> sizes.
- </div>
- <div class="column is-2">
- <p class="field">
- <span class="tag is-primary is-medium">
- Medium
- </span>
- </p>
- <p class="field">
- <span class="tag is-info is-large">
- Large
- </span>
- </p>
- </div>
- <div class="column is-6">
- {% highlight html %}{{ sizes }}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-4">
+ Like with buttons, there are <strong>10 different colors</strong> available.
+ </div>
+ <div class="column is-2">
+ <p class="field">
+ <span class="tag is-black">
+ Black
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-dark">
+ Dark
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-light">
+ Light
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-white">
+ White
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-primary">
+ Primary
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-link">
+ Link
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-info">
+ Info
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-success">
+ Success
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-warning">
+ Warning
+ </span>
+ </p>
+ <span class="tag is-danger">
+ Danger
+ </span>
+ </div>
+ <div class="column is-6">
+ {% highlight html %}{{ tags_colors }}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Modifiers" %}
-
- <div class="columns">
- <div class="column is-4">
- You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
- </div>
- <div class="column is-2">
- {{ rounded }}
- </div>
- <div class="column is-6">
- {% highlight html %}{{ rounded }}{% endhighlight %}
- </div>
- </div>
+{% include anchor.html name="Sizes" %}
- <div class="columns">
- <div class="column is-4">
- You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
- </div>
- <div class="column is-2">
- {{ is_delete }}
- </div>
- <div class="column is-6">
- {% highlight html %}{{ is_delete }}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-4">
+ And <strong>2 additional</strong> sizes.
+ </div>
+ <div class="column is-2">
+ <p class="field">
+ <span class="tag is-primary is-medium">
+ Medium
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-info is-large">
+ Large
+ </span>
+ </p>
+ </div>
+ <div class="column is-6">
+ {% highlight html %}{{ sizes }}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Combinations" %}
-
- <div class="columns">
- <div class="column is-4">
- You can append a <strong>delete button</strong>.
- </div>
- <div class="column is-2">
- <p class="field">
- <span class="tag is-success">
- Bar
- <button class="delete is-small"></button>
- </span>
- </p>
- <p class="field">
- <span class="tag is-warning is-medium">
- Hello
- <button class="delete is-small"></button>
- </span>
- </p>
- <p class="field">
- <span class="tag is-danger is-large">
- World
- <button class="delete"></button>
- </span>
- </p>
- </div>
- <div class="column is-6">
- {% highlight html %}{{ delete }}{% endhighlight %}
- </div>
- </div>
+{% include anchor.html name="Modifiers" %}
- {% include anchor.html name="List of tags" %}
-
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>
- You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
- </p>
- </div>
- <div class="bd-example">
- {{ tags }}
- </div>
- </div>
- <div class="column">
- {% highlight html %}{{ tags }}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-4">
+ You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
+ </div>
+ <div class="column is-2">
+ {{ rounded }}
+ </div>
+ <div class="column is-6">
+ {% highlight html %}{{ rounded }}{% endhighlight %}
+ </div>
+</div>
+
+<div class="columns">
+ <div class="column is-4">
+ You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
+ </div>
+ <div class="column is-2">
+ {{ is_delete }}
+ </div>
+ <div class="column is-6">
+ {% highlight html %}{{ is_delete }}{% endhighlight %}
+ </div>
+</div>
+
+{% include anchor.html name="Combinations" %}
+
+<div class="columns">
+ <div class="column is-4">
+ You can append a <strong>delete button</strong>.
+ </div>
+ <div class="column is-2">
+ <p class="field">
+ <span class="tag is-success">
+ Bar
+ <button class="delete is-small"></button>
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-warning is-medium">
+ Hello
+ <button class="delete is-small"></button>
+ </span>
+ </p>
+ <p class="field">
+ <span class="tag is-danger is-large">
+ World
+ <button class="delete"></button>
+ </span>
+ </p>
+ </div>
+ <div class="column is-6">
+ {% highlight html %}{{ delete }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>
- If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
- </p>
- </div>
- <div class="bd-example">
- {{ tags_multiple }}
- </div>
- </div>
- <div class="column highlight-full">
- {% highlight html %}{{ tags_multiple }}{% endhighlight %}
- </div>
+{% include anchor.html name="List of tags" %}
+
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
+ </p>
+ </div>
+ <div class="bd-example">
+ {{ tags }}
</div>
+ </div>
+ <div class="column">
+ {% highlight html %}{{ tags }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>
- You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
- </p>
- </div>
- <div class="bd-example">
- {{ tags_addons }}
- </div>
- </div>
- <div class="column highlight-full">
- {% highlight html %}{{ tags_addons }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
+ </p>
+ </div>
+ <div class="bd-example">
+ {{ tags_multiple }}
</div>
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{ tags_multiple }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>
- You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
- </p>
- </div>
- <div class="bd-example">
- {{ tags_delete_addons }}
- </div>
- </div>
- <div class="column highlight-full">
- {% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
+ </p>
+ </div>
+ <div class="bd-example">
+ {{ tags_addons }}
</div>
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{ tags_addons }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>
- If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
- </p>
- </div>
- <div class="bd-example">
- {{ tags_field_addons }}
- </div>
- </div>
- <div class="column highlight-full">
- {% highlight html %}{{ tags_field_addons }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
+ </p>
</div>
+ <div class="bd-example">
+ {{ tags_delete_addons }}
+ </div>
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>
- This can be useful for a long list of <strong>blog tags</strong>.
- </p>
- </div>
- <div class="bd-example">
- {{ tags_blog_addons }}
- </div>
- </div>
- <div class="column">
- {% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
+ </p>
</div>
+ <div class="bd-example">
+ {{ tags_field_addons }}
+ </div>
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{ tags_field_addons }}{% endhighlight %}
+ </div>
+</div>
- {% include variables.html type='element' %}
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ This can be useful for a long list of <strong>blog tags</strong>.
+ </p>
+ </div>
+ <div class="bd-example">
+ {{ tags_blog_addons }}
+ </div>
</div>
-</section>
+ <div class="column">
+ {% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
+ </div>
+</div>
+
+{% include variables.html type='element' %}
---
title: Title and Subtitle
+subtitle: "Simple <strong>headings</strong> to add depth to your page"
layout: documentation
doc-tab: elements
doc-subtab: title
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-title
+meta:
+ colors: false
+ sizes: true
+ variables: true
---
{% capture default %}
<p class="subtitle is-5">Subtitle 5</p>
{% endcapture %}
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Titles</h1>
- <h2 class="subtitle">
- Simple <strong>headings</strong> to add depth to your page
- </h2>
- {%
- include meta.html
- colors=false
- sizes=true
- variables=true
- %}
-
- <hr>
-
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>There are <strong>2 types</strong> of heading:</p>
- <ul>
- <li>
- <code>.title</code>
- </li>
- <li>
- <code>.subtitle</code>
- </li>
- </ul>
- </div>
- </div>
- <div class="column">
- <p class="title">Title</p>
- <p class="subtitle">Subtitle</p>
- </div>
- <div class="column">
- {% highlight html %}{{ default }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>There are <strong>2 types</strong> of heading:</p>
+ <ul>
+ <li>
+ <code>.title</code>
+ </li>
+ <li>
+ <code>.subtitle</code>
+ </li>
+ </ul>
</div>
+ </div>
+ <div class="column">
+ <p class="title">Title</p>
+ <p class="subtitle">Subtitle</p>
+ </div>
+ <div class="column">
+ {% highlight html %}{{ default }}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Sizes" %}
-
- <div class="columns">
- <div class="column">
- <p>There are <strong>6 sizes</strong> available:</p>
- </div>
- <div class="column">
- <p class="title is-1">Title 1</p>
- <p class="title is-2">Title 2</p>
- <p class="title is-3">Title 3 (default size)</p>
- <p class="title is-4">Title 4</p>
- <p class="title is-5">Title 5</p>
- <p class="title is-6">Title 6</p>
- </div>
- <div class="column">
- {% highlight html %}{{ title_sizes }}{% endhighlight %}
- </div>
- </div>
+{% include anchor.html name="Sizes" %}
- <div class="columns">
- <div class="column"></div>
- <div class="column">
- <p class="subtitle is-1">Subtitle 1</p>
- <p class="subtitle is-2">Subtitle 2</p>
- <p class="subtitle is-3">Subtitle 3</p>
- <p class="subtitle is-4">Subtitle 4</p>
- <p class="subtitle is-5">Subtitle 5 (default size)</p>
- <p class="subtitle is-6">Subtitle 6</p>
- </div>
- <div class="column">
- {% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column">
+ <p>There are <strong>6 sizes</strong> available:</p>
+ </div>
+ <div class="column">
+ <p class="title is-1">Title 1</p>
+ <p class="title is-2">Title 2</p>
+ <p class="title is-3">Title 3 (default size)</p>
+ <p class="title is-4">Title 4</p>
+ <p class="title is-5">Title 5</p>
+ <p class="title is-6">Title 6</p>
+ </div>
+ <div class="column">
+ {% highlight html %}{{ title_sizes }}{% endhighlight %}
+ </div>
+</div>
+
+<div class="columns">
+ <div class="column"></div>
+ <div class="column">
+ <p class="subtitle is-1">Subtitle 1</p>
+ <p class="subtitle is-2">Subtitle 2</p>
+ <p class="subtitle is-3">Subtitle 3</p>
+ <p class="subtitle is-4">Subtitle 4</p>
+ <p class="subtitle is-5">Subtitle 5 (default size)</p>
+ <p class="subtitle is-6">Subtitle 6</p>
+ </div>
+ <div class="column">
+ {% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
+ </div>
+</div>
- <hr>
-
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
- <p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
- </div>
- </div>
- <div class="column">
- <div class="block">
- <p class="title is-1">Title 1</p>
- <p class="subtitle is-3">Subtitle 3</p>
- </div>
- <div class="block">
- <p class="title is-2">Title 2</p>
- <p class="subtitle is-4">Subtitle 4</p>
- </div>
- <div class="block">
- <p class="title is-3">Title 3</p>
- <p class="subtitle is-5">Subtitle 5</p>
- </div>
- </div>
- <div class="column">
- {% highlight html %}{{ combine }}{% endhighlight %}
- </div>
- </div>
+<hr>
- <hr>
-
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>
- <span class="tag is-success">New!</span>
- </p>
- <p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
- </div>
- </div>
- <div class="column">
- <div class="block">
- <p class="title is-1 is-spaced">Title 1</p>
- <p class="subtitle is-3">Subtitle 3</p>
- </div>
- <div class="block">
- <p class="title is-2 is-spaced">Title 2</p>
- <p class="subtitle is-4">Subtitle 4</p>
- </div>
- <div class="block">
- <p class="title is-3 is-spaced">Title 3</p>
- <p class="subtitle is-5">Subtitle 5</p>
- </div>
- </div>
- <div class="column">
- {% highlight html %}{{ spaced }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
+ <p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
+ </div>
+ </div>
+ <div class="column">
+ <div class="block">
+ <p class="title is-1">Title 1</p>
+ <p class="subtitle is-3">Subtitle 3</p>
+ </div>
+ <div class="block">
+ <p class="title is-2">Title 2</p>
+ <p class="subtitle is-4">Subtitle 4</p>
+ </div>
+ <div class="block">
+ <p class="title is-3">Title 3</p>
+ <p class="subtitle is-5">Subtitle 5</p>
</div>
+ </div>
+ <div class="column">
+ {% highlight html %}{{ combine }}{% endhighlight %}
+ </div>
+</div>
- {% include variables.html type='element' %}
+<hr>
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ <span class="tag is-success">New!</span>
+ </p>
+ <p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
+ </div>
</div>
-</section>
+ <div class="column">
+ <div class="block">
+ <p class="title is-1 is-spaced">Title 1</p>
+ <p class="subtitle is-3">Subtitle 3</p>
+ </div>
+ <div class="block">
+ <p class="title is-2 is-spaced">Title 2</p>
+ <p class="subtitle is-4">Subtitle 4</p>
+ </div>
+ <div class="block">
+ <p class="title is-3 is-spaced">Title 3</p>
+ <p class="subtitle is-5">Subtitle 5</p>
+ </div>
+ </div>
+ <div class="column">
+ {% highlight html %}{{ spaced }}{% endhighlight %}
+ </div>
+</div>
+
+{% include variables.html type='element' %}
$table-striped-row-even-hover-background-color: $white-ter !default
.table
+ +block
background-color: $table-background-color
color: $table-color
- margin-bottom: 1.5rem
td,
th
border: $table-cell-border
+overflow-touch
overflow: auto
overflow-y: hidden
- max-width: 100%
\ No newline at end of file
+ max-width: 100%
projects / thirdparty / bulma.git / commitdiff
