The Pane and Card components are one of the most important components in Evergreen. They are used as primitives to construct layouts and compose components. In most cases you can use a Pane instead of a div element.

The Pane and Card components map almost directly to the Box from ui-box. The Box component is a UI Primitive component that is used as the base of many components in Evergreen.

Besides the Pane and Card component, most other components use Box or Pane as well.

The Box component is a base component or "UI primitive" for creating layouts and composing components. Many components within Evergreen use the Box component instead of a element such as div or button.

The Box component is useful because it helps with 3 common use cases

• Create layouts without helper classes.
• Define components without worrying about CSS.
• Override single properties when using components.

In Evergreen most of the time you don’t deal with CSS classes through the className property. Instead, you write CSS properties directly onto your Evergreen components — in most cases it will just work.

If you know what you are doing and do need to use CSS directly, be aware that mixing Evergreen with regular CSS might give you unexpected results.

In some cases you still want to use inline styles. The most common use cases is when you are animating a CSS property and the value is always different.

Use the Pane component to create your layouts. Most CSS properties are supported on the Pane component.

Pane

Most components in Evergreen use a Pane or Box under the hood. To add spacing, or layout properties, pass the properties straight to the component:

Left Aligned
ButtonPrimary Button

In most cases in Evergreen you can use the height property on components to change the size of a component. The text styles and padding will adjust based on the height you pass.

Big Button

We recommend using values for heights, widths, margins, paddings that are always divisible by 8. Within Evergreen we call this the major scale.

• majorScale(1) => 8
• majorScale(2) => 16
• majorScale(3) => 24
• majorScale(4) => 32
• majorScale(5) => 40

Big Button

We recommend only using the 4px grid for values under 40. Try making your designs work with the major scale first before using the minor scale. We recommend using the minor scale primarily for spacing only when the major scale is too much.

For example: 4, 12, 20 are fine to use. But avoid using 52.

• minorScale(1) => 4
• minorScale(3) => 12
• minorScale(5) => 20
• minorScale(7) => 28
• minorScale(9) => 36

ButtonButton

Currently there is no opinionated way to construct responsive layouts in Evergreen. In the case of responsive layouts you might want to simply use a div with a class name and use breakpoints in CSS — or potentially a CSS-in-JS solution.

In the case when you need to pass properties to a Evergreen component based on the viewport, you can try something like react-component-queries.

Pane & Card don’t have text styles applied to them. Always use a Text, Heading or other typography component as children to Panes & Cards.

The Pane component maps almost directly to the Box from ui-box. This means you can pass everything to Pane that you can pass to Box. Read more above to learn about this.

Because the Pane component directly maps to a Box you can pass almost any CSS property directly to the React component.

Panes and Cards have a elevation property to give the component a box shadow and visually elevate it from the page.

Most commonly you will be only using 0, 1 and 2.

Elevation 0Flat Panes
Elevation 1Floating Panes

Elevation 0Flat Panes
Elevation 1Floating Panes
Elevation 2Popovers and Dropdowns
Elevation 3Toasts
Elevation 4Dialog

The background property on a Pane is special. You have access to all of the colors defined in the theme objects.

tint1
tint2

The border property on a Pane is special. You have access to all of the colors defined in the theme objects.

Possible values are default or muted. If you pass the border property as a boolean it will use the default option.

All border sides are supported on a Pane

The Card component is exactly the same as the Pane component. The only difference is that the Card has a borderRadius by default.