This repository was archived by the owner on Jan 18, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathsidenote.ftd
More file actions
93 lines (57 loc) · 1.98 KB
/
sidenote.ftd
File metadata and controls
93 lines (57 loc) · 1.98 KB
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