---
name: Contract detail
route: /contract-detail
menu: 🌐 Organisms
---

## Type: `Organism`

import { Playground } from 'docz'
import { ContractDetails, SimpleButton } from '../src'

# Contract items

<Playground>
  <ContractDetails
    details={[
      {
        label: 'N° des bénéficiaires',
        value: 145,
        color: 'third',
      },
      {
        label: 'Date de renouvellement',
        value: '02/12/2018',
        color: 'third',
      },
      {
        label: 'Primes',
        value: '1,660,789€',
        color: 'third',
        info: (
          <SimpleButton href="https://www.qwant.com">See more</SimpleButton>
        ),
      },
      {
        label: 'Status du paiement',
        value: 'En cours',
        color: 'fourth',
        info: 'Echéance au 15/04/2018',
      },
    ]}
    actions={[
      {
        children: 'Affiliate a new member',
        icon: 'adduser',
      },
      {
        children: 'Upload a list of employees',
        icon: 'file',
      },
    ]}
  />
</Playground>