Order
Set the order of an element in a flex container
Properties
| Utility class | Description | Example |
|---|---|---|
| .order-initial | Return to the browser default. |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-first | Forces item to appear first. |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-1 | order: 1 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-2 | order: 2 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-3 | order: 3 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-4 | order: 4 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-5 | order: 5 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-6 | order: 6 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-7 | order: 7 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-8 | order: 8 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-9 | order: 9 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-10 | order: 10 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-11 | order: 11 |
1
2
3
4
5
6
7
8
9
10
11
|
| .order-last | Forces item to appear last. |
1
2
3
4
5
6
7
8
9
10
11
|
Utility classes
| Utility | Example | Code |
|---|---|---|
| .order-value | .order-first | class=("order-first") |
- Use single-quoted strings in Utility classes.
- Do not quote numbers or px values. With the exception of half (
05), values like'105', and'205'should be treated as strings. - String tokens for half values (like
05) and negative values (likeneg-1) may also be written with their unquoted number token equivalent:0.5,1.5,2.5,-1,-1.5, etc. - If multiple utilities share the same prefix (ex:
.text-or.flex-) or a single utility accepts multiple kinds of values (ex:.borderaccepts both border weight and border color), their shared mixin can accept multiple comma-separated values:u-text('primary-darkest', 'no-underline', 'bold')u-border-top(2px, 'accent-warm')
- Output any utility mixin as
!importantby appending!importantto the mixin’s argument list: u-bg('red-warm-50v', !important)
Utility variants
More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.
Responsive variants
You can apply different styles at differentresponsive breakpoints using responsive utilities.
Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).
| Utility variable | Responsive |
|---|---|
| $font-style-settings | false |
State variants
You can apply different styles for different state variants using state utilities.
Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).
| Utility variable | Active | Focus | Hover | Visited |
|---|---|---|---|---|
| $font-style-settings | false | false | false | false |
