<div class="content-section content-section--sticky glyph-module">
<div class="content-section__title text-button">glyph set</div>
<div class="content-section__content">
<div class="glyph-set glyph-module__grid" data-font="" data-slug="">
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
A
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
B
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
C
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
D
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
E
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
F
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
G
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
H
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
I
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
J
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
K
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
L
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
M
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
N
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
O
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
P
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
Q
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
R
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
S
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
T
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
U
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
V
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
W
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
X
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
Y
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
Z
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
a
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
b
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
c
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
d
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
e
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
f
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
g
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
h
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
i
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
j
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
k
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
l
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
m
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
n
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
o
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
p
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
q
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
r
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
s
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
t
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
u
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
v
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
w
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
x
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
y
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
z
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
1
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
2
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
3
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
4
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
5
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
6
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
7
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
8
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
9
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
0
</div>
</div>
</div>
</div>
</div>
</div>
{% set content %}
{% if data.glyphSet %}
{% include '@glyph-set' with {modifier: "glyph-module__grid", data: data.glyphSet} %}
{% endif %}
{% endset %}
{% include '@content-section' with {class: "glyph-module", modifier: "content-section--sticky", data: {title: data.sectionTitle, content: content}} %}
{
"language": "en-US",
"data": {
"sectionTitle": "glyph set",
"glyphSet": {
"glyphs": "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890",
"font": {
"label": "",
"slug": "",
"path": ""
}
}
}
}
.content-section__content {
.glyph-module > & {
overflow: hidden;
}
}
.glyph-module__grid {
margin-bottom: 40px;
margin-right: -1px;
@include bp(sm-min) {
margin-bottom: 60px;
}
}
import './glyph-module.scss';