– UI Recursos

Table of Contents

Popular assets	Blocs
Buttons	Lists
Tables	Columns
Divers

Popular assets

Button

Your text

<a class="button" title="Click to get to website" href="#" target="_blank">Your text</a>

• Button available in blue with class=”button is-primary”
• Please don’t forget to define the “title” attribute which defines the text that appears on hover the link

Bullet points

• Argument 1
• Argument 2

<ul>
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Extrait code HTML

<a class="button" href="#" target="_blank">Your text</a>

You can use this code to insert HTML / CSS code without being interpreted by the browser.
In addition to wrapping your code snippet with the pre and code tags, you must replace the & lt; by & lt; and the & gt; by & gt;
This is done quickly using the “Find and Replace” function on Word or Notepad (shortcut CTRL + H).

<pre><code>
<a class="button" title="Page title" href="#">Your text</a>
</code></pre>

Blocs

Box

My incredible Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis.

<p class="box"><i class="fa fa-lightbulb-o"></i><span class="title is-5">My incredible Title</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Bloc Tips

My incredible Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis.

<p class="bloc-tips"><i class="fa fa-lightbulb-o"></i><span class="title is-5">My incredible Title</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Bloc Tips with bullet points

<div class="bloc-tips"><i class="fa fa-book"></i><span class="title is-5">More information on this topic</span>
If you're looking for more information on this topic, we invite you to read:
<ul class="icon-chevron" style="margin-bottom: 0px;">
 	<li><a title="Titre de l'article" href="#" target="_blank" rel="noopener noreferrer">Article 1</a></li>
 	<li><a title="Titre de l'article" href="#" target="_blank" rel="noopener noreferrer">Article 2</a></li>
 	<li><a title="Titre de l'article" href="#" target="_blank" rel="noopener noreferrer">Article 3</a></li>
</ul>
</div>
<div class="spacer1"></div>

Quote

“If you’re proud of your product during his launch, it means that you waited too long.”

<p class="bloc-quote">"Your text."</p>

Summary – 2 columns

<div class="bloc-exec">
<span class="title is-6 pink uppercase">Summary</span>
<div class="columns">
<div class="column">
<ul class="icon-chevron">
 	<li><strong>Argument</strong> : Text.</li>
 	<li><strong>Argument</strong> : Text.</li>
</ul>
</div>
<div class="column">
<ul class="icon-chevron">
 	<li><strong>Argument</strong> : Text.</li>
 	<li><strong>Argument</strong> : Text.</li>
</ul>
</div>
</div>
</div>

Synthèse structurée – 1 colonne

<div class="bloc-exec">
<ul class="icon-chevron list-left">
 	<li><strong>Adapté pour</strong> : Présentation d'une activité, d'une offre de services ou d'un évènement.</li>
 	<li><strong>Technologie</strong> : WordPress, utilisé par 30% des sites dans le monde.</li>
</ul>
</div>

BUTTONS

Button – Classic

Your text

<a class="button" title="Text which appears on hover" href="#">Your text</a>

Button – Classic – Open in a new tab

Your text

<a class="button" title="Text which appears on hover" href="#" target="_blank">Your text</a>

Button light

Your text

<a class="button is-light" title="Text which appears on hover" href="#" >Your text</a>

Your text

<a class="button is-primary is-outlined" title="Text which appears on hover" href="#" >Your text</a>

Button Blue – Centered

<div class="buttons is-centered"><a class="button is-primary" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a></div>

<div class="buttons is-centered"><a class="button is-light is-fullwidth" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a></div>

Double Button

<div class="columns">
<div class="column is-2"><a class="button is-danger" title="Page title" href="#" target="_blank" rel="noopener">Your text</a></div>
<div class="column is-2"><a class="button is-primary" title="Page title" href="#" target="_blank" rel="noopener">Your text</a></div>
</div>

Button – More options

<div class="buttons">
<a class="button is-danger is-normal" title="Page title" href="#" target="_blank" rel="noopener noreferrer"><span class="icon is-small"><i class="fas fa-check"></i></span><span>Your text</span></a>
<a class="button is-primary is-medium" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
<a class="button is-primary is-medium is-outlined" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
<a class="button is-primary is-medium is-rounded" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
<a class="button is-primary is-large" title="Page title" href="#" target="_blank" rel="noopener noreferrer">Your text</a>
</div>

