chip.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DS in CSS - Chip</title>
  <link rel="shortcut icon" href="https://cdn.casebook.net/images/favicon.ico">
  <link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>

<body class="cb-baseline">
  <main class="cb-main">
    <h1 class="cb-h4 cb-bolder"><a class="cb-link" href="./index.html">DS in CSS</a></h1>
    <h2 class="cb-h5 cb-margin-bottom-large">
      Chips
    </h2>
    <p>You can style an element like a Casebook chip with the class <code class="cb-inline-code">.cb-chip</code>.
      By default this will be styled like the standard chip variant.</p>
    <p>Add a color to the chip by adding <code class="cb-inline-code">.cb-active</code>, <code
        class="cb-inline-code">.cb-alert</code>, <code class="cb-inline-code">.cb-caution</code>, <code
        class="cb-inline-code">.cb-neutral-ocean</code>, <code class="cb-inline-code">.cb-neutral-heather</code>, or
      <code class="cb-inline-code">.cb-neutral-patina</code> to its classes.</p>
    <div class="cb-margin-default-vertical cb-flex cb-gap-dense cb-flex-wrap-wrap">
      <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>
    </div>

    <div class="cb-code-block-container">
      <pre>&lt;div class="cb-chip"&gt;Chip&lt;/div&gt;
&lt;div class="cb-chip cb-active"&gt;Active chip&lt;/div&gt;
&lt;div class="cb-chip cb-alert"&gt;Alert chip&lt;/div&gt;
&lt;div class="cb-chip cb-caution"&gt;Caution chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-ocean"&gt;Neutral ocean chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-heather"&gt;Neutral heather chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-patina"&gt;Neutral patina chip&lt;/div&gt;</pre>
    </div>

    <h3 id="outlined" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Outlined chips</h3>


    <p>Make a chip outlined by adding the class <code class="cb-inline-code">.cb-outlined</code></p>
    <div class="cb-margin-default-vertical cb-flex cb-gap-dense cb-flex-wrap-wrap">
      <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>
    </div>

    <div class="cb-code-block-container">
      <pre>&lt;div class="cb-chip cb-outlined"&gt;Outlined chip&lt;/div&gt;
&lt;div class="cb-outlined cb-chip cb-active"&gt;Active outlined chip&lt;/div&gt;
&lt;div class="cb-outlined cb-chip cb-alert"&gt;Alert outlined chip&lt;/div&gt;
&lt;div class="cb-outlined cb-chip cb-caution"&gt;Caution outlined chip&lt;/div&gt;
&lt;div class="cb-outlined cb-chip cb-neutral-ocean"&gt;Neutral ocean outlined chip&lt;/div&gt;
&lt;div class="cb-outlined cb-chip cb-neutral-heather"&gt;Neutral heather outlined chip&lt;/div&gt;
&lt;div class="cb-outlined cb-chip cb-neutral-patina"&gt;Neutral patina outlined chip&lt;/div&gt;</pre>
    </div>

    <h3 id="compact" class="cb-h6 cb-margin-bottom-large cb-margin-top-large">Compact chips</h3>

    <p>Make a chip compact by adding the class <code class="cb-inline-code">.cb-compact</code></p>
    <div class="cb-margin-default-vertical cb-flex cb-gap-dense cb-flex-wrap-wrap">
      <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>
    <div class="cb-margin-default-vertical cb-flex cb-gap-dense cb-flex-wrap-wrap">
      <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>
    </div>

    <div class="cb-code-block-container">
      <pre
        class="cb-caption cb-monospace fullwidth cb-no-margin">&lt;div class="cb-chip cb-compact"&gt;Compact chip&lt;/div&gt;
&lt;div class="cb-chip cb-active cb-compact"&gt;Active compact chip&lt;/div&gt;
&lt;div class="cb-chip cb-alert cb-compact"&gt;Alert compact chip&lt;/div&gt;
&lt;div class="cb-chip cb-caution cb-compact"&gt;Caution compact chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-ocean cb-compact"&gt;Neutral ocean compact chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-heather cb-compact"&gt;Neutral heather compact chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-patina cb-compact"&gt;Neutral patina compact chip&lt;/div&gt;
&lt;div class="cb-chip cb-compact cb-outlined"&gt;Compact outlined chip&lt;/div&gt;
&lt;div class="cb-chip cb-active cb-compact cb-outlined"&gt;Active compact outlined chip&lt;/div&gt;
&lt;div class="cb-chip cb-alert cb-compact cb-outlined"&gt;Alert compact outlined chip&lt;/div&gt;
&lt;div class="cb-chip cb-caution cb-compact cb-outlined"&gt;Caution compact outlined chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-ocean cb-compact cb-outlined"&gt;Neutral ocean compact outlined chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-heather cb-compact cb-outlined"&gt;Neutral heather compact outlined chip&lt;/div&gt;
&lt;div class="cb-chip cb-neutral-patina cb-compact cb-outlined"&gt;Neutral patina compact outlined chip&lt;/div&gt;</pre>
    </div>

  </main>
</body>

</html>