Font Size

The following font size utilities are available with Wedges.

Box Shadow

The additional box shadow utilities are available with the shadow-wg-{scale} classes.

Animations

Wedges introduces a set of simple fade animation utilities. These animations are used across Wedges components, making them smoother and more visually appealing. Use them with the animation-wg-{name} utility.

• Fade in up: wg-fade-in-up
• Fade in down: wg-fade-in-down
• Fade in left: wg-fade-in-left
• Fade in right: wg-fade-in-right
• Fade out: wg-fade-out

Keyframes for these animations are defined as follows:

 keyframes: {
    fadeInUp: {
        "0%": {
            opacity: "0",
            transform: "translateY(5px) scale(.97)",
        },
        "100%": {
            opacity: "1",
            transform: "translateY(0px) scale(1)",
        },
    },
    fadeInDown: {
        "0%": {
            opacity: "0",
            transform: "translateY(-5px) scale(.97)",
        },
        "100%": {
            opacity: "1",
            transform: "translateY(0px) scale(1)",
        },
    },
    fadeInLeft: {
        "0%": {
            opacity: "0",
            transform: "translateX(5px) scale(.97)",
        },
        "100%": {
            opacity: "1",
            transform: "translateX(0px) scale(1)",
        },
    },
    fadeInRight: {
        "0%": {
            opacity: "0",
            transform: "translateX(-5px) scale(.97)",
        },
        "100%": {
            opacity: "1",
            transform: "translateX(0px) scale(1)",
        },
    },
    fadeOut: {
        "0%": {
            opacity: "1",
            transform: "scale(1)",
        },
        "100%": {
            opacity: "0",
            transform: "scale(.97)",
        },
    },
},