How to get isVAR values using Raw Content?

[ignacioleonrod]

Hi, I would like to create my own component for my Titles. for this I am using the following parameters:

{
  "text"	: {
    "type"	:	"text", 
    "label"	:	"Content"
  },
  
  "align"	: {
    "type"	:	"text", 
    "label"	:	"Align", 
    "initial"	:	"left",
    "isVar"	:	"true"
  },
  
	"color"	: {
		"type"	:	"color", 
		"label"	:	"Color"
  },
  
	"size"	: {
		"type"	:	"text", 
		"label"	:	"Size",
		"initial"	:	"var(--xxl-text)",
    "isVar": "true"
  },
  
	"width"	: {
		"type"	:	"text", 
		"label"	:	"Width",
		"initial"	:	"fit-content",
    "isVar": "true"
  },
  
	"tag"	: {
		"type"	:	"text", 
		"label"	:	"HTML Tag",
		"initial"	:	"p"
  }
}

As you can notice I am using the “isVar” option as I need these properties to vary depending on the screen size.

This is my HTML using the RAW Elementt:

<{{dc:p:tag}} class="text">{{dc:p:text}}</{{dc:p:tag}}>
<style>
  .text{
    color:{{dc:p:color}};
    font-size:{{dc:p:size}};
    text-align:{{dc:p:align}};
    width:{{dc:p:width}};"
  }
  @media (max-width: 979px){
    .text{
      font-size:{{dc:p:size}};
      text-align:{{dc:p:align}};
      width:{{dc:p:width}};"
    }
  @media screen and (max-width:767px){
    .text{
      font-size:{{dc:p:size}};
      text-align:{{dc:p:align}};
      width:{{dc:p:width}};"
    }
  @media screen and (max-width:480px){
    .text{
      font-size:{{dc:p:size}};
      text-align:{{dc:p:align}};
      width:{{dc:p:width}};"
    }
}
</style>

The problem is that I am not managing to call the “isVar” values. How can I do it?

[charlie]

We don’t have a way to grab the isVar breakpoint settings of parameter. However if you use Custom CSS in something like a Div element and add your raw content inside that div everything should be setup for you. When using isVar it will auto setup the CSS variable including breakpoint values. So the @media tags will be unnecessary in this type of setup. All you would need is something like the below. There is also a " after the width settings which is probably causing an issue. Let us know if that helps.

  $el .text {
    color:{{dc:p:color}};
    font-size:{{dc:p:size}};
    text-align:{{dc:p:align}};
    width:{{dc:p:width}};
  }