Article Card India

overview

A modern, low-opacity, animated article card.

Style Preview

Available for:

Figma

Bricks

Gutenberg

Buy Frames

Back to library

Overview

Article Card India presents your blog posts in a very modern, clean card format. The featured image is shown in low-opacity, which becomes brighter on hover. Additionally, the image will appear to zoom slightly when the card is hovered.

Query Loop Compatible

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

--media-opacity

Edit the initial opacity of the featured image.

--media-opacity-shift

Edit the amount of opacity change on hover.

--media-opacity-operator

Increase or decrease the opacity on hover.

--media-transition

Edit the transition instructions on hover.

--media-hover-scale

Edit the scale/zoom amount on hover.

--divider-thickness

Edit the thickness of the footer divider.

--divider-color

Edit the color of the footer divider.

--divider-gap

Edit the gap of the footer divider.

HTML5 Tags & Attributes

figure

time

datetime

Accessibility Notes

No additional accessibility notes for this frame.

This frame uses the clickable parent technique.

Related Frames

Article Section India

Article Grid India

FAQs

How do I unlink category links within Bricks dynamic data for my frames?

When you dynamically query categories of the current post (via a template or query loop), Bricks wraps each category with a link to that category’s archive page.

Sometimes this is desirable and sometimes it isn’t.

If you want to turn this feature off, you can use the following filter:

// Disable links for all the {post_terms_my_taxonomy} tags
add_filter( 'bricks/dynamic_data/post_terms_links', '__return_false' );

If you want to turn this feature off for a specific category, you can use the following filter:

add_filter( 'bricks/dynamic_data/post_terms_links', function( $has_links, $post, $taxonomy) {
  // Disable links for my_custom_tax taxonomy
  return $taxonomy !== 'my_custom_tax'; 
}, 10, 3);

We recommend adding this code via WPCodeBox.

Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.