Cards

Card estandar


Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi inventore quasi adipisci deleniti praesentium! Tempora ea esse pariatur exercitationem ullam porro deleniti error accusantium, non dolor consectetur adipisci maiores repellendus.

Card con border


Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi inventore quasi adipisci deleniti praesentium! Tempora ea esse pariatur exercitationem ullam porro deleniti error accusantium, non dolor consectetur adipisci maiores repellendus.

Card con enlace


Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi inventore quasi adipisci deleniti praesentium! Tempora ea esse pariatur exercitationem ullam porro deleniti error accusantium, non dolor consectetur adipisci maiores repellendus.


Esto es un enlace

Card con botón y border


Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi inventore quasi adipisci deleniti praesentium! Tempora ea esse pariatur exercitationem ullam porro deleniti error accusantium, non dolor consectetur adipisci maiores repellendus.




Variable name Default value Description
--b-card #fff Background color for the card component.
--br-card .6rem Border radius for the card component.
--bs-card var(--box-shadow) Box shadow for the card component.
--p-card 2rem Padding for the card component.
--border-card purple Border color for the card component, used on hover.
--c-card-btn purple Text color for the card button.
--g-card-btn .6rem Gap between elements inside the card button.


CSS Class Description
card Base class for the card component. Sets background-color, border-radius, box-shadow, and padding.
card-b Variant of the card class. Adds border and transition, changes border color on hover.
card-b:hover Hover effect for the card-b class. Changes the border color.
card-btn Class for the button inside the card component. Sets alignment, background, border, color, cursor, display, font-size, gap, height, outline, padding, position, and text-decoration.
card-btn::after After pseudo-element for the card-btn class. Adds an underline effect on hover.
card-btn:hover::after Hover effect for the after pseudo-element of the card-btn class. Adjusts the width of the underline effect.