A background pattern with the Merck cells as additional visual element.
<ld-bg-cells></ld-bg-cells>
<style>
ld-bg-cells {
aspect-ratio: 16/9;
}
</style>
<div class="ld-bg-cells">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/hexagon-cell.svg')"></div>
</div>
<style>
.ld-bg-cells {
aspect-ratio: 16/9;
}
</style>
<ld-bg-cells type="bioreliance"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--bioreliance">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/bioreliance-cell.svg')"></div>
</div>
<ld-bg-cells type="millipore"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--millipore">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/millipore-cell.svg')"></div>
</div>
<ld-bg-cells type="supelco"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--supelco">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/supelco-cell.svg')"></div>
</div>
<ld-bg-cells type="safc"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--safc">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/safc-cell.svg')"></div>
</div>
<ld-bg-cells type="sigma-aldrich"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--sigma-aldrich">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/sigma-aldrich-cell.svg')"></div>
</div>
<ld-bg-cells type="f"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--f">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/f-cell.svg')"></div>
</div>
<ld-bg-cells type="hexagon"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--hexagon">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/hexagon-cell.svg')"></div>
</div>
<ld-bg-cells type="t"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--t">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/t-cell.svg')"></div>
</div>
<ld-bg-cells type="tile"></ld-bg-cells>
<div class="ld-bg-cells ld-bg-cells--tile">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/tile-cell.svg')"></div>
</div>
<ld-bg-cells class="custom"></ld-bg-cells>
<style>
.custom {
--ld-bg-cells-position: bottom left;
--ld-bg-cells-size: 150%;
aspect-ratio: 1;
}
</style>
<div class="ld-bg-cells custom">
<div class="ld-bg-cells__pattern" style="--ld-bg-cells-image:url('/liquid/dist/build/assets/hexagon-cell.svg')"></div>
</div>
<style>
.custom {
--ld-bg-cells-position: bottom left;
--ld-bg-cells-size: 150%;
aspect-ratio: 1;
}
</style>
Variable | Description | Default |
---|---|---|
--ld-bg-cells-position |
Position of the cells | Individual per cell type |
--ld-bg-cells-size |
Size of the cells | Individual per cell type |
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
key |
key |
for tracking the node's identity when working with lists | string | number |
undefined |
ref |
ref |
reference to component | any |
undefined |
type |
type |
Cells pattern | "bioreliance" | "f" | "hexagon" | "millipore" | "qa-x2f-qc" | "safc" | "sigma-aldrich" | "supelco" | "t" | "tile" |
'hexagon' |
Part | Description |
---|---|
"content" |
Element wrapping the slot |
"pattern" |
Element containing the cells pattern |