Cozy-UI Styleguide

Cozy-UI Styleguide

5.1 Avatar

Display an avatar of a user or contact with initials or an image

Examples

Default styling

CD

.c-avatar--xsmall

Extra small size variant

CD

.c-avatar--small

Small size variant

CD

.c-avatar--large

Large size variant

CD

.c-avatar--xlarge

Extra large variant

CD 
<div class="c-avatar [modifier class]">
   <span class="c-avatar-initials">CD</span>
</div>
<div class="c-avatar [modifier class]">
   <img src="https://cozy.io/fr/images/cozy-logo_white.png" class="c-avatar-image" alt="">
</div>

5.2 Chip

Display an chip that represents complex identity

Example

File
Ada Lovelace
Developer Ada Lovelace 
<div>
   <div class="c-chip">
       <svg class="u-mr-half" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
           <path d="M14,5c0,-1.656 -1.344,-3 -3,-3l-6,0c-1.656,0 -3,1.344 -3,3l0,6c0,1.656 1.344,3 3,3l6,0c1.656,0 3,-1.344 3,-3l0,-6Z"/>
       </svg>
       File
   </div>
</div>
<div>
   <div class="c-chip">
       <div class="c-avatar c-avatar--small u-mr-half">
           <img src="https://cozy.io/fr/images/cozy-logo_white.png" class="c-avatar-image" alt="">
       </div>
       Ada Lovelace
   </div>
</div>
<div>
   <div class="c-chip">
       Developer
       <span class="c-chip-separator"></span>
       Ada Lovelace
   </div>
</div>
<div>
   <div class="c-chip c-chip--round">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
           <path d="M14,5c0,-1.656 -1.344,-3 -3,-3l-6,0c-1.656,0 -3,1.344 -3,3l0,6c0,1.656 1.344,3 3,3l6,0c1.656,0 3,-1.344 3,-3l0,-6Z"/>
       </svg>
   </div>
</div>

5.3.1 Label

Label element coupled with any other form elements like inputs, textareas, select,etc

Examples

Default styling

.is-error

Error variant

<form>
   <div>
       <label class="c-label [modifier class]" for="">Hello, I'm a label</label>
   </div>
</form>

Examples

Default styling

.is-error

Error variant

.c-input-text--tiny

Tiny size variant

.c-input-text--medium

Medium size variant

.c-input-text--large

Large size variant (default)

.c-input-text--fullwidth

Full width variant

<form>
   <div class="u-mb-1">
       <input type="text" class="c-input-text [modifier class]" placeholder="I'm an input[type=text]" value="" />
   </div>
   <div class="u-mb-1">
       <input type="password" class="c-input-text [modifier class]" placeholder="I'm an input[type=password]" value="" />
   </div>
   <div class="u-mb-1">
       <input type="url" class="c-input-text [modifier class]" placeholder="I'm an input[type=url]" value="" />
   </div>
   <div class="u-mb-1">
       <input type="email" class="c-input-text [modifier class]" placeholder="I'm an input[type=email]" value="" />
   </div>
</form>

Examples

Default styling

Standard checkbox

Mixed checkbox

.is-error

Error variant

Standard checkbox

Mixed checkbox

<form>
   <h3>Standard checkbox</h3>
   <div>
       <label class="c-input-checkbox [modifier class]">
           <input type="checkbox" />
           <span>I'm a checkbox</span>
       </label>
   </div>
   <h3>Mixed checkbox</h3>
   <div>
       <label class="c-input-checkbox [modifier class]" aria-checked="mixed">
           <input type="checkbox" />
           <span>I'm a checkbox</span>
       </label>
   </div>
</form>

Examples

Default styling

.is-error

Error variant

<form>
   <div>
       <label class="u-mb-half c-input-radio [modifier class]">
           <input type="radio" name="radio"/>
           <span>I'm a radio one</span>
       </label>
       <label class="u-mb-half c-input-radio [modifier class]">
           <input type="radio" name="radio"/>
           <span>I'm a radio two</span>
       </label>
   </div>
</form>

Examples

Default styling

.is-error

Error variant

.c-textarea--tiny

Tiny size variant

.c-textarea--medium

Medium size variant

.c-textarea--fullwidth

Full width variant

<form>
   <div>
       <textarea class="c-textarea [modifier class]" placeholder="Once upon a time…"></textarea>
   </div>
