# Source: https://dev.writer.com/components/metric.md

# Metric

A component that prominently displays a metric value and associated information.

<img src="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/metric.png?fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=659159fc10c3e8b6607febfbb60b5bff" data-og-width="754" width="754" data-og-height="246" height="246" data-path="framework/public/components/metric.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/metric.png?w=280&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=8bd8b9804aeae39cc4ae4ddafb86d27b 280w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/metric.png?w=560&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=07648024c8a97adce7007957acb95551 560w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/metric.png?w=840&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=3bfe8e4488286e7815770498c74c2b71 840w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/metric.png?w=1100&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=bb10b4d15e6029b8009a519eee35c2e9 1100w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/metric.png?w=1650&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=d096195ed05db4a4a6206196ad284eae 1650w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/metric.png?w=2500&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=4e130da0523d3a8a71c06b2c4e5fb7d3 2500w" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Name</td>
      <td>Text</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Value</td>
      <td>Text</td>
      <td>The main value to be displayed. It's not limited to numbers.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Description</td>
      <td>Text</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Note</td>
      <td>Text</td>
      <td>Prefix with '+' for a positive message, with '-' for a negative message.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Primary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Secondary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Positive</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Neutral</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Negative</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>