Material Cards

Easily apply material design to your sites

Material Cards lets you easily apply Material Design principles to your sites columns or modules. Make your content stand out by applying visual elevation to certain elements and increase the user interaction and retention time.

Material Cards are super easy to use. Just add the CSS to your Child Theme, the WordPress Theme Customiser or the Divi Theme Options – whatever you like the most – and start using them right away on your page. They even work in the Visual Builder.

You have multiple options to apply the effects on your page. If you add one of our styling classes to a section, each column of each row in this section will get the Material Cards effect. If applied to a row, each column of that row will have the effect. You also can add the classes to single columns of a row to only apply the effect on certain rows and you can even target single modules. 

But thats not all. Section level classes can get overwritten by row level – which again can get overwritten by column level and lastly by module level. This gives you incredible powerful control and great usability. Whether you use our default “ds_card” class or one of the specialised classes with different base and hover elevation – we have a fitting class for every desire.

You should definitely check out our demo page to see whats possible.