{% extends 'layout.twig' %} {% set title %}Matomo UI demo{% endset %} {% block head %} {{ parent() }} {% endblock %} {% block root %}
This page is intended to show all the UI components and styles available to use in Matomo.
Materialize's grid system allows to organize the content in columns, all the while staying responsive for smaller screens.
Read more about Materialize's grid system.
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.
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>
<ul> <li>...</li> </ul>
<a class="btn" href="#">Link</a> <input type="button" class="btn" value="Input"> <input type="submit" class="btn" value="Submit">
<button class="btn btn-large">Large button</button> <a class="btn btn-large" href="#">Large button</a>
<a class="btn btn-block" href="#">Block button</a> <a class="btn btn-large btn-block" href="#">Large block button</a>
<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>
<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>
<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>
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.