<metavrs-viewer
id="ex3"
company-eid="-5286354827860524208"
viewer-eid="-2858267086817596446"
sku="demowatch%gold"
fallback-poster="https://api.metav.rs/static/company/-5286354827860524208/file/8976010479029864051.jpg"
></metavrs-viewer>
<metavrs-viewer-selector id="ex3-selector" for="ex3">
<metavrs-asset sku="demowatch%gold" color="#bf8432" label="Or 19k 750" />
<metavrs-asset sku="demowatch%steel" color="#9da6a8" label="Acier" />
</metavrs-viewer-selector>
<style>
/* Custom selector theme example */
.metavrs-viewer-selector {
display: flex;
gap: 1em;
}
.metavrs-selector-item {
background-color: transparent;
padding: 0.5em;
position: relative;
width: 6em;
text-align: center;
flex-grow: 0; flex-shrink: 0;
}
.metavrs-selector-item.current {
border: 1px solid currentColor;
box-shadow: 0 0 1em color-mix(in srgb, currentColor 33%, transparent);
}
.metavrs-selector-item > button {
border: none; cursor: pointer; display: block;
}
.metavrs-selector-item-color {
width: 100%; aspect-ratio: 16 / 9;
}
.metavrs-selector-item-label {
width: 100%; text-align: center;
height: max-content;
font-family: inherit;
font-weight: bold;
padding: 0.75rem 0 0 0;
background: none;
font-size: 0.8em;
}
</style>