Bullet points

Bullet points – Classic

• Argument 1
• Argument 1
• Argument 1

<ul>
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Bullet points – Check

• Argument 1
• Argument 1
• Argument 1

<ul class="icon-check">
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Bullet points – Chevron – Left margin

• Argument 1
• Argument 1
• Argument 1

<ul class="icon-chevron margin-left-15">
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Bullet points – Checkbox

• Argument 1
• Argument 1
• Argument 1

<ul class="icon-checkbox">
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Bullet points – Cercle +

• Argument 1
• Argument 1
• Argument 1

<ul class="icon-circle-plus">
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Bullet points – Cercle –

• Argument 1
• Argument 1
• Argument 1

<ul class="icon-circle-minus">
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Custom icon

• Argument 1
• Argument 1
• Argument 1

<style>
.icon-twitter li:before {
content: '\f099c' !important; /* fa-check */
color: #e55d42;
}
</style>
<ul class="icon-twitter">
 	<li>Argument 1</li>
 	<li>Argument 2</li>
</ul>

Please note that the <style>..</style> code is CSS code. It should be copied in the “Header scripts” section.

Columns

N columns – Same size

Building a columns layout with Bulma is very simple:

1. Add a columns container
2. Add as many column elements as you want

Each column will have an equal width, no matter the number of columns.

<div class="columns">
<div class="column">
<p class="notification is-primary">First column</p>
</div>
<div class="column">
<p class="notification is-danger">Second column</p>
</div>
<div class="column">
<p class="notification is-success">Thirdcolumn</p>
</div>
<div class="column">
<p class="notification is-info">Fourth column</p>
</div>
<div class="column">
<p class="notification is-warning">Fifth column</p>
</div>
</div>

N columns – Custom size

If you want to change the size of a single column, you can use one of the following classes:

• is-three-quarters
• is-two-thirds
• is-half
• is-one-third
• is-one-quarter
• is-full

The other columns will fill up the remaining space automatically.

<div class="columns">
<div class="column is-one-quarter">
<p class="notification is-primary">First column<br />One quarter</p>
</div>
<div class="column is-one-third">
<p class="notification is-danger">Second column<br />One third</p>
</div>
<div class="column">
<p class="notification is-info">Third column<br />What is left</p>
</div>
</div>

For more information / options, please have a look at Bulma Documentation / Columns.

Table

Method #1 – Table with Div tag (recommended)

To build tables, we use Bulma “columns” and not classic table tag for responsive design purpose.
The easiest way to build a table is to use this Table Generator, basically a spreadsheet that generate the HTML code to copy / past into your page.

<div class='table table-primary'>
<div class='columns headline'>
<div class='column col1 is-3'>Title 1</div><div class='column col2 is-3'>Title 2</div><div class='column col3 is-2'>Title 3</div><div class='column col4 is-2'>Title 4</div><div class='column col5 is-2'>Title 5</div>
</div><div class='columns'>
<div class='column col1 is-3'>XYZ</div><div class='column col2 is-3'>Lorem Ipsum</div><div class='column col3 is-2'>Lorem Ipsum</div><div class='column col4 is-2'>Lorem Ipsum</div><div class='column col5 is-2'>Lorem Ipsum</div>
</div><div class='columns'>
<div class='column col1 is-3'>XXX</div><div class='column col2 is-3'>Example</div><div class='column col3 is-2'>Example</div><div class='column col4 is-2'>Example</div><div class='column col5 is-2'>Example</div>
</div>
</div>

Method #2 – Tables with Table tag

If never you have to copy an existing table, it could be much easier to use the classic tag “table”.
In this case, you have to use the CSS class “table-top-5”.

Title 1	Title 2	Title 3
Value A	Value B	Value C
Value A	Value B	Value C

<table class="table-top-5">
<tr>
<th width="50%">Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>Value A</td>
<td>Value B</td>
<td>Value C</td>
</tr>
<tr>
<td>Value A</td>
<td>Value B</td>
<td>Value C</td>
</tr>
</table>