Hello, I created a symbol for a “case study card” and it has a div that I would like to place other divs/elements in to create onHover animations. In the attached example the three bars scale to different widths onHover. However, each card will have its own “case study animation” structure. Is this a case where it’s best not to create a symbol, or are there alternatives? Thank you!
You cannot yet override anything other than text, links, and images inside of a symbol.
If a case study card content is only text, links, and images, then you can use Symbol Content Override to define fields for anything you need to change per Symbol instance. Otherwise, the answer to your question (“Is this a case where it’s best not to create a symbol?”) is yes, it’s the case.
In the future, Symbol Content Override will evolve and give us the power to alter classes, offering more possibilities (like having multiple cards set into the Symbol and altering their Display property to show/hide them.)
Might it be best to remove the dynamic portions from the symbol (in this case, the three bars) so there is some DRY aspect here? Is there a clean way to have the three bars reference the div “case study animation” if they live outside the Case Study Card?