I have built heading components with parameters. The component is a straightforward “headline” element, and the parameters are also pretty straightforward to control content, color, size, etc. This all works as expected. For completeness, here are the parameters used in the headings:
Headline Parameters
{
“text” : {
“label” : “Header Text”,
“type” : “text”,
“initial” : “H1 Headline”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Content, use {{dc:p:text}}”,
“comment” : “Make sure to update this name for each header! The isVar:true pair enables different settings for different screen sizes.”
}
},
“color” : {
“label” : “Color”,
“type” : “color”,
“initial” : “global-color:9V5q72EJeu4uzShxEw”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:color}}”,
“comment” : “To get the global color, enable Dev Toolkit (Cornerstone button > gear), then go to Dev Toolkit (Cornerstone button > drill) > tools > Colors (edit state) > [your color’s name]. Get the value of _id, prepend global-color:, and paste it to initial above.”
}
},
“sizing-spacing” : {
“type” : “group”,
“label” : “Sizes & Spacing”,
“params” : {
“font-size” : {
“description” : “This is the size for the entire field, so items like margins will be set relative to this.”,
“label” : “Font Size”,
“type” : “font-size”,
“initial” : “3.5em”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Font Size, use {{dc:p:sizing-spacing.font-size}}”,
“comment” : “Make sure to update this to the proper size for this heading! The isVar:true pair enables different settings for different screen sizes.”
}
},
“top-margin” : {
“label” : “Top Margin”,
“type” : “size”,
“initial” : “.65em”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Top, use {{dc:p:sizing-spacing.top-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“right-margin” : {
“label” : “Right Margin”,
“type” : “size”,
“initial” : “0”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Right, use {{dc:p:sizing-spacing.right-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“bottom-margin” : {
“label” : “Bottom Margin”,
“type” : “size”,
“initial” : “0”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Bottom, use {{dc:p:sizing-spacing.bottom-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“left-margin” : {
“label” : “Left Margin”,
“type” : “size”,
“initial” : “0”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Margin > Left, use {{dc:p:sizing-spacing.left-margin}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
},
“line-height” : {
“label” : “Line Height”,
“type” : “line-height”,
“initial” : “inherit”,
“isVar” : true,
“_documentation” : {
“usage” : “In Primary > Format > Height, use {{dc:p:sizing-spacing.line-height}}”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
}
}
},
“alignment” : {
“type” : “choose”,
“label” : “Align”,
“initial” : “inherit”,
“options” : [
{ “value” : “left”, “icon” : “ui:text-align-left” },
{ “value” : “center”, “icon” : “ui:text-align-center” },
{ “value” : “right”, “icon” : “ui:text-align-right” },
{ “value” : “justify”, “icon” : “ui:text-align-justify” }
],
“isVar” : true,
“_documentation” : {
“usage” : “Enable Dev Toolkit (Cornerstone button > gear), then set Dev Toolkit (Cornerstone button > drill) > tools > Breakout Mode to ‘true’ (CTRL + ALT + B is a shortcut to this setting). Then go to Primary > Format > Align and enter {{dc:p:alignment}}. You’ll probably want to turn off breakout mode after.”,
“comment” : “The isVar:true pair enables different settings for different screen sizes.”
}
}
}
I then built a CTA component, which uses one of the pre-built headings, among a mix of other parameterized components and standard elements. The CTA uses parameters, which are then passed to the input of the heading. My parameters for this are a bit more complicated, using a number of groups to organize everything. If name my group text, my components can’t access the content. This doesn’t apply to parameter field names. From my testing:
- Standard elements can access
{{dc:p:text.title-text}} - Components cannot access
{{dc:p:text.title-text}} - Components can access
{{dc:p:foobar.title-text}} - Components can access
{{dc:p:buttons.colors.text.base}}
For completeness, here are the parameters used in the CTA:
CTA Parameters
{
“image” : {
“type” : “group”,
“label” : “Image”,
“params” : {
“image” : {
“description” : “”,
“label” : “Image”,
“type” : “image”,
“initial” : “https://picsum.photos/500/300”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:image.image}}”,
“comment” : “”
}
},
“position-x” : {
“description” : “”,
“label” : “Position (X)”,
“type” : “dimension”,
“units” : ["%"],
“initial” : “50%”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:image.position-x}}”,
“comment” : “”
}
},
“position-y” : {
“description” : “”,
“label” : “Position (Y)”,
“type” : “dimension”,
“units” : ["%"],
“initial” : “50%”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:image.position-y}}”,
“comment” : “”
}
}
}
},
“colors” : {
“type” : “group”,
“label” : “Colors”,
“params” : {
“background” : {
“description” : “”,
“label” : “Section BG”,
“type” : “color”,
“initial” : “global-color:YYnrcGJVYMLgYSdyx3”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:colors.background}}”,
“comment” : “”
}
},
“heading” : {
“description” : “”,
“label” : “Heading text”,
“type” : “color”,
“initial” : “global-color:ym7igf0g5H6GwQbkSG”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:colors.heading}}”,
“comment” : “”
}
}
}
},
“text” : { << group name at issue <<
“type” : “group”,
“label” : “Text”,
“params” : {
“title-text” : {
“label” : “Title Text”,
“type” : “text”,
“initial” : “Call to Action”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:text.title-text}}”,
“comment” : “”
}
},
“body-text” : {
“label” : “Body Text”,
“type” : “text-editor”,
“initial” : “Input your text here! The text element is intended for longform copy that could potentially include multiple paragraphs.”,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:text.body-text}}”,
“comment” : “”
}
}
}
},
“buttons” : {
“type” : “group”,
“label” : “Buttons”,
“params” : {
“button-1-text” : {
“description” : “”,
“label” : “Button 1 text”,
“type” : “text”,
“initial” : “Learn More”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-1-text}}”,
“comment” : “”
}
},
“button-1-url” : {
“description” : “”,
“label” : “Button 1 URL”,
“type” : “text”,
“initial” : “#”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-1-text}}”,
“comment” : “”
}
},
“button-2-text” : {
“description” : “If you do not enter text in this field, the second button will not be displayed”,
“label” : “Button 2 text”,
“type” : “text”,
“initial” : “Learn More”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-2-text}}”,
“comment” : “”
}
},
“button-2-url” : {
“description” : “”,
“label” : “Button 2 URL”,
“type” : “text”,
“initial” : “#”,
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.button-2-text}}”,
“comment” : “”
}
},
“colors” : {
“type” : “group”,
“label” : “Button Colors”,
“noPicker” : false,
“params” : {
“background” : {
“description” : “”,
“label” : “Background”,
“type” : “color-pair”,
“initial” : {
“base” : “global-color:ehw1byG5yZdXYUvYXY”,
“alt” : “global-color:9V5q72EJeu4uzShxEw”
},
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.colors.background.base}}/{{dc:p:buttons.colors.background.alt}}”,
“comment” : “”
}
},
“border” : {
“description” : “”,
“label” : “Border”,
“type” : “color-pair”,
“initial” : {
“base” : “global-color:ehw1byG5yZdXYUvYXY”,
“alt” : “global-color:ehw1byG5yZdXYUvYXY”
},
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.colors.border.base}}/{{dc:p:buttons.colors.border.alt}}”,
“comment” : “”
}
},
“text” : {
“description” : “”,
“label” : “Text”,
“type” : “color-pair”,
“initial” : {
“base” : “global-color:9V5q72EJeu4uzShxEw”,
“alt” : “global-color:ehw1byG5yZdXYUvYXY”
},
“isVar” : false,
“_documentation” : {
“usage” : “To link the field, use {{dc:p:buttons.colors.text.base}}/{{dc:p:buttons.colors.text.alt}}”,
“comment” : “”
}
}
}
}
}
}
}
Should text be working, or am I missing something in the documentation?
Edit: Aw, my indentation. Let me know if you need to actually go through the parameters and I’ll send it as a separate file.