Card UI Tile Layout for Blog Archive Pages

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
Image: Card UI Tile Layout for Blog Archive Pages GIF

Card Ui is great for blog archive pages where you want to showcase multiple articles in a nicely laid out grid. This snippet offers two different layouts that you can choose from, it was designed by Aleksandar Čugurović

When you hover over the image the title slides up and you get to read the included description. For the first one, the title and description has a white background and the date on the top right has got a light green background. You can click on the three-dot menu that is common on material design inspired interface and mobile UI, to get a slideout menu with a bookmark, like and comment options. For the second one, the title and description are in white text, this will be good for content with darker images. The long form date is on the top left and the sharing buttons are on the top right.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen News Cards – CSS only by Aleksandar Čugurović (@mauriceconchis) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.