</form>

Examples

Default styling

.is-error

Error variant

.c-select--tiny

Tiny size variant

.c-select--medium

Medium size variant

.c-select--fullwidth

Full width variant

<form>
   <div>
       <select class="c-select [modifier class]">
           <option value="" disabled selected>Choose your option</option>
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
           <option value="4">Option 4</option>
       </select>
   </div>
</form>

5.4 Navigation

Navigation component that displays a list of item link to other pages

<nav style="width: 220px">
    <ul class="c-nav">
        <li class="c-nav-item">
            <a class="c-nav-link is-active" href="#">
                <span class="c-nav-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <path d="M14,5c0,-1.656 -1.344,-3 -3,-3l-6,0c-1.656,0 -3,1.344 -3,3l0,6c0,1.656 1.344,3 3,3l6,0c1.656,0 3,-1.344 3,-3l0,-6Z"/>
                    </svg>
                </span>
                <span class="c-nav-text">Link 1</span>
            </a>
        </li>
        <li class="c-nav-item">
            <a class="c-nav-link" href="#">
                <span class="c-nav-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <path d="M14,5c0,-1.656 -1.344,-3 -3,-3l-6,0c-1.656,0 -3,1.344 -3,3l0,6c0,1.656 1.344,3 3,3l6,0c1.656,0 3,-1.344 3,-3l0,-6Z"/>
                    </svg>
                </span>
                <span class="c-nav-text">Link 2</span>
            </a>
        </li>
        <li class="c-nav-item">
            <a class="c-nav-link" href="#">
                <span class="c-nav-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <path d="M14,5c0,-1.656 -1.344,-3 -3,-3l-6,0c-1.656,0 -3,1.344 -3,3l0,6c0,1.656 1.344,3 3,3l6,0c1.656,0 3,-1.344 3,-3l0,-6Z"/>
                    </svg>
                </span>
                <span class="c-nav-text">Link 3</span>
            </a>
        </li>
    </ul>
</nav>

5.5 Table

For a flexibility purpose, complex tables use <div> element instead of <table> but you still can use <table> for simpler tables, see table-legacy below.

By default, only .c-table-cell--primary has an ellipsis effect, but you can have it on any cell by applying the .c-table-ellipsis class.

NB: You should decide by yourself the sizes of the columns. In those examples we use the style tag but you definitely should use CSS classes.

Example

Table with div element

Header 1
Header 2
Header 3
Lorem ipsum dolor sit amet
lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam
corporis
placeat
Divider
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam
corporis
placeat
<div>
   <h2>Table with div element</h2>
   <div class="c-table">
       <div class="c-table-head">
           <div class="c-table-row-head">
               <div class="c-table-header" style="width:50%">Header 1</div>
               <div class="c-table-header" style="width:25%">Header 2</div>
               <div class="c-table-header" style="width:25%">Header 3</div>
           </div>
       </div>
       <div class="c-table-body">
           <div class="c-table-row is-selected">
               <div class="c-table-cell c-table-cell--primary" style="width:50%">Lorem ipsum dolor sit amet</div>
               <div class="c-table-cell" style="width:25%">lorem</div>
               <div class="c-table-cell c-table-ellipsis" style="width:25%">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
           </div>
           <div class="c-table-row">
               <div class="c-table-cell c-table-cell--primary" style="width:50%">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam</div>
               <div class="c-table-cell" style="width:25%">corporis</div>
               <div class="c-table-cell" style="width:25%">placeat</div>
           </div>
           <div class="c-table-divider">Divider</div>
           <div class="c-table-row">
               <div class="c-table-cell c-table-cell--primary" style="width:50%">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam</div>
               <div class="c-table-cell" style="width:25%">corporis</div>
               <div class="c-table-cell" style="width:25%">placeat</div>
           </div>
       </div>
   </div>
</div>

5.6 Table legacy

You also can use the <table> if you want although it could be tricky for complex tables.

List of utility classes for table

  • .is-selected on a <tr> to highlight an entire line
  • .c-table-divider on a <tr> to create a divider in your data table
  • .c-table-cell--primary on a <td> to bring out a cell
  • .c-table-ellipsis on a <td> to add an ellipsis effect without adding table-layout: fixed property to the table. In order for this to work you MUST have 2 <div> nested inside you <td>. See example

