• Elevation and Layering

    index
    7
    status
    Draft

    Blueprint uses an elevation system to control the stacking order of layers within an element. Elevation values determine both the CSS z-index and the explosion separation distance.

    Elevation Rules

    • Negative elevations (-2, -1) are typically used for shadows that appear behind the main element
    • Zero elevation (0) is typically used for the primary fill or background
    • Positive elevations (1, 2, 3, etc.) are used for content, highlights, and overlays

    Z-Index Calculation

    The actual CSS z-index is calculated as elevation + 1, ensuring all Blueprint layers have positive z-index values.

    Explosion Separation

    When a Workbench is in “exploded” view mode, each layer is separated along the Z-axis by explosionSeparation * elevation. This creates a 3D effect showing how the layers stack.

    Example Layer Stack

    <Element borderRadius="0.5rem" explosionSeparation="12px">
  <!-- Background shadow -->
  <Shadow elevation={-1} offsetY="4px" blur="8px" />
  
  <!-- Main background -->
  <Fill color="white" elevation={0} />
  
  <!-- Highlight overlay -->
  <Fill 
    gradient="linear-gradient(to bottom, rgba(255,255,255,0.1), transparent)" 
    elevation={1} 
  />
  
  <!-- Text content -->
  <Content elevation={2} padding="1rem">
    Button Text
  </Content>
</Element>

    In exploded view, this creates layers separated by 12px each, clearly showing the construction.