-
Notifications
You must be signed in to change notification settings - Fork 45
/
-35-layout-horizontal-alignment.twig
50 lines (45 loc) · 1.53 KB
/
-35-layout-horizontal-alignment.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
{% include '@pl/00-layout-docs.twig' %}
{% set notes %}
<bolt-ol>
<bolt-li>This prop is only effective in a single-column layout (e.g. 50%, 67%, and 75%).</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 %}
{% set schema = bolt.data.components['@bolt-layouts-layout'].schema['layout'] %}
{% for alignment in schema.properties.align_items.enum %}
<bolt-layout template="75" align-items="{{ alignment }}">
<bolt-layout-item>
<div class="t-bolt-dark u-bolt-padding-small">75% and horizontally aligned {{ alignment }}</div>
</bolt-layout-item>
</bolt-layout>
{% endfor %}
{% endset %}
{% set twig_markup %}
{% verbatim %}
{% include '@bolt-layouts-layout/layout.twig' with {
template: [
'75',
],
align_items: 'center',
...
} only %}
{% endverbatim %}
{% endset %}
{% set html_markup %}
{% verbatim %}
<bolt-layout template="75" align-items="center">
<bolt-layout-item>
<!-- Content goes here -->
</bolt-layout-item>
</bolt-layout>
{% endverbatim %}
{% endset %}
{% include '@utils/pattern-doc-page.twig' with {
title: 'Horizontal Alignment',
description: 'A single layout item can be horizontally aligned to the start, center, or end.',
notes: notes,
demo: demo,
twig_markup: twig_markup,
html_markup: html_markup,
} only %}