-
Notifications
You must be signed in to change notification settings - Fork 1
/
sidenote.ftd
93 lines (57 loc) · 1.98 KB
/
sidenote.ftd
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
-- site-doc.doc-home: Sidenote
site-title: Bling
show-tabs: false
github-url: https://github.com/fastn-community/bling
current-package: fastn-community.github.io/bling
A "sidenote component" is a UI component used to display additional or
supplementary information related to the main content within a user interface.
-- site-doc.header: Example
-- site-doc.output:
colors: $ftd.default-colors
types: $ftd.default-types
-- sidenote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
-- end: site-doc.output
-- site-doc.header: How to use
-- cb.code: Add `bling` dependency into your FASTN.ftd
lang: ftd
\-- fastn.dependency: fastn-community.github.io/bling
-- cb.code: import `sidenote` inside your `.ftd` file
lang: ftd
\-- import: fastn-community.github.io/bling/sidenote
-- cb.code: sample usage of `-- sidenote` component
lang: ftd
\-- sidenote.sidenote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
-- site-doc.header: Properties:
Below are details of all properties of `sidenote` component.
-- site-doc.component-property: `body`
type: Body (`required`)
It's used to add body content to read-more component.
-- end: site-doc.doc-home
-- component sidenote:
optional body body:
-- ftd.column:
padding-vertical.px: 16
padding-horizontal.px: 32
border-color: $inherited.colors.border-strong
border-width.px: 1
background.solid: $inherited.colors.background.step-2
border-radius.px: 8
max-width.fixed.px: 800
width: auto
align-self: center
-- ftd.text: Sidenote:
role: $inherited.types.copy-small
color: $inherited.colors.text-strong
-- ftd.text:
role: $inherited.types.copy-small
color: $inherited.colors.text
text-align: justify
$sidenote.body
-- end: ftd.column
-- end: sidenote