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:

const 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)",
    },
  },
};