Jump to content

Template:CS/products/card/styles.css: Difference between revisions

From Insurer Brain
Browse history interactively
← Older editNewer edit →
Content deleted Content added
No edit summary
No edit summary
Line 1: Line 1:
/* Alignment utility (mirrors the approach used by CS button) */
/* Alignment utilities (mirrors CS button) */
.capsach-align { display: block; }
.capsach-align{display:block;}
.capsach-align-left { text-align: left; }
.capsach-align-left{text-align:left;}
.capsach-align-center { text-align: center; }
.capsach-align-center{text-align:center;}
.capsach-align-right { text-align: right; }
.capsach-align-right{text-align:right;}


/* Card wrapper: fixed width, inline-block so alignment works via parent text-align */
/* Card wrapper */
.cs-product-card {
.cs-product-card{display:inline-block;width:300px;vertical-align:top;}
display: inline-block;
width: 300px; /* Fixed card width per requirements */
vertical-align: top;
}


/* Media (image) area */
/* Media */
.cs-product-card__media {
.cs-product-card__media{line-height:0;}
.cs-product-card__media .mw-file-element{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid #a2a9b1;background:#fff;}
line-height: 0; /* Remove stray gaps around inline images */
}


⚫
/* Placeholder when no image is provided */
/* Ensure the actual <img> gets the border and scales to the card width.
.cs-product-card__placeholder{display:block;width:300px;box-sizing:border-box;border:1px solid #a2a9b1;background:#f8f9fa;padding-top:66.6667%;}
MediaWiki adds class "mw-file-element" to file-rendered images. */
.cs-product-card__media .mw-file-element {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
border: 1px solid #a2a9b1; /* Wikimedia UI Base50; matches infobox/table border tone */
background: #fff;
}


/* Title (semantic heading without h1) */
⚫
/* Placeholder if no image was provided (keeps layout consistent) */
.cs-product-card__title{margin-top:8px;font-weight:600;line-height:1.35;color:inherit;}
.cs-product-card__placeholder {
display: block;
width: 300px;
box-sizing: border-box;
border: 1px solid #a2a9b1;
background: #f8f9fa; /* Wikimedia light gray */
/* Simple 3:2 area without aspect-ratio to remain TemplateStyles-friendly */
padding-top: 66.6667%;
}


/* CTA spacing */
/* Accessible visible title (non-h* heading) */
.cs-product-card__title {
.cs-product-card__cta{margin-top:10px;}
margin-top: 8px;
font-weight: 600;
line-height: 1.35;
/* Inherit font-size so it matches page context; tweak if needed locally */
color: inherit;
}

/* Spacing before CTA */
.cs-product-card__cta {
margin-top: 10px;
}

Revision as of 20:54, 26 October 2025

/* Alignment utilities (mirrors CS button) */
.capsach-align{display:block;}
.capsach-align-left{text-align:left;}
.capsach-align-center{text-align:center;}
.capsach-align-right{text-align:right;}

/* Card wrapper */
.cs-product-card{display:inline-block;width:300px;vertical-align:top;}

/* Media */
.cs-product-card__media{line-height:0;}
.cs-product-card__media .mw-file-element{display:block;width:100%;height:auto;box-sizing:border-box;border:1px solid #a2a9b1;background:#fff;}

/* Placeholder when no image is provided */
.cs-product-card__placeholder{display:block;width:300px;box-sizing:border-box;border:1px solid #a2a9b1;background:#f8f9fa;padding-top:66.6667%;}

/* Title (semantic heading without h1) */
.cs-product-card__title{margin-top:8px;font-weight:600;line-height:1.35;color:inherit;}

/* CTA spacing */
.cs-product-card__cta{margin-top:10px;}
Retrieved from "https://www.insurerbrain.com/w/index.php?title=Template:CS/products/card/styles.css&oldid=1891"