UI Elements

This page describes how to use all of the UI elements defined in ui.css.

You can see all of the UI elements and how they work on different screen sizes at http://<local Cardie server>/ui.

Usage

To use the UI elements, import the two stylesheets like this:

<link rel="stylesheet" type="text/css" href="{% static '/main/variables.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/main/ui.css' %}">

Buttons

ui_button_large

<button class="ui_button_large">Large Button <i class="ph-bold ph-arrow-circle-right"></i></button>

ui_button_grid

<button class="ui_button_grid">Grid Button <i class="ph-bold ph-arrow-fat-line-down"></i></button>

ui_button_icon

<button class="ui_button_icon"><i class="ph-bold ph-diamonds-four"></i></button>

ui_button_smallicon

<button class="ui_button_smallicon"><i class="ph ph-flag-banner"></i></button>

ui_button_small

<button class="ui_button_small">Small Button</button>

Text

ui_text_header

<p class="ui_text_header">Header Text</p>

ui_text_header_left

<p class="ui_text_header_left">Header Text Left</p>

ui_text_subheader

<p class="ui_text_subheader">Subheader Text</p>

ui_text_subheader_left

<p class="ui_text_subheader_left">Subheader Text Left</p>

ui_text_smallersubheader

<p class="ui_text_smallersubheader">Smaller Subheader Text</p>

ui_text_body

<p class="ui_text_body">Body Text</p>

ui_text_description

<p class="ui_text_description">Description Text</p>

Image

ui_image_generic

<img class="ui_image_generic" style="width: 500px;" src="https://raw.githubusercontent.com/nfoert/cardie/development/repo/images/cardie.png">

Status Boxes

ui_status_info

<div class="ui_status_info">
    <i class="ph-bold ph-info ui_status_icon"></i>
    <p class="ui_status_text">Information status box</p>
</div>

ui_status_warning

<div class="ui_status_warning">
    <i class="ph-bold ph-warning ui_status_icon"></i>
    <p class="ui_status_text">Warning status box</p>
</div>

ui_status_critical

<div class="ui_status_critical">
    <i class="ph-bold ph-warning-octagon ui_status_icon"></i>
    <p class="ui_status_text">Critical status box</p>
</div>

Text Areas

ui_input_generic

<input type="text" class="ui_input_generic"></input>

Spacers

ui_spacer

<div class="ui_spacer"></div>

Separators

ui_separator_vertical

<div class="ui_separator_vertical"></div>

ui_separator_horizontal

<div class="ui_separator_horizontal"></div>