Joran design system

Ratio: 1 X 1 

<div class="aspect-w-1 aspect-h-1">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
 
<div{% if variantModifier %} class="{{ variantModifier }}"{% endif %}>
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
 
{
  "variantModifier": "aspect-w-1 aspect-h-1"
}
  • Content: 
    /* ======================================================================
   # _utilities.ratio.css
   ====================================================================== */

/***
 * TODO: @tailwindcss/aspect-ratio do not support @apply
 */

/* .u-ratio {

}

.u-ratio--1x1 {
    @apply
        aspect-w-1
        aspect-h-1
    ;
}

.u-ratio--4x3 {
    @apply
        aspect-w-4
        aspect-h-3
    ;
}

.u-ratio--16x9 {
    @apply
        aspect-w-16
        aspect-h-9
    ;
} */
  • URL: /components/raw/ratio/_utilities.ratio.css
  • Filesystem Path: src/components/02-Utilities/ratio/_utilities.ratio.css
  • Size: 489 Bytes

Ratio

See @tailwindcss/aspect-ratio for documentations about aspect-ratio.

Todo

@tailwindcss/aspect-ratio do not support @apply