Cards

26 templates in this category. Each page has the screenshots, the structure, what to change and the CSS variables.

• Cards · 3D tilt — Tall photo cards on a light background that lean towards the mouse in 3D while their border lights up.
• Cards · Beside text — A section intro with a button beside four icon cards; on hover the icon's circle fills the card.
• Cards · Category — A mosaic of category cards: a big photo, the name on a shade at the bottom and how many items it holds; the first one is twice the size.
• Cards · Central card — Photo cards overlapping in a pyramid around a large central card; point at another card to bring it forward.
• Cards · Deck — Cards arrive stacked like a deck and spread into place when they come into view.
• Cards · Downloads — Downloadable resources as cards: the file type in a tag, the title, size and date, and a download link.
• Cards · Events — An agenda of event cards in rows: the date in a box on one side, the format tag, title, city and hours, and a link to save a seat at the end of each row.
• Cards · Expand — A row of tall photo cards: the one under the mouse widens and shows its text and button, the others make room and keep only their title.
• Cards · Fan — Cards with two photos peeking out behind them that rise and fan out on hover.
• Cards · Flip — Cards that turn over on hover or keyboard focus to show a colored back with a text and a button.
• Cards · Horizontal scroll — A row of photo cards that scrolls sideways and stops on each card (native scroll snap, no slider), out to the edge of the screen, with a thin brand scrollbar and two arrows.
• Cards · Icon — Six cards with an icon in a soft square, a title and a short text; on hover the square fills the card with the brand color.
• Cards · Lighted — Six photo cards on a dark background whose borders light up around the mouse.
• Cards · Links — Tall link cards: on hover the card's surface shrinks into its arrow and uncovers a darkened photo.
• Cards · Mini — Small link cards with a square thumbnail, a title and a short detail; the accent bar fills the card on hover.
• Cards · Numbered — Centered cards numbered by themselves, with a large soft number tucked behind the photo that rises on hover.
• Cards · Over a photo — A darkened full-width photo with a large title on the left and two white cards on the right.
• Cards · Photo — Three cards with a framed photo, a title, a short text and a button; on hover the card rises and the photo turns a little.
• Cards · Photo on hover — Link cards with a hidden photo strip: on hover the photo turns in and the arrow slides to its center.
• Cards · Projects — Project cards signed by their author; on hover the screenshot leans away in 3D and shows the story.
• Cards · Real estate listings — Property listings: a card for each home with its photo and a «For sale» or «For rent» tag, the price, the name, the neighborhood and a row with beds, baths and area.
• Cards · Rotated deck — A deck of cards: one in front, the others turned behind it; the arrows bring the next one forward.
• Cards · Services — Six service cards with an icon in a soft circle, a title, a short text and a «Learn more» foot; the whole card is a link.
• Cards · Steps — Four numbered steps as cards joined by a line; the step under the mouse and the ones before it fill in.
• Cards · Text on hover — Tall photo cards with the title at the bottom; on hover the photo comes closer and the text slides up.
• Cards · Unfold — A row of overlapping photo cards, turned and half sunk into the bottom edge; on hover a card straightens, rises and shows its text.