Joran design system

Box: Gradient 

<div class="o-box o-box--gradient" style="height:20rem;">
    <div class="o-container">
        <p>This is a box ! It had some nice background color.</p>
    </div>
</div>
 
<div class="o-box{% if variantModifier %} {{ variantModifier }}{% endif %}" style="height:20rem;">
    <div class="o-container">
        <p>This is a box ! It had some nice background color.</p>
    </div>
</div>
 
{
  "variantModifier": "o-box--gradient"
}
  • Content: 
    /* ======================================================================
   # _objects.box.css
   ====================================================================== */

.o-box {
  @extend .u-break-inside-avoid;

  @apply
    rounded

    py-24
    px-2
    bg-primary-100
  ;

  @screen print {
    @apply py-12;
  }
}

@screen md {
  .o-box {
    @apply
      px-4
    ;
  }
}

@screen print {
  .o-box {
    @apply
      px-4
    ;
  }
}

@screen lg {
  .o-box {
    @apply
      px-12
    ;
  }
}

@screen xl {
  .o-box {
    @apply
      px-24
    ;
  }
}

/* -----------------------------------
 # Variants
 ----------------------------------- */

.o-box.o-box--gradient {
  @apply
    bg-gradient-to-b
    from-primary-100
    to-primary-400
    ;
}
  • URL: /components/raw/box/_objects.box.css
  • Filesystem Path: src/components/03-Objects/box/_objects.box.css
  • Size: 761 Bytes

No notes defined.