Buttons

see code

Buttons by default have a flat look with gently rounded corners. You can opt for the floating version by adding the .raised class to them. It adds a drop shadow, removes the border color and gives them sharp edges.

Flat

Raised

HTML

<button type="button" class="cc-btn cc-default">DEFAULT</button>
<button type="button" class="cc-btn cc-blue">BLUE</button>
<button type="button" class="cc-btn cc-green">GREEN</button>
<button type="button" class="cc-btn cc-orange">ORANGE</button>
<button type="button" class="cc-btn cc-purps">PURPLE</button>

<button type="button" class="cc-btn raised cc-default">DEFAULT</button>
<button type="button" class="cc-btn raised cc-blue">BLUE</button>
<button type="button" class="cc-btn raised cc-green">GREEN</button>
<button type="button" class="cc-btn raised cc-orange">ORANGE</button>
<button type="button" class="cc-btn raised cc-purps">PURPLE</button>

Badges

see code

Badges can notify a user that there are new or unread messages or notifications. Below are the standard colors but of course you can customize them to whatever you like.

default blue green orange purple white

HTML

<span class="badge">default</span>
<span class="badge blue">blue</span>
<span class="badge green">green</span>
<span class="badge orange">orange</span>
<span class="badge purps">purple</span>
<span class="badge white">white</span>

Alerts

see code

Alerts provide contextual feedback messages for typical user actions. Use the classes .good .bad .info or .warn for the corresponding severity of alert.

This is a good alert
This is a bad alert
This is an informative alert
This is a warning

HTML

<div class="cc-alert good">This is a good alert</div>
<div class="cc-alert bad">This is a bad alert</div>
<div class="cc-alert info">This is an informative alert</div>
<div class="cc-alert warn">This is a warning</div>

Lists

Normal List

see code

Just your standard way of display items as a collection. Try throwing in a badge to notify the user of a change, as demonstrated below.

  • Larry 2 new
  • Curly
  • Moe 5 new
  • Shemp

HTML

<div class="cc-list">
    <ul>
        <li>Larry <span class="badge purps">2 new</span></li>
        <li>Curly</li>
        <li>Moe <span class="badge green">5 new</span></li>
        <li>Shemp</li>
    </ul>
</div>

Button List

see code

Button list items allow you to define interactions for your lists, with styles to indicate they can be clicked on. Adding the list-btn-tgl attribute to the outer .cc-list element enables the list items to have a "toggled" state, as demonstrated below.

HTML

<div class="cc-list" list-btn-tgl>
    <button type="button">Larry</button>
    <button type="button">Curly</button>
    <button type="button">Moe</button>
    <button type="button">Shemp <span class="badge orange">6 new</span></button>
</div>

Detail List

see code

The detail list items are for when you need to convey a little more information with a second line of subtext. An anchor tag with the .cc-list-action class can be added for a secondary action.

  • Larry

    The Larriest Stooge

  • Curly

    The Curliest Stooge

  • Moe

    The Moeiest Stooge

  • Shemp

    The Shempiest Stooge

HTML

<div class="cc-list detail">
    <ul>
        <li>
            Larry
            <p>The Larriest Stooge</p>
            <a href="#" class="cc-list-action"><i class="fas fa-star"></i></a>
        </li>
        <li>
            Curly
            <p>The Curliest Stooge</p>
            <a href="#" class="cc-list-action"><i class="fas fa-star"></i></a>
        </li>
        <li>
            Moe
            <p>The Moeiest Stooge</p>
            <a href="#" class="cc-list-action"><i class="fas fa-star"></i></a>
        </li>
        <li>
            Shemp
            <p>The Shempiest Stooge</p>
            <a href="#" class="cc-list-action"><i class="fas fa-star"></i></a>
        </li>
    </ul>
</div>