DS in CSS
Chips
You can style an element like a Casebook chip with the class .cb-chip.
By default this will be styled like the standard chip variant.
Add a color to the chip by adding .cb-active, .cb-alert, .cb-caution, .cb-neutral-ocean, .cb-neutral-heather, or
.cb-neutral-patina to its classes.
Chip
Active chip
Alert chip
Caution chip
Neutral ocean chip
Neutral heather chip
Neutral patina chip
<div class="cb-chip">Chip</div> <div class="cb-chip cb-active">Active chip</div> <div class="cb-chip cb-alert">Alert chip</div> <div class="cb-chip cb-caution">Caution chip</div> <div class="cb-chip cb-neutral-ocean">Neutral ocean chip</div> <div class="cb-chip cb-neutral-heather">Neutral heather chip</div> <div class="cb-chip cb-neutral-patina">Neutral patina chip</div>
Outlined chips
Make a chip outlined by adding the class .cb-outlined
Outlined chip
Active outlined chip
Alert outlined chip
Caution outlined chip
Neutral ocean outlined chip
Neutral heather outlined chip
Neutral patina outlined chip
<div class="cb-chip cb-outlined">Outlined chip</div> <div class="cb-outlined cb-chip cb-active">Active outlined chip</div> <div class="cb-outlined cb-chip cb-alert">Alert outlined chip</div> <div class="cb-outlined cb-chip cb-caution">Caution outlined chip</div> <div class="cb-outlined cb-chip cb-neutral-ocean">Neutral ocean outlined chip</div> <div class="cb-outlined cb-chip cb-neutral-heather">Neutral heather outlined chip</div> <div class="cb-outlined cb-chip cb-neutral-patina">Neutral patina outlined chip</div>
Compact chips
Make a chip compact by adding the class .cb-compact
Compact chip
Active compact chip
Alert compact chip
Caution compact chip
Neutral ocean compact chip
Neutral heather compact chip
Neutral patina compact chip
Compact outlined chip
Active compact outlined chip
Alert compact outlined chip
Caution compact outlined chip
Neutral ocean compact outlined chip
Neutral heather compact outlined chip
Neutral patina compact outlined chip
<div class="cb-chip cb-compact">Compact chip</div> <div class="cb-chip cb-active cb-compact">Active compact chip</div> <div class="cb-chip cb-alert cb-compact">Alert compact chip</div> <div class="cb-chip cb-caution cb-compact">Caution compact chip</div> <div class="cb-chip cb-neutral-ocean cb-compact">Neutral ocean compact chip</div> <div class="cb-chip cb-neutral-heather cb-compact">Neutral heather compact chip</div> <div class="cb-chip cb-neutral-patina cb-compact">Neutral patina compact chip</div> <div class="cb-chip cb-compact cb-outlined">Compact outlined chip</div> <div class="cb-chip cb-active cb-compact cb-outlined">Active compact outlined chip</div> <div class="cb-chip cb-alert cb-compact cb-outlined">Alert compact outlined chip</div> <div class="cb-chip cb-caution cb-compact cb-outlined">Caution compact outlined chip</div> <div class="cb-chip cb-neutral-ocean cb-compact cb-outlined">Neutral ocean compact outlined chip</div> <div class="cb-chip cb-neutral-heather cb-compact cb-outlined">Neutral heather compact outlined chip</div> <div class="cb-chip cb-neutral-patina cb-compact cb-outlined">Neutral patina compact outlined chip</div>