NB: Unlike the <div> table, the cell with .c-table-cell--primary does not have an ellipsis effect by default, if you want it must you add the .c-table-ellipsis class and the needed DOM.

Example

Table with table element

Header 1 Header 2 Header 3
Lorem ipsum dolor sit amet lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam
 corporis placeat
Divider
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam
 corporis placeat 
<div>
   <h2>Table with table element</h2>
   <table class="c-table">
       <thead>
           <tr>
               <th>Header 1</th>
               <th>Header 2</th>
               <th>Header 3</th>
           </tr>
       </thead>
       <tbody>
           <tr class="is-selected">
               <td class="c-table-cell--primary">Lorem ipsum dolor sit amet</td>
               <td>lorem</td>
               <td>ipsum</td>
           </tr>
           <tr>
               <td class="c-table-cell--primary c-table-ellipsis">
                   <div>
                       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam</div>
                   </div>
               </td>
               <td>corporis</td>
               <td>placeat</td>
           </tr>
           <tr class="c-table-divider">
               <td colspan="3">Divider</td>
           </tr>
           <tr>
               <td class="c-table-cell--primary c-table-ellipsis">
                    <div>
                       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptate officia culpa debitis, vero quia quae vel laboriosam</div>
                   </div>
               </td>
               <td>corporis</td>
               <td>placeat</td>
           </tr>
       </tbody>
   </table>
</div>

Examples

Default styling

.c-btn--secondary

Basic alternative

.c-btn--danger

Danger

.c-btn--danger-outline

Danger outlined

.c-btn--highlight

Highlighted button to catch the eye

.c-btn--text

Text only button

<div class="u-p-1">
    <button class="c-btn [modifier class]"><span>Click me, I'm a button!</span></button>
    <button class="c-btn c-btn--subtle [modifier class]"><span>Click me, I'm a button!</span></button>
</div>

Examples

Default styling

.c-btn--tiny

Tiny button (for Alerts mostly)

.c-btn--small

Small button

.c-btn--large

Large button

<div class="u-p-1">
    <button class="c-btn [modifier class]"><span>Click me</span></button>
    <button class="c-btn c-btn--subtle [modifier class]"><span>Click me</span></button>
</div>

Examples

Default styling

.c-btn--narrow

Narrow button (ignore button's min-width)

.c-btn--full

Full button

<div class="u-p-1">
    <button class="c-btn [modifier class]"><span>Click</span></button>
    <button class="c-btn c-btn--subtle [modifier class]"><span>Click</span></button>
</div>

5.7.3 Buttons with icons

Those buttons can inherit any flavour of buttons described above.

The SVG icon is filled with a color consistent with the theme of its button.

Examples

Default styling

.c-btn--secondary

Basic alternative

.c-btn--danger

Danger

.c-btn--danger-outline

Danger outlined

.c-btn--highlight

Highlighted button to catch the eye

<div class="u-p-1">
   <button class="c-btn [modifier class]">
       <span>
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
               <path d="M14,5c0,-1.656 -1.344,-3 -3,-3l-6,0c-1.656,0 -3,1.344 -3,3l0,6c0,1.656 1.344,3 3,3l6,0c1.656,0 3,-1.344 3,-3l0,-6Z"/>
           </svg>
           <span>Click me, I'm a button!</span>
       </span>
   </button>
   <button class="c-btn c-btn--subtle [modifier class]">
       <span>
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
               <path d="M14,5c0,-1.656 -1.344,-3 -3,-3l-6,0c-1.656,0 -3,1.344 -3,3l0,6c0,1.656 1.344,3 3,3l6,0c1.656,0 3,-1.344 3,-3l0,-6Z"/>
           </svg>
           <span>Click me, I'm a button!</span>
       </span>
   </button>
</div>
<div class="u-p-1">
    <button class="c-btn-alert [modifier class] u-m-1"><span>Click me, I'm a button!</span></button>
    <a href="#" class="c-btn-alert [modifier class] u-m-1"><span>Click me, I'm a link!</span></a>
</div>
<div class="u-p-1" style="background-color: darkgrey; width: 50%;">
    <a hre="#" class="[modifier class] u-mb-1"><span>Click me, I'm a link!</span></a>
</div>