Sort

Overview

The sort component is designed to allow a user to rearrange items that are in a group in different ways. Currently the sorting orders are [A-Z] and [Z-A].

Examples

Cards variation

Example
External Link
Refine and sort
Sort By:
This field is required
GDK

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Star Retail Group

This is some content which relates to the card. This is some content which relates to the card.

Call to action
MONA

This is some content which relates to the card. This is some content which relates to the card.

Call to action
General Practice Training Tasmania

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Koshi Sushi

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Interaust Foods

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Nippys

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Dateline Imports

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Breast Cancer Network Austraila

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Tuatara Brewery

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Nood

This is some content which relates to the card. This is some content which relates to the card.

Call to action
Unitex International

This is some content which relates to the card. This is some content which relates to the card.

Call to action 
<div class="container">
<div class="wrapper" data-myob-sort>
<div class="row">
<div class="col col-3 col-12--sm col-12--md">
<div class="mb-1 mb-2--lg">
<h5>Refine and sort</h5>
<hr class="show-for-large">
</div>
<!-- Sorting option starts here -->
<div class="row">
<div class="mb-1 mb-2--lg col col-12 col-6--md">
<div class="select">
<h6>Sort By:</h6>
<select class="select__field" data-sort-control data-sort-item=".card" data-sort-text=".card__head">
<option value="default" selected="selected">Recommended</option>
<option value="ab">Product Name A-Z</option>
<option value="ba">Product Name Z-A</option>
</select>
<div class="form__error-message">
This field is required
</div>
</div>
</div>
</div>
<!-- Sorting option ends here -->
</div>
<div class="col col-9 col-12--sm col-12--md" data-equalizer="card-heading" data-equalize-on-stack="true">
<div class="row">
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/advanced,manufacturing">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/logos/GDK.jpg" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">GDK</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/payglobal,retail">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/backgrounds/star-retail-logo.jpg" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Star Retail Group</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/greentree,retail">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/mona logo.png" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">MONA</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/greentree,health">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/GPTT-Logo.jpg" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">General Practice Training Tasmania</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/exo,food-beverage">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-website/images/logos/case-study-logos/Koshi_logo.jpg" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Koshi Sushi</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/exo,food-beverage">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/interaust.png" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Interaust Foods</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/exo,manufacturing,food-beverage">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/illustrations/nippys-manufacturing-1257833382874.jpeg" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Nippys</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/greentree,wholesale">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/Dateline_Imports.png" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Dateline Imports</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/advanced,non-profit">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-website/images/logos/case-study-logos/bcna-logo.png" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Breast Cancer Network Austraila</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/advanced,manufacturing,food-beverage">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/tuataralogo.png" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Tuatara Brewery</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/exo,retail">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/casestudies/nood_logo.png" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Nood</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
<div class="col col-4 col-12--sm col-6--md col-6--lg">
<div class="card card--center card--vertical mb-2" data-filter-tags="products/exo,wholesale">
<div class="card__fg-img">
<img src="https://www.myob.com/content/dam/myob-redesign/au/images/illustrations/unitex-international-1443359382682.png" alt="">
</div>
<div class="card__content">
<div class="card__head">
<h5 data-equalizer-watch="card-heading">Unitex International</h5>
</div>
<div class="card__body">
<p>This is some content which relates to the card. This is some content which relates to the card.</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Proof point variation

Example
External Link
Refine and sort
Sort By:
inventory

Heading 2

Sub heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do tempor incididunt ut labore et dolore magna aliqua.

Call to action 2
modules-2

Heading 1

Sub heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do tempor incididunt ut labore et dolore magna aliqua.

Call to action 1
payg

Heading 3

Sub heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do tempor incididunt ut labore et dolore magna aliqua.

