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:
/* 2) Template:CS/products/card/styles.css */
/* 2) Template:CS/products/card/styles.css */
.capsach-card{width:100%;max-width:480px;margin:0}
.capsach-card{width:300px;margin:0}
.capsach-align-left{margin-left:0;margin-right:auto;text-align:left}
.capsach-align-left{margin-left:0;margin-right:auto;text-align:left}
.capsach-align-center{margin-left:auto;margin-right:auto;text-align:left}
.capsach-align-center{margin-left:auto;margin-right:auto;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}


/* Media area: 2:3 aspect ratio and full-width image */
/* Media: fixed 2:3 frame (300x450), image fills and crops */
.capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__media{position:relative;width:100%;height:450px;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__ratio{display:block;width:100%;height:0;padding-top:150%} /* 3/2 = 150% */
.capsach-card__media a{display:block;width:100%;height:100%}
.capsach-card__media-inner{position:absolute;top:0;right:0;bottom:0;left:0}
.capsach-card__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
.capsach-card__media-inner a{display:block;width:100%;height:100%}
.capsach-card__media-inner img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}


/* Placeholder when no img is provided */
/* Placeholder when no img is provided */

Revision as of 17:04, 26 October 2025

/* 2) Template:CS/products/card/styles.css */
.capsach-card{width:300px;margin:0}
.capsach-align-left{margin-left:0;margin-right:auto;text-align:left}
.capsach-align-center{margin-left:auto;margin-right:auto;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}

/* Media: fixed 2:3 frame (300x450), image fills and crops */
.capsach-card__media{position:relative;width:100%;height:450px;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__media a{display:block;width:100%;height:100%}
.capsach-card__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}

/* Placeholder when no img is provided */
.capsach-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9)}

/* CTA */
.capsach-card__cta{margin-top:.5rem}
Retrieved from "https://www.insurerbrain.com/w/index.php?title=Template:CS/products/card/styles.css&oldid=1883"