@equinor/eds-core-react/dist/esm/components/Card/Card.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled from 'styled-components';
import * as Card_tokens from './Card.tokens.js';
import { bordersTemplate } from '@equinor/eds-utils';
import { jsx } from 'react/jsx-runtime';
import { Paper } from '../Paper/Paper.js';

const {
  primary
} = Card_tokens;
const StyledCard = styled(Paper).withConfig({
  displayName: "Card__StyledCard",
  componentId: "sc-bjucjn-0"
})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], ({
  $background
}) => $background, bordersTemplate(primary.border));
const Card = /*#__PURE__*/forwardRef(function Card({
  children,
  variant = 'default',
  elevation = 'none',
  ...rest
}, ref) {
  const cardVariant = variant === 'default' ? 'primary' : variant;
  const token = Card_tokens[cardVariant];
  const props = {
    ref,
    $background: token.background,
    ...rest
  };
  return /*#__PURE__*/jsx(StyledCard, {
    elevation: elevation,
    ...props,
    children: children
  });
});

export { Card };