{% extends 'layout.twig' %} {% set title %}Matomo UI demo{% endset %} {% block head %} {{ parent() }} {% endblock %} {% block root %}

Matomo UI demo

This page is intended to show all the UI components and styles available to use in Matomo.

Grid system

Materialize's grid system allows to organize the content in columns, all the while staying responsive for smaller screens.

.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m1
.col m8
.col m4
.col m4
.col m4
.col m4
.col m6
.col m6

Read more about Materialize's grid system.

Typography

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading
h6. heading

This is a paragraph, and this is a link.

Another paragraph, 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.

Alignment classes

Left aligned block.

Center aligned block.

Right aligned block.

<p class="left">Left aligned block.</p>
<p class="center">Center aligned block.</p>
<p class="right">Right aligned block.</p>

Left aligned text.

Center aligned text.

Right aligned text.

<p class="left-align">Left aligned text.</p>
<p class="center-align">Center aligned text.</p>
<p class="right-align">Right aligned text.</p>

Lists

<ul>
  <li>...</li>
</ul>

Buttons

Standard buttons

Link
<a class="btn" href="#">Link</a>
<input type="button" class="btn" value="Input">
<input type="submit" class="btn" value="Submit">

Large buttons

Large link button
<button class="btn btn-large">Large button</button>
<a class="btn btn-large" href="#">Large button</a>

Block buttons

<a class="btn btn-block" href="#">Block button</a>
<a class="btn btn-large btn-block" href="#">Large block button</a>

Icon buttons

 Link with an icon
<a class="btn" href="#"><span class="icon-add"> </span>Link with an icon</a>
<button class="btn"><span class="icon-play"> </span>Button with an icon</button>
<button type="submit" class="btn"><span class="icon-heart"> </span>Submit with an icon</button>

Outline buttons

Outline link button  Outline link with an icon
<a class="btn" href="#"><span class="icon-add"> </span>Link with an icon</a>

<button class="btn"><span class="icon-play"> </span>Button with an icon</button>
    

Flat buttons

Flat button Flat button
<a class="btn-flat" href="#">Flat button</a>
<a class="btn-flat" href="#"><span class="icon-add"></span></a>
<a class="btn-flat btn-large" href="#">Flat button</a>
<a class="btn-flat btn-large" href="#"><span class="icon-add"></span></a>

Vue Components

The following are components you can use within your own Vue components. Note: they will not work directly in HTML; they MUST be used within a Vue component.

{% endblock %}