Interactive, change grid width.

A card stretches but keeps it's ratio when inside a grid. A ratio is the relation between any magnitudes with respect to the number of times one contains the others. So for every amount of width we have a proportion of height.

1/1 Square

4/3 Classic

9/16 Portrait

16/9 Landscape 

type RatiosTypes = 'square' | 'classic' | 'portrait' | 'landscape';


interface Props extends Omit<DefaultProps, 'discouragedStyle'>, EventCbProps {
    /** Gradient overlay */
    gradient?: {
        position: 'start' | 'end';
        color?: string;
    };
    /** 🚨 Ratio of the content */
    ratio?: RatiosTypes;
    /** Removes default shadow (light mode) */
    shadowless?: boolean;
}

Code snippet hidden

Your screen is too small.

Card content can be composed.

DATE AS YY/MM/DD AUTHOR IS NONE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

TM

DATE AS YY/MM/DD

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

DATE AS YY/MM/DD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Cards can react to events and haz lil fx built-in.

Tappable

Hoverable (console)

With top gradient