Guide de style
La présente charte est soumise à une autorisation.
Veuillez contacter la Direction des Systèmes d'Information support@uca.fr
COLORS @20171013
bleu
uca
#178F96
bleu
clair
#5FC6CC
beige
foncé
#D7B797
beige
uca
#EBCEB2
beige
clair
#F4ECE5
gris
uca
#5E5C5C
gris
clair
#9C9C9C
blanc
cassé
#FAF8F5
amber
#FFCA28
red
#EF5350
pink
#F06292
purple
#BA68C8
blue
#64B5F6
teal
#4DB6AC
green
#81C784
orange
#FFB74D
brown
#A1887F
TEXTS
SIGNIKA
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.
MERRIWEATHER SANS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.

Balise H1

Balise H2

Balise H3

Balise H4

Balise H5
Balise H6
<h1>Balise H1</h1>
<hr>
<h2>Balise H2</h2>
<hr>
<h3>Balise H3</h3>
<hr>
<h4>Balise H4</h4>
<hr>
<h5>Balise H5</h5>
<hr>
<h6>Balise H6</h6>
Text body in a div

Paragraphe : Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div>Text body in a div</div>
<p>Paragraphe Lorem ipsum...</p>
LISTS
Lorem ipsum dolor | Lorem ipsum dolor ...
access_time12/12 à 12h12 personJohn Doe
Lorem ipsum dolor | Lorem ipsum dolor ...
access_time12/12 à 12h12 personBatman
Lorem ipsum dolor
access_time12/12 à 12h12 personJane Doe
Lorem ipsum dolor | Lorem ipsum dolor ...
access_time12/12 à 12h12 personJohn Doe
<dl>
  <dt><b>Lorem ipsum dolor </b><small>| Lorem ipsum dolor ...</small></dt>
  <dd><i class="material-icons md-12">access_time</i>12/12 à 12h12 <i class="material-icons md-12">person</i>John Doe</dd>
  <dt>Lorem ipsum dolor <small>| Lorem ipsum dolor ...</small></dt>
  <dd><i class="material-icons md-12">access_time</i>12/12 à 12h12 <i class="material-icons md-12">person</i>Batman</dd>
  <dt><b>Lorem ipsum dolor</b></dt>
  <dd><i class="material-icons md-12">access_time</i>12/12 à 12h12 <i class="material-icons md-12">person</i>Jane Doe</dd>
  <dt>Lorem ipsum dolor <small>| Lorem ipsum dolor ...</small></dt>
  <dd><i class="material-icons md-12">access_time</i>12/12 à 12h12 <i class="material-icons md-12">person</i>John Doe</dd>
</dl> <ul>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <ul>
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
  </ul>
</ul>
  1. Lorem ipsum dolor
  2. Lorem ipsum dolor
  3. Lorem ipsum dolor
  4. Lorem ipsum dolor
  5. Lorem ipsum dolor
  6. Lorem ipsum dolor
  7. Lorem ipsum dolor
  8. Lorem ipsum dolor
  9. Lorem ipsum dolor
  10. Lorem ipsum dolor
<ol>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem ipsum dolor</li>
</ol>
Column A Column B Column C Column D
Line 1-A Line 1-B Line 1-C Line 1-D
Line 2-A Line 2-B Line 2-C Line 2-D
Column A Column B Column C Column D
Line 1-A Line 1-B Line 1-C Line 1-D
Line 2-A Line 2-B Line 2-C Line 2-D
@20171017
<table class="table table-hover">
...
</table>

<table class="table table-blue">
...
</table>
DISPLAY
Card Title Default

Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Card Title Green

Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Card Title Pink

Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Card Title Amber

Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="card card-hover">
  <div class="title">Card Title Default</div>
  <p>Lorem ipsum dolor sit amet, ...</p>
</div>
...
<div class="card card-hover up">
<div class="card card-hover down">
<div class="card card-hover left">
<div class="card card-hover right">
...
  <div class="title title-amber">Card Title Amber</div>
  <div class="title title-red">Card Title Red</div>
  <div class="title title-pink">Card Title Pink</div>
  <div class="title title-purple">Card Title Purple</div>
  <div class="title title-blue">Card Title Blue</div>
  <div class="title title-teal">Card Title Teal</div>
  <div class="title title-green">Card Title Green</div>
  <div class="title title-orange">Card Title Orange</div>
  <div class="title title-brown">Card Title Brown</div>
...

Paragraphe avec fond

Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="card with-bg">
  <h2>Paragraphe avec fond</h2>
  <p>Lorem ipsum dolor sit amet, ...</p>
</div>

Paragraphe sans fond mais titre avec fond

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

<h2 class="with-bg">Paragraphe sans fond mais titre avec fond</h2>
<p>Lorem ipsum dolor sit amet, ....</p>
Lorem ipsum dolor sit amet
lorem ipsum dolor sit
EN SAVOIR PLUS

Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<!-- QUOTE -->
<div class="quote">Lorem ipsum dolor sit amet <br>lorem ipsum dolor sit</div>

<!-- READ MORE -->
<div class="read-more blue card-50">
  <div class="read-link blue"><a>EN SAVOIR PLUS</a></div>
  <p>Lorem...</p>
