data-ms-bind:style

Article author
Duncan from Memberstack
  • Updated

This feature lets you add styling to an element (or lots of elements) on your published site.

This is especially useful when you want to set your members only content, verification UI, trial UI, etc. to be hidden by default. See the example scenario below to learn more. 

If you'd prefer to apply an entire class instead, please see the article for data-ms-bind:class

The Attribute

data-ms-bind:style="cssProperty:value"

Example Scenario

Let's say we have a banner which is only visible if a member has a failed payment. So I've given it the attribute data-ms-content="has-failed-payment". Since most of my member's will rarely see this, I want to hide the banner in Webflow. If I also give it the attribute data-ms-bind:style="display:block" then Memberstack will set the element to display block when it's needed 🎉 

Hide Content by Default

You can use this feature to default-hide gated content, banners, alerts, and other data-ms-content. To set the display state on your published site you can use display:blockdisplay:flex, display:inline, display:inline-block, etc. 

Other Styling

And that's not all! You could update any CSS property (like color, height, opacity, etc.) using the appropriate Style Object Property.

Note: You can only apply one style property per element. e.g. display OR color. height OR width. If you need to update multiple style properties, please see the article for data-ms-bind:class

Here are some examples to get you started:

View the full list of Style Object Properties

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.