# Sort Direction class

**URL:** <https://forum.finsweet.com/t/sort-direction-class/4343>\
**Category:** Attributes\
**Tags:** cmssort, cms-sort\
**Created:** [March 1, 2025, 1:48pm UTC](https://forum.finsweet.com/t/sort-direction-class/4343 "2025-03-01T13:48:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kakimari01](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kakimari01/32/3770_2.png) [@kakimari01](https://forum.finsweet.com/u/kakimari01)\
**Post date:** [March 1, 2025, 1:48pm UTC](https://forum.finsweet.com/t/sort-direction-class/4343/1 "2025-03-01T13:48:25Z")

</div>

HI! I am just trying to implement Sort Direction classes to show the sorting direction with arrows but I could not figure it out how to do it. Basically I need 3 states: ↕ , ↑, ↓

I added the following attributes to a button with span text in it:  
fs-cmssort-element: trigger  
fs-cmssort-field: firm  
fs-cmssort-asc: ascending-class  
fs-cmssort-desc: descending-class

But how do I change the arrows with the classes?

- URL: ([https://propfirmchooser-93f723.webflow.io/](https://propfirmchooser-93f723.webflow.io/))
- Webflow Read-only link: ([Webflow - Propfirmchooser](https://preview.webflow.com/preview/propfirmchooser-93f723?utm_medium=preview_link&utm_source=designer&utm_content=propfirmchooser-93f723&preview=a530d68d65acd4d21c99542f4ce5726d&locale=en&workflow=preview))

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 4, 2025, 1:44pm UTC](https://forum.finsweet.com/t/sort-direction-class/4343/2 "2025-03-04T13:44:41Z")

</div>

Hey @kakimari01!

The sorting direction classes are being correclty applied, however it seems there are no styles applied to them.

 ![Screenshot 2025-03-04 at 13.40.31](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/3/3d83f10b19b21d9a56cdbe873636fc7b2c07fe4a.jpeg)

My suggestion, since there are several sorting triggers, would be to use the default `is-asc` class

The way to properly add styles is to create a combo class on the element and style the `is-asc` and `is-desc` classes as shown (very roughly) below

Ascending

 ![Screenshot 2025-03-04 at 13.42.23](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/c/c4d0327a526ccb5963bebe9e9eac1ba31be8b742.jpeg)  
Descending  
 ![Screenshot 2025-03-04 at 13.43.51](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/b/b82629fabfba872be4f8d9871a0ff29171127ae1.jpeg)

Let me know if you need any help implementing this!