QS Pack

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 nameDefault valueDescription
--b-card#fffBackground color for the card component.
--br-card.6remBorder radius for the card component.
--bs-cardvar(--box-shadow)Box shadow for the card component.
--p-card2remPadding for the card component.
--border-cardpurpleBorder color for the card component, used on hover.
--c-card-btnpurpleText color for the card button.
--g-card-btn.6remGap between elements inside the card button.


CSS ClassDescription
cardBase class for the card component. Sets background-color, border-radius, box-shadow, and padding.
card-bVariant of the card class. Adds border and transition, changes border color on hover.
card-b:hoverHover effect for the card-b class. Changes the border color.
card-btnClass 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::afterAfter pseudo-element for the card-btn class. Adds an underline effect on hover.
card-btn:hover::afterHover effect for the after pseudo-element of the card-btn class. Adjusts the width of the underline effect.