</div>
Titre lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Lorem ipsum dolor
  • Lorem ipsum dolor
    • Lorem ipsum dolor
    • Lorem ipsum dolor
Titre lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

  • Lorem ipsum dolor
  • Lorem ipsum dolor
    • Lorem ipsum dolor
    • Lorem ipsum dolor
search

Titre lorem ipsum

Lorem ipsum dolor sit amet !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

GO
<!-- CARD DEFAULT -->
<div class="card card-30">
  <h5>Titre lorem ipsum</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   consequat.</p>
  <ul>
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
  <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </ul>
</div>

<!-- CARD BLUE -->
<div class="card card-blue card-30">
  <h5>Titre lorem ipsum</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   consequat.</p>
  <ul>
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
    <ul>
      <li>Lorem ipsum dolor</li>
      <li>Lorem ipsum dolor</li>
    </ul>
  </ul>
</div>

<!-- CARD WIDGET -->
<div class="card card-widget card-30">
  <i class="material-icons md-80">search</i>
  <h3>Titre lorem ipsum</h3>
  <p>Lorem ipsum dolor sit amet !</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.</p>
  <a href="#" class="button button-beige">GO</a>
</div>
Title Header

Lorem ipsum dolor sit amet, consectetur adipisicing 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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

@20171017
<div class="card-block">
  <div class="card-block-header">
    Title Header<div class="logo"></div>
  </div>
  <div class="card-block-body">
    <p>Lorem...</p>
  </div>
  <div class="card-block-footer">
    <p>Lorem...</p>
  </div>
</div>
account_circle  SEE FULL EXAMPLE ON DEALS ENT info
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
06/03/2018 phone   email   report_problem
@20180306
<div class="card card-hover card-25 text-sign">
  <div class="card-title-short">
    <i class="material-icons md-28">account_circle</i> 
    <b>SEE FULL EXAMPLE ON DEALS ENT</b>
    <small class="divider">info</small>
  </div>

  <div class="card-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>

  <div class="card-footer">
      <span>06/03/2018</span>
      <span class="divider"></span>
      <a class="magic"><i class="material-icons md-20">phone</i></a>  
      <a class="magic"><i class="material-icons md-20">email</i></a>  
      <a class="magic"><i class="material-icons md-20">report_problem</i></a>
  </div>
</div>
Alert amber !!
Alert red !!
Alert pink !!
Alert purple !!
Alert blue !!
Alert teal !!
Alert green !!
Alert orange !!
Alert brown !!
  <div class="alert alert-amber"> OR <div class="alert alert-warning-uca">
    Alert amber/warning !!
  </div>
...
  <div class="alert alert-red"> OR <div class="alert alert-danger-uca">
  <div class="alert alert-pink">
  <div class="alert alert-purple">
  <div class="alert alert-blue"> OR <div class="alert alert-info-uca">
  <div class="alert alert-teal">
  <div class="alert alert-green"> OR <div class="alert alert-success-uca">
  <div class="alert alert-orange">
  <div class="alert alert-brown">
...
Beta // Le fonctionnement final souhaité n'est pas encore atteint
Tabs One Tabs Two Tabs Three filter_list filter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Tabs One.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Tabs Two.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Tabs Three.

En savoir plus
<div class="tabs">
  <a href="#" class="active">Tabs One</a>
  <a href="#">Tabs Two</a>
  <a href="#">Tabs Three</a>
  <a href="#" class="divider"><i class="material-icons">filter_list</i></a>
  <a href="#"><i class="material-icons">filter</i></a>
</div>
<p>Lorem ipsum dolor sit amet, ...</p>
<a href="#" class="about">En savoir plus</a>
Beta // Le fonctionnement final souhaité n'est pas encore atteint
Trolltunga Norway
Trolltunga Norway
Our new logo
format_align_left
Button 1 Button 2
format_align_right
Button 1 Button 2
info popup
Information complémentaire en popup
<div class="popup-image">
  <img ...>Tabs One</a>
  <div class="popup-content">
    <img ...>
    <div class="description">Our new logo</div>
  </div>
</div>
...
<div class="popup-menu">
  <div class="popup-content right">
    <a class="link-menu">Button 1</a>
    <a class="link-menu">Button 2</a>
  </div>
...
<div class="popup-info">
  <div class="popup-content">Information complémentaire en popup</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Badge

<div class="toast"> # add class fade for effect
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  <span class="badge">Badge</span>
</div>
FORMS

Information contextuelle

Information contextuelle

Information contextuelle

Information contextuelle

Information contextuelle

Information contextuelle

@20171013
<div class="checkbox">
  <input type="checkbox" id="check-01">
  <label for="check-01">
    <span class="check"></span>
    <span class="box"></span>
    CheckBox 01
  </label>
  <p class="info">Information contextuelle</p>
</div>
...
    <span class="check red"></span>
...
@20200708
<div class="checkbox disabled">
...
@20171103
<div class="columns">
  <div class="form-input card-50">
    <label>Text</label>
    <input type="text" id="input-text" name="input-text" placeholder="placeholder">
  </div>
  <div class="form-input card-50">
    <label>Select</label>
    <select id="input-select" name="input-select">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </div>
</div>
<div class="form-input">
  <label>Textarea</label>
  <textarea id="input-textarea" name="input-textarea">...</textarea>
</div>
navigation