Is there an example you can provide on how to update a card with dynamic content? For example how would I change the image and title in the code below programmatically?
<calcite-card>
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/200">
<span slot="title">Downtown - 4 mile buffer</span>
<span slot="subtitle">City of AcmeCo</span>
<div slot="footer-start" id="example-slotted-footer">
<calcite-chip id="badge-1" value="calcite chip" icon="check-circle" scale="s"></calcite-chip>
<calcite-chip id="badge-2" value="calcite chip" icon="globe" scale="s"></calcite-chip>
<calcite-chip id="badge-3" value="calcite chip" icon="security" scale="s"></calcite-chip>
</div>
<div slot="footer-end">
<calcite-chip id="badge-4" value="calcite chip" icon="user" scale="s"></calcite-chip>
<calcite-action scale="s" icon="ellipsis" id="example-slotted-action"></calcite-action>
</div>
</calcite-card>
<calcite-tooltip reference-element="badge-1">Verified</calcite-tooltip>
<calcite-tooltip reference-element="badge-2">Public</calcite-tooltip>
<calcite-tooltip reference-element="badge-3">Secure</calcite-tooltip>
<calcite-tooltip reference-element="badge-4">User-created</calcite-tooltip>
Solved! Go to Solution.
Finally pieced it together. If anyone else runs into this...
//title
document.querySelector('[slot="title"]').innerText="Text";
//img src
document.querySelector('[slot="thumbnail"]').src=attributes.PhotoURL;
Finally pieced it together. If anyone else runs into this...
//title
document.querySelector('[slot="title"]').innerText="Text";
//img src
document.querySelector('[slot="thumbnail"]').src=attributes.PhotoURL;