• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Default
  2. Brand cell types
    1. BioReliance
    2. Millipore
    3. Supelco
    4. SAFC
    5. Sigma-Aldrich
  3. Themable cell types
    1. F
    2. Hexagon
    3. T
    4. Tile
  4. Custom position and size
  5. CSS Variables
  6. Properties
  7. Shadow Parts
Components Background Cells

ld-bg-cells #

A background pattern with the Merck cells as additional visual element.

Default #

<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>

Brand cell types #

BioReliance #

<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>

Millipore #

<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>

Supelco #

<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>

SAFC #

<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>

Sigma-Aldrich #

<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>

Themable cell types #

F #

<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>

Hexagon #

<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>

T #

<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>

Tile #

<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>

Custom position and size #

<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>

CSS Variables #

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

Properties #

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'

Shadow Parts #

Part Description
"content" Element wrapping the slot
"pattern" Element containing the cells pattern