CSSFolder — Copy useful CSS

Responsive file detail card

A practical file card with readable metadata, explicit upload status, and mobile-friendly actions.

Edit CSS live

.cf-file-card { width: min(620px, 100%); box-sizing: border-box; padding: clamp(20px, 5vw, 30px); border: 2px solid #171817; border-radius: 18px; background: #fffdf7; color: #171817; font-family: system-ui, sans-serif; box-shadow: 10px 10px 0 #171817; }
.cf-file-card, .cf-file-card *, .cf-file-card *::before, .cf-file-card *::after { box-sizing: border-box; }
.cf-file-card__top { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; }
.cf-file-card__icon { display: grid; width: 48px; height: 56px; place-items: center; border: 2px solid #171817; border-radius: 8px; background: #f6b45c; font-size: .7rem; font-weight: 900; }
.cf-file-card__eyebrow { margin: 0 0 5px; color: #315cff; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cf-file-card__title { margin: 0; overflow-wrap: anywhere; font-size: clamp(1.15rem, 3vw, 1.55rem); letter-spacing: -.03em; }
.cf-file-card__more { width: 44px; height: 44px; border: 2px solid #171817; border-radius: 50%; background: #fff; color: #171817; font-weight: 900; letter-spacing: 2px; cursor: pointer; }
.cf-file-card__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; padding: 16px 0; border-top: 1px solid #d9d6ca; border-bottom: 1px solid #d9d6ca; }
.cf-file-card__meta div { display: grid; gap: 5px; min-width: 0; }
.cf-file-card__meta dt { color: #3d4b6e; font-size: .72rem; }
.cf-file-card__meta dd { margin: 0; overflow-wrap: anywhere; font-size: .82rem; font-weight: 800; }
.cf-file-card__progress { display: grid; gap: 9px; }
.cf-file-card__progress > div { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; }
.cf-file-card__progress strong { color: #238151; }
.cf-file-card__track { display: block; height: 9px; overflow: hidden; border-radius: 99px; background: #dfe4f3; }
.cf-file-card__track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: #315cff; }
.cf-file-card__actions { display: flex; gap: 10px; margin-top: 26px; }
.cf-file-card__secondary, .cf-file-card__primary { min-height: 46px; padding: 11px 15px; border: 2px solid #171817; border-radius: 9px; font: inherit; font-weight: 800; cursor: pointer; }
.cf-file-card__secondary { background: #fff; color: #171817; }
.cf-file-card__primary { flex: 1; background: #315cff; color: #fff; }
.cf-file-card button:hover { transform: translateY(-1px); }
.cf-file-card button:focus-visible { outline: 3px solid #9cff57; outline-offset: 3px; }
@media (max-width: 480px) { .cf-file-card { box-shadow: 6px 6px 0 #171817; } .cf-file-card__meta { grid-template-columns: 1fr; } .cf-file-card__actions { flex-direction: column-reverse; } .cf-file-card__actions button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cf-file-card *, .cf-file-card *::before, .cf-file-card *::after { scroll-behavior: auto; transition: none; } .cf-file-card button:hover { transform: none; } }

Responsive file detail card

Prompt it