Card

Type: React component

How to get Card?

JavaScript

import { Card } from 'fds/components';

Used to represents a piece of data, part of a bigger collection. The content of a card is completely arbitrary, it depends very much upon the data you want to visualize as a Card. Card itself only standardizes the outer container, including selected and highlighted states.

Props

  1. children

    (Required)

    Type: ReactNode

  2. isHighlighted

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a highlighted state.

    Default value

  3. isMuted

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a muted state. This results in the component being visualized less prominent in comparison to the default state.

    Default value

  4. isSelected

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a selected state.

    Default value

  5. onClick

    (Optional)

    Type: Function

    A callback that is called whenever the component is clicked and is not in a disabled state.

    For more information about React and "events", check the React documentation

    Arguments

    Default value

  6. onMouseEnter

    (Optional)

    Type: Function

    A callback that is called whenever the pointer is moved over the component. This callback is only fired when the pointer enters the component.

    For more information about React and "events", check the React documentation

    Arguments

    Default value

  7. onMouseLeave

    (Optional)

    Type: Function

    A callback that is called whenever the pointer is moved off the component. This callback is only fired when the pointer leaves the component.

    For more information about React and "events", check the React documentation

    Arguments

    Default value

  8. onRef

    (Optional)

    Type: Function

    A callback that is called whenever a component's ref changes.

    Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

    For more information about React and "refs", check the React documentation

    Arguments

    Returns

  9. paddingSize

    (Optional)

    Type: Number | String | Object

    The amount of padding rendered by the component.

    This should be a either, A single size value, one of the following values:

    • 0 (zero, no padding at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

    Or you can pass an object whose properties determine a specific padding size for either:

    • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

    • 'vertical': %single size value% to set the 'top' and 'bottom' padding

    Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

    Default value

  10. spaceVerticalSize

    (Optional)

    Type: Number | String

    The amount of vertical space (or margin) between the children of the component.

    This should be one of the following values:

    • 0 (zero, no margin at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large)

    Default value

  11. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value