## Feature Examples ### Footer - description:

Add additional information to a card with footer.

- example: ```jsx console.log('on chart hover')} title="Sessions" getChartTooltipContent={(index) => ( {index} )} value="1,9K" footer={
This is footer text
} />; ``` ### Trend - description:

The trend indicates the change of the value in percentage.

It has 2 modes:

  • Positive - colored green with arrow upwards
  • Negative - colored red with arrow downwards.

    • If there’s no change in value, trend won’t be displayed.

    - example: ```jsx
    console.log('on chart hover')} trend={12} isTrendVisible={true} title="Sessions" getChartTooltipContent={(index) => ( {index} )} value="1,9K" />


    console.log('on chart hover')} trend={-12} isTrendVisible={true} title="Sessions" getChartTooltipContent={(index) => ( {index} )} value="1,9K" />
    ; ``` ### Action Button - description:

    Summary card can have action button inside to assist with any action needed, since it’s a node.

    - example: ```jsx } onCTAClick={() => console.log('refresh click')} onChartHover={() => console.log('on chart hover')} title="Sessions" getChartTooltipContent={(index) => ( {index} )} value="1,9K" />; ``` ### Clickable Card - description:

    Control is a card is clickable with onClick.

    - example: ```jsx
    console.log('on chart hover')} onClick={() => console.log('general click')} title="Clickable card" getChartTooltipContent={(index) => ( {index} )} value="1,9K" />


    console.log('on chart hover')} title="Not interactive card (default)" getChartTooltipContent={(index) => ( {index} )} value="1,9K" />
    ; ``` ### Loader - description:

    Card supports loading state. will replace the action button when it’s actively loading. If the card is clickable it won’t be actionable as long as the loader is active.

    - example: ```jsx console.log('on chart hover')} title="Sessions" getChartTooltipContent={(index) => ( {index} )} isLoading={true} value="1,9K" />; ``` ### Sparkline Width - description:

    Control the sparkline width by pixels with chartWidth prop.

    - example: ```jsx ( {index} )} />; ``` ### Border - description:

    Control the appearance of the component using the border prop.

    Use this property to emphasize the separation between items.

    - example: ```jsx
    console.log('on chart hover')} trend={12} isTrendVisible={true} title="With border" getChartTooltipContent={(index) => ( {index} )} value="1,9K" />


    console.log('on chart hover')} trend={-12} isTrendVisible={true} title="Without border" getChartTooltipContent={(index) => ( {index} )} value="1,9K" />
    ; ``` ### Horizontal padding - description:

    Control the padding of the card with horizontalPadding prop.

    It supports three sizes:

  • large (default)
  • medium
  • small
    • - example: ```jsx } onCTAClick={() => console.log('refresh click')} onChartHover={() => console.log('on chart hover')} title="Horizontal padding" getChartTooltipContent={(index) => ( {index} )} value="Large size" /> } onCTAClick={() => console.log('refresh click')} onChartHover={() => console.log('on chart hover')} title="Horizontal padding" getChartTooltipContent={(index) => ( {index} )} value="Medium size" /> } onCTAClick={() => console.log('refresh click')} onChartHover={() => console.log('on chart hover')} title="Horizontal padding" getChartTooltipContent={(index) => ( {index} )} value="Small size" /> ; ``` ## Developer Examples ### Tooltip On Title - description:

    If needed, the title can have to better explain the context.

    - example: ```jsx ( {index} )} />; ``` ### Tooltip On Value - description:

    When value appears as abbreviated number, will appear on hover.

    - example: ```jsx ( {index} )} />; ```