-
Notifications
You must be signed in to change notification settings - Fork 45
/
-50-layout-item-order.twig
78 lines (72 loc) · 2.44 KB
/
-50-layout-item-order.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
{% include '@pl/00-layout-docs.twig' %}
{% set notes %}
<bolt-ol>
<bolt-li>Only use this if the order of layout items need to be adjusted at specific breakpoints.</bolt-li>
<bolt-li>The @from-* keywords mean "starting from a particular breakpoint".</bolt-li>
<bolt-li>Reference the schema for all options. <a href="{{ link['viewall-layouts-layout'] }}?selected-tab=schema" class="e-bolt-text-link">Layout schema<span class="e-bolt-text-link__icon-after"><bolt-icon name="chevron-right"></bolt-icon></span></a></bolt-li>
</bolt-ol>
{% endset %}
{% set demo %}
<bolt-layout template="thirds@from-small">
<bolt-layout-item order="last@from-small">
<div class="t-bolt-dark u-bolt-padding-small">
<strong>Layout item</strong> (this will come last once the viewport is larger than the small breakpoint)
</div>
</bolt-layout-item>
<bolt-layout-item>
<div class="t-bolt-dark u-bolt-padding-small">
<strong>Layout item</strong>
</div>
</bolt-layout-item>
<bolt-layout-item>
<div class="t-bolt-dark u-bolt-padding-small">
<strong>Layout item</strong>
</div>
</bolt-layout-item>
</bolt-layout>
{% endset %}
{% set twig_markup %}
{% verbatim %}
{% set layout_items %}
{% include '@bolt-layouts-layout/layout-item.twig' with {
content: 'Layout item (this will come last once the viewport is larger than the small breakpoint)',
order: 'last@from-small',
} only %}
{% include '@bolt-layouts-layout/layout-item.twig' with {
content: 'Layout item',
} only %}
{% include '@bolt-layouts-layout/layout-item.twig' with {
content: 'Layout item',
} only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
content: layout_items,
template: [
'thirds@from-small',
],
} only %}
{% endverbatim %}
{% endset %}
{% set html_markup %}
{% verbatim %}
<bolt-layout template="thirds@from-small">
<bolt-layout-item order="last@from-small">
<!-- Content goes here -->
</bolt-layout-item>
<bolt-layout-item>
<!-- Content goes here -->
</bolt-layout-item>
<bolt-layout-item>
<!-- Content goes here -->
</bolt-layout-item>
</bolt-layout>
{% endverbatim %}
{% endset %}
{% include '@utils/pattern-doc-page.twig' with {
title: 'Content Order of Individual Layout Item',
description: 'Bring the layout item to the start or the end of the layout.',
notes: notes,
demo: demo,
twig_markup: twig_markup,
html_markup: html_markup,
} only %}