---
name: UtilityCard
menu: Components
route: /components/UtilityCard
---

import UtilityCard from './UtilityCard';
import { Playground, Props } from 'docz';

# UtilityCard

This component renders an utilityCard and passes along all props.

## API
<Props of={UtilityCard} />

## Example with designation

<Playground>
 <UtilityCard
   src={"https://loremflickr.com/320/240/dog"}
   status="Identificación"
   number="3"
   designation="LCO"
   title="LOREM ASDASD"
   color="#2286db"
   description="Consulta las sesiones, invita a colaboradores, documenta minutas y dale seguimiento a tus compromisos."
 />
</Playground>

## Example with icon

<Playground>
 <UtilityCard
   src={"https://loremflickr.com/320/240/dog"}
   status="Identificación"
   number="2"
   typeUtility="Score"
   title="LOREM ASDASD"
   color="#2286db"
 />
 </Playground>

## Example long text

<Playground>
 <UtilityCard
   src={"https://loremflickr.com/320/240/dog"}
   status="Identificación"
   number="2"
   typeUtility="Score"
   title="LOREM ASDASD"
   color="#2286db"
   description="LCO emite recomendaciones acerca del lí­mite de crédito ideal para una colocadora según su historial de pagos. En especial considera el monto y la puntualidad de los pagos en todo el historial, dando prioridad a las Últimas 6 quincenas. Según el riesgo asociado a una colocadora, el modelo recomienda aumentar, mantener, o disminuir el límite de crédito y especifica el monto del cambio."
 />
</Playground>