mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
9094eff30a
* Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder
113 lines
3.3 KiB
HTML
113 lines
3.3 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: elements
|
|
doc-subtab: title
|
|
---
|
|
|
|
{% include 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>
|
|
<hr>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<p>There are <strong>2 types</strong> of heading:</p>
|
|
</div>
|
|
<div class="column">
|
|
<p class="title">Title</p>
|
|
<p class="subtitle">Subtitle</p>
|
|
</div>
|
|
<div class="column">
|
|
{% highlight html %}
|
|
<h1 class="title">Title</h1>
|
|
<h2 class="subtitle">Subtitle</h2>
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<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 %}
|
|
<h1 class="title is-1">Title 1</h1>
|
|
<h2 class="title is-2">Title 2</h2>
|
|
<h3 class="title is-3">Title 3</h3>
|
|
<h4 class="title is-4">Title 4</h4>
|
|
<h5 class="title is-5">Title 5</h5>
|
|
<h6 class="title is-6">Title 6</h6>
|
|
{% 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 %}
|
|
<h1 class="subtitle is-1">Subtitle 1</h1>
|
|
<h2 class="subtitle is-2">Subtitle 2</h2>
|
|
<h3 class="subtitle is-3">Subtitle 3</h3>
|
|
<h4 class="subtitle is-4">Subtitle 4</h4>
|
|
<h5 class="subtitle is-5">Subtitle 5</h5>
|
|
<h6 class="subtitle is-6">Subtitle 6</h6>
|
|
{% 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 %}
|
|
<p class="title is-1">Title 1</p>
|
|
<p class="subtitle is-3">Subtitle 3</p>
|
|
|
|
<p class="title is-2">Title 2</p>
|
|
<p class="subtitle is-4">Subtitle 4</p>
|
|
|
|
<p class="title is-3">Title 3</p>
|
|
<p class="subtitle is-5">Subtitle 5</p>
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|