> For the complete documentation index, see [llms.txt](https://owwwlab.gitbook.io/chaos-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://owwwlab.gitbook.io/chaos-docs/els/pricing-tables.md).

# Pricing Tables

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV06qf9h-TNWfgkQlZ%2Fpt-1.png?generation=1535988003668144\&alt=media)

The main identifier for the a price table item is `.ol-price-table`

```
<div class="ol-price-table skin-blue">

  <div class="head shadow text-center">
    <div class="contents">
      <h3 class="title">Members</h3>
      <h6 class="subtitle">Registration</h6>
    </div>
  </div>

  <div class="body">
    <ul class="list-unstyled">
      <li>Befor May 14th<span class="pull-right">$230</span></li>
      <li>After May 14th<span class="pull-right">$330</span></li>
      <li>onsite<span class="pull-right">$330</span></li>
    </ul>
    <div class="text-center">
      <a href="#" class="btn btn-skin-blue btn-circle btn-small btn-wide">Register Now</a>
    </div>
  </div>

</div>
```

It consists of a `.head` and a `.body`.

* `.shadow` class makes that shadow bellow the head
* `.text-center` alignes the contents of head to center
* Body can contain anything

**Featured** price table takes the `.featured` class with it

```
<div class="ol-price-table skin-blue featured">
```

There is a alight variation that can be seen at the demo of the template

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV06qhsZJ3o8okHnIN%2Fpt-2.png?generation=1535987983506823\&alt=media)

the code snippet for the above image is:

```
<div class="ol-price-table skin-red">
  <div class="head shadow text-center">
    <div class="contents">
      <h3 class="title">Silver</h3>
      <h6 class="subtitle">Sponsorship</h6>
      <p class="etc"> <strong>$3000</strong></p>
    </div>
  </div>
  <div class="body text-center">
    <ul class="list-unstyled">
      <li>Welcome Reception</li>
      <li>President’s Reception</li>
      <li>Welcome Gift</li>
      <li>Conference Bag</li>
      <li>Attendee's welcome gift</li>
    </ul><a href="#" class="btn btn-skin-red btn-circle btn-small btn-wide">Read More</a>
  </div>
</div>
```

Notice to the `p` with class of `etc` at the head.

## Color Skins

Add these classes to `.ol-price-table`

* `.skin-blue`
* `.skin-green`
* `.skin-purple`
* `.skin-yellow`
* `.skin-red`