Sort
Use this customizable sorting stack to build filterable, searchable blocks of content for your page, featuring beautiful animations and masonry style layouts.
- Create sortable, searchable sections of content.
- Includes the ability to add filter buttons so visitors can filter through your content.
- Style buttons and content to match your site design.
- Smooth animations as content is sorted or searched.
- Allow the visitor to change the type from a masonry layout to a list format.
Example
Wonder Woman
The princess of the Amazons, armed with powers of a god, Wonder Woman is one of Earth's most powerful defenders of peace and equality and a member of the Justice League. She is often considered an archetype for the comic book superheroine. She stands for Love, peace, and above all else, truth!
Her original origin depicted her as a clay figure brought to life by the gods, but in recent years she has been depicted as the daughter of Zeus and the Amazon queen Hippolyta.
Superman
Rocketed to Earth as an infant from the doomed planet Krypton, Kal-El was adopted by the loving Kent family and raised in America's heartland as Clark Kent. Using his immense solar-fueled powers, he became Superman to defend mankind against all manner of threats while championing truth, justice and the American way!
Batman
Bruce Wayne, who witnessed the murder of his multi-millionaire parents as a child, swore to avenge their deaths. He trained extensively to achieve mental and physical perfection, mastering martial arts, detective skills, and criminal psychology. Costumed as a bat to prey on criminals's fears, and utilizing a high-tech arsenal, he became the legendary Batman.
Green Lantern
Guy Gardner started out as the backup Green Lantern for Hal Jordan. He has since become one of the most prominent Green Lanterns of the Corps, despite possessing an egocentric personality. Guy's will and rage are some of the most impressive in the entire Emotional Spectrum.
The Flash
Having discovered his mother murdered and his father blamed for the act, forensic scientist Barry Allen sought to clear his father's name and find the real killer. After being doused in chemicals and struck by lightning, Barry was granted the gift of super-speed. Now he protects his hometown of Central City as The Flash, the fastest man alive and founding member of the Justice League.
Supergirl
Kara Zor-El is Superman's cousin and last survivor of Krypton's Argo City. She has a brash and defiant personality that she developed in response to the destruction of Krypton. Currently, she is operating out of National City alongside the D.E.O.
Martian Manhunter
Sole survivor of the Martian people, J'onn J'onzz was teleported to Earth decades ago by Dr. Saul Erdel. Since then, he has adopted Earth as his new home, playing many roles over his time with humanity: detective, secret agent, explorer, and even a pillar of the Justice League.
Green Arrow
Oliver Queen was a spoiled, thrill-seeking playboy, until he was left stranded on a deserted island for several years. There, he trained to become a master archer in order to survive.
After his return home, he used his new-found skills and his wealth to became the costumed vigilante known as Green Arrow.
Black Canary
Dinah Lance was born into a family of crime fighters; her mother was a vigilante and her father a police officer.
She grew up with the company of heroes, and after years of training, followed in her parent's footsteps by assuming the costume, identity, and legacy of her mother Dinah Drake, the Black Canary.
Catwoman
Catwoman, the costumed alias persona of Selina Kyle, is a cat burglar with an on-again, off-again, romantic relationship with Batman. She is shown as a woman who is very strong-willed, independent and sometimes morally dubious.
Batgirl
Barbara Gordon was the first modern age Batgirl until she was brutally shot by the Joker, rendering her paralyzed from the waist down.
After being shot by the Joker Barbara reinvented herself as Oracle, providing intelligence to the DCU heroes and leading the Birds of Prey. She has recently become Batgirl once again to protect Gotham City.
Hawkgirl
Hawkgirl is the reincarnated spirit of Chay-Ara. Born on Thanagar, she gained the rank of lieutenant in her world and was subsequently sent to Earth on a mission, but during her stay, she grew to love Earth and care for its inhabitants, eventually becoming known to the people as the superheroine Hawkgirl.
Black Lightning
Jefferson Michael Pierce aka Black Lightning, is a teacher and former Olympic Gold Medal-winning athlete. He fights crime, using his electrokinetic powers.
Using Sort
Search
Search Bar
Enabling this feature will add a search field to the stack to allow you visitor to sort through the content within the Sort stack.
Placeholder Text
This allows you to insert text within the search field as an example of what visitors can search for.
Search Bar Width
Lets you adjust the width of the search bar. Is measured in the same units as is used in the Columns stack.
Decorative Search Icon
When enabled this feature adds a small decorative icon to the left-hand side of the search field.
Ignore Accented Characters
When enabled the Sort stack will treat accented characters as if they had no accent. This makes for better search results sometimes in cases where the language used in the Sort items could contain accented characters.
Filters
Include Show All Button
When enabled this feature adds a button to the filters list that allows the visitor to show all of the items contained within the Sort stack.
Show All Label
Lets you adjust the text on the Show All button.
Hide Filters at Mobile Breakpoint
When enabled all of the filter buttons will be hidden when viewed at the mobile breakpoint.
Filter Button Size
Allows you to choose a size for your filter buttons. The default, and suggested size, is Small.
Active Button Style
You can choose to use a solid color or a gradient for to indicate which filter item button is currently active. Depending on your selection you will be presented with color pickers for customizing the button’s styling. You’re also give color pickers for the text on the button as well.
Normal Button Style
You can choose to use a solid color or a gradient for all of your filter buttons (excluding the active button which has its own settings, above). Depending on your selection you will be presented with color pickers for customizing the button’s styling. You’re also give color pickers for the text on the button as well.
Hide Filters in Edit Mode
Enabling this feature will hide the filter buttons in Edit Mode to save some space and tidy things up when not actively working with the Sort stack.
Sort Items
Mobile, Tablet and Desktop Columns
Allows you to adjust the number of columns for Sort’s that the sort stack items will be distributed into.
Border
Enabling this feature will allow you to add a border to each Sort Item. When enabled you’ll also be given a color picker for customizing the border’s color.
Item Padding
Allows you to adjust the padding for the inside of the Sort Items. This can be set differently at each of the three responsive breakpoints.
Drop Shadow
You can enable or disable the drop shadow for your Sort Items. When enabled you can adjust the shadows size, its horizontal and vertical offset as well as its color.
Background
Allows you to choose a background color for your Sort Items.
Hide Sort Items in Edit Mode
Enabling this feature will hide the sort items in Edit Mode to save some space and tidy things up when not actively working with the Sort stack.
Sort By
Sort By
The Sort stack can allow your visitor to sort its contents in ascending or descending order (when the sort buttons are enabled). This feature allows you to choose which criteria the items will be sorted by.
- Original Order - Sorted in the order you have placed them into the stack.
- Item Category - Sorted alphabetically by the Item Category which you can add to the Sort Item child stacks.
- Sort Item Number - Sorted numerically by the Sort Item Number which can be set in each individual Sort Item child stack.
- Random - All items are randomly sorted.
Sort & Style Buttons
Button Placement
Allows you to decide whether you’d like the Sort and Style Buttons to be attached to the search field or to stand alone on their own below the search bar.
Sort Buttons
Gives you the ability to choose which sort buttons you’d like to include. You can choose from: ascending, descending and random.
Style Buttons
Sort includes buttons that allow the visitor to show the Sort Items as either a list or in its original masonry style layout.
Collapsable Content
Button Labels
Set the text for the More and Less buttons when making use of the Collapsable Content features found in the individual Sort Item child stacks.
Sort Item
Filters
You will set the filters that apply to this individual Sort Item in this field. You may use more than one per item. All filter names are separated by spaces, not commas.
- FilterOne FilterTwo FilterThree Another RapidWeaver
- Filter One, AnotherFilter, RapidWeaver, FilterThree, Last Filter Name
Sort By
Sort Number
Here you can assign a numerical value to the Sort Item child stack. The contents of the Sort stack can be sorted based on this value.
Category
You can assign a category name to this individual Sort Item child stack. The contents of the Sort stack can be sorted based on this category name. You may use just one category name per Sort Item child stack.
Collapsable Content
Include Collapsable Content
Enabling this feature provides you with a drop zone for extra content in your Sort Item stack. This Collapsable Content will be hidden away until your visitor click on the More button.
Button Alignment
Choose whether the Collapsable Content button will be aligned to the left, center or right. You can set this uniformly across all three breakpoints or customize it to be different depending on the breakpoint.
Filter Button
Label
Set the label for the filter button. This is what your visitor will see on the page.
Filter
This is the name of the filter, which you applied to individual Sort Item child stacks, that will be shown when the visitor clicks this particular Filter button.