Card UI Tile Layout for Blog Archive Pages

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