Call to action 3 
<div class="container">
<div class="wrapper" data-myob-sort>
<div class="row">
<div class="col col-3 col-12--sm col-12--md">
<div class="mb-1 mb-2--lg">
<h5>Refine and sort</h5>
<hr class="show-for-large">
</div>
<!-- Sorting option starts here -->
<div class="row">
<div class="mb-1 mb-2--lg col col-12 col-6--md">
<div class="select">
<h6>Sort By:</h6>
<select class="select__field" data-sort-control data-sort-item=".proof-point" data-sort-text=".proof-point__content h3">
<option value="default" selected="selected">Recommended</option>
<option value="ab">Heading A-Z</option>
<option value="ba">Heading Z-A</option>
</select>
</div>
</div>
</div>
<!-- Sorting option ends here -->
</div>
<div class="col col-9 col-12--sm col-12--md" data-equalize-on-stack="true">
<div class="row">
<div class="col col-12 col-12--sm col-12--md col-12--lg">
<div class="proof-point mb-2">
<div class="proof-point__icon icon icon--fg-grey-500">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>inventory</title>
<path
d="M15.5 6H5.942C6.593 5.364 7 4.48 7 3.5S6.593 1.636 5.942 1H15.5C16.879 1 18 2.122 18 3.5S16.879 6 15.5 6zM4 23h11V7H4v16zM4 5.95V5h1.499c-.361.479-.89.826-1.499.95zM19 3.5C19 1.57 17.43 0 15.5 0h-12C1.57 0 0 1.57 0 3.5v13c0 .276.224.5.5.5H3v6.5c0 .276.224.5.5.5h12c.276 0 .5-.224.5-.5V6.949c1.692-.245 3-1.691 3-3.449zM1 16V3.5C1 2.122 2.122 1 3.5 1S6 2.122 6 3.5c0 .171-.017.338-.05.5H3.5c-.276 0-.5.224-.5.5V16H1zm8.5-5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm-3.854-8.146c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 9.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zm0 4c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 13.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zM22 5.5c-.737 0-1.375.405-1.722 1H20c-1.103 0-2 .897-2 2V16c0 .276.224.5.5.5s.5-.224.5-.5V8.5c0-.551.448-1 1-1V22c0 1.103.897 2 2 2s2-.897 2-2V7.5c0-1.103-.897-2-2-2zM22 23c-.552 0-1-.448-1-1h2c0 .552-.448 1-1 1zm0-16.5c.552 0 1 .449 1 1V14h-2V7.5c0-.551.448-1 1-1zM21 21h2v-6h-2v6z"
fill="#000"
fill-rule="evenodd"
/>
</svg>
</div>
<div class="proof-point__content">
<h3>Heading 2</h3>
<h5 class="fg-grey-700"><em>Sub heading 2</em></h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do
tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="link-advanced">Call to action 2</a>
</div>
</div>
<div class="proof-point mb-2">
<div class="proof-point__icon icon icon--fg-grey-500">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>modules-2</title>
<path d="M17 20.584v-3.801l4-2.4v3.629l-4 2.572zm-5-6.201l4 2.4v3.8l-4-2.571v-3.63zm-10 0l4 2.4v3.8l-4-2.571v-3.63zm4.5-3.504l2.393 1.539 1.66 1.068-4.053 2.43-4.053-2.43L6.5 10.879zm5-7.796L15.528 5.5 11.5 7.917 7.472 5.5 11.5 3.083zM16 10.01l-2.171 1.397L12 12.584V8.783l4-2.4v3.628zm-9 0V6.383l4 2.4v3.8l-1.829-1.175L7 10.01zm0 6.772l4-2.4v3.629l-4 2.572v-3.801zm9.5-.866l-4.053-2.431 1.66-1.068 2.393-1.54 4.053 2.608-4.053 2.43zm5.445-2.634c-.009-.02-.023-.034-.034-.052-.031-.047-.068-.088-.113-.122-.011-.008-.016-.022-.027-.03L17 10.012V5.5c0-.082-.024-.155-.059-.224-.01-.02-.023-.034-.036-.053-.033-.048-.072-.088-.12-.123-.011-.008-.016-.021-.028-.028l-5-3c-.158-.095-.356-.095-.514 0l-5 3c-.013.007-.018.02-.029.029-.047.034-.087.074-.119.122-.013.019-.026.034-.036.053C6.024 5.344 6 5.418 6 5.5v4.512l-4.771 3.067c-.011.008-.016.022-.027.03-.045.035-.082.075-.113.123-.012.017-.025.032-.034.05-.033.067-.055.139-.055.218v4.784c0 .17.086.329.229.42l5 3.217c.009.006.021.004.03.009.072.04.152.07.241.07s.169-.03.241-.07c.009-.005.021-.003.03-.01L11.5 18.88l4.729 3.042c.009.006.021.004.03.009.072.04.152.07.241.07s.169-.03.241-.07c.009-.005.021-.003.03-.01l5-3.215c.142-.092.229-.251.229-.421V13.5c0-.08-.022-.151-.055-.217z" fill="#000" fill-rule="evenodd"/>
</svg>
</div>
<div class="proof-point__content">
<h3>Heading 1</h3>
<h5 class="fg-grey-700"><em>Sub heading 1</em></h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do
tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="link-advanced">Call to action 1</a>
</div>
</div>
<div class="proof-point mb-2">
<div class="proof-point__icon icon icon--fg-grey-500">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>payg</title>
<path d="M5.492 13.048h-.93v1.419c0 .203-.048.356-.144.461-.095.105-.216.157-.362.157-.153 0-.276-.051-.369-.155-.093-.104-.14-.256-.14-.456V10.61c0-.223.051-.382.154-.478.102-.096.265-.144.488-.144h1.303c.385 0 .681.03.888.09.205.056.383.15.532.283.15.132.262.294.34.485.077.192.116.407.116.646 0 .51-.157.897-.472 1.16-.314.264-.782.395-1.404.395zm-.246-2.297h-.684v1.532h.684c.239 0 .439-.025.6-.075.16-.05.283-.133.367-.247.084-.114.126-.263.126-.447 0-.221-.065-.401-.194-.54-.146-.148-.446-.223-.9-.223zm5.36 3.682l-.239-.63H8.33l-.239.643c-.093.25-.173.42-.24.508-.065.088-.174.131-.324.131-.128 0-.24-.046-.338-.14-.098-.093-.147-.2-.147-.318 0-.068.011-.139.034-.211.023-.073.06-.175.113-.305l1.281-3.254.132-.336c.051-.131.106-.24.164-.327.058-.086.135-.156.23-.21.094-.053.21-.08.35-.08.14 0 .259.027.353.08.095.054.171.123.23.207.057.084.106.175.146.272.04.096.09.226.152.388l1.31 3.233c.102.246.153.425.153.537 0 .116-.048.222-.145.32-.097.096-.214.144-.35.144-.08 0-.149-.014-.206-.042-.057-.029-.104-.067-.143-.116-.039-.05-.08-.125-.125-.226-.044-.101-.082-.19-.114-.268zm-2.01-1.391h1.498l-.755-2.068-.742 2.068zM0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm23 0c0-6.075-4.925-11-11-11S1 5.925 1 12s4.925 11 11 11 11-4.925 11-11zm-9.982 2.463v-1.59l-1.224-1.896c-.107-.171-.183-.305-.227-.4-.045-.096-.067-.18-.067-.25 0-.116.045-.216.135-.3.09-.085.201-.127.333-.127.14 0 .245.04.316.118.072.079.18.235.323.47l.937 1.52.947-1.52.143-.236c.039-.064.082-.124.128-.18.047-.055.099-.098.156-.128.057-.03.126-.044.208-.044.128 0 .235.042.32.125.085.083.128.18.128.289 0 .088-.021.177-.065.266-.043.089-.117.212-.222.37l-1.254 1.924v1.589c0 .207-.048.362-.144.465-.096.102-.217.154-.366.154-.15 0-.272-.051-.365-.152-.094-.102-.14-.257-.14-.467zm7.528-1.5v.96c0 .128-.013.23-.038.306-.025.077-.07.146-.138.207-.067.062-.153.12-.258.178-.303.164-.595.283-.875.359-.28.075-.586.112-.916.112-.385 0-.736-.059-1.053-.177-.317-.119-.587-.29-.81-.516-.223-.226-.395-.5-.514-.82-.12-.322-.18-.68-.18-1.077 0-.39.058-.747.175-1.07.116-.324.287-.598.512-.824.226-.226.5-.398.824-.518.324-.12.69-.18 1.1-.18.338 0 .636.046.896.136.26.09.47.203.632.34.162.137.284.281.366.434.082.153.123.288.123.407 0 .127-.047.236-.142.326-.094.09-.208.135-.34.135-.073 0-.143-.017-.21-.051-.067-.034-.124-.082-.17-.144-.124-.196-.23-.344-.317-.444-.087-.1-.203-.185-.35-.253-.147-.068-.335-.102-.563-.102-.234 0-.444.04-.629.12-.184.082-.342.2-.473.353-.13.154-.231.342-.3.566-.07.223-.105.47-.105.741 0 .588.135 1.04.405 1.357.27.317.647.475 1.13.475.234 0 .455-.03.661-.092.206-.061.415-.15.627-.263v-.814h-.786c-.189 0-.332-.028-.429-.085-.097-.057-.145-.154-.145-.29 0-.112.04-.205.121-.277.081-.073.191-.11.33-.11h1.152c.141 0 .26.013.359.038.098.025.177.08.237.167.06.087.091.217.091.39z" fill="#000" fill-rule="evenodd"/>
</svg>
</div>
<div class="proof-point__content">
<h3>Heading 3</h3>
<h5 class="fg-grey-700"><em>Sub heading 3</em></h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do
tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="link-advanced">Call to action 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Usage guidelines

We're so sorry, there are currently no usage guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to @marquee on the #astridd Slack channel.

Implementation guidelines

Name Attribute Description
Control data-sort-control Creates a sortable control in which the user can use to sort by .
Sortable Item Wrapper data-sort-item This value is the universal wrapper class/selector of individual items. For example ".cards" for the card component.
Sortable Item Text data-sort-text Fill in with the class/selector of the child text node you want to sort the items by. For example ".card__head" for the cards component.