> ## Documentation Index
> Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Rules list

<Note>Available on the **Advanced plan** and above.</Note>

Use this component to render a list of rule items, which are how customers can earn points.

If a customer is logged in, the rule items are interactive. When a rule item is clicked, its corresponding [rule modal](/sdk/modal-components/rule-modal/) opens, which tells them more about the rule, and (for some rule types) allow them to complete the action within the modal.

### Referral rule

If you have the referral rule enabled, instead of displaying a rule modal on click, the [referral modal](/sdk/modal-components/referral-modal/) is shown instead.

## Code

```html theme={null}
<div data-lion-rules-list></div>
```

## Preview

### Guest view

<Frame>
  <img src="https://mintcdn.com/loyaltylion/mzpO03HW8a1K958n/images/sdk/rules-list-guest-view.png?fit=max&auto=format&n=mzpO03HW8a1K958n&q=85&s=e54cc26387e525d64fc7459127186ee0" alt="Rules list - guest view" width="1412" height="760" data-path="images/sdk/rules-list-guest-view.png" />
</Frame>

### Customer view

<Frame>
  <img src="https://mintcdn.com/loyaltylion/mzpO03HW8a1K958n/images/sdk/rules-list-customer-view.png?fit=max&auto=format&n=mzpO03HW8a1K958n&q=85&s=0fb1976f40b045acbb94611e88391843" alt="Rules list - customer view" width="1422" height="960" data-path="images/sdk/rules-list-customer-view.png" />
</Frame>