Joran design system

Background 

<div class="flex flex-row flex-wrap">
    <div class="u-bg--gradient h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--primary-100 h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--primary-200 h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--primary-400 h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--primary-600 h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--primary-800 h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--primary-900 h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--primary-cta h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>

    <div class="u-bg--white h-48 w-48 block rounded-full p-6 m-4 shadow">
    </div>
</div>
 
<div class="flex flex-row flex-wrap">
<div class="u-bg--gradient h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--primary-100 h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--primary-200 h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--primary-400 h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--primary-600 h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--primary-800 h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--primary-900 h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--primary-cta h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>

<div class="u-bg--white h-48 w-48 block rounded-full p-6 m-4 shadow">
</div>
</div>
 
/* No context defined. */
  • Content: 
    /* ======================================================================
   # _background.utilities.css
   ====================================================================== */

.u-bg--gradient {
  @apply
    bg-gradient-to-b
    from-primary-400
    to-primary-100
    ;
}

.u-bg--primary-100 {
  background-color: var(--color__primary--100);
}

.u-bg--primary-200 {
  background-color: var(--color__primary--200);
}

.u-bg--primary-400 {
  background-color: var(--color__primary--400);
}

.u-bg--primary-600 {
  background-color: var(--color__primary--600);
}

.u-bg--primary-800 {
  background-color: var(--color__primary--800);
}

.u-bg--primary-900 {
  background-color: var(--color__primary--900);
}

.u-bg--primary-cta {
  background-color: var(--color__primary--cta);
}

.u-bg--white {
  @apply
    bg-white
  ;
}
  • URL: /components/raw/background/_utilities.background.css.css
  • Filesystem Path: src/components/02-Utilities/background/_utilities.background.css.css
  • Size: 827 Bytes

No notes defined.