-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
104 lines (82 loc) · 3.71 KB
/
index.html
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
94
95
96
97
98
99
100
101
102
103
104
<html lang="en">
<%- include('head.html'); -%>
<body>
<f-docs-template>
<%- include('nav.html'); -%>
<div slot="banner" class="mx-auto p-32" style="max-width: 1024">
<div class="md:grid md:grid-cols-3">
<div class="md:col-span-2">
<h1 style="font-size: 48px; line-height: 56px" class="text-white mb-16">
Fabric Elements
</h1>
<p style="font-size: 22px; line-height: 28px" class="text-white">
The home of the web component, or custom elements, implementation of Fabric, FINN's
design system.
</p>
</div>
</div>
</div>
<main slot="content">
<div class="grid lg:grid-cols-3 gap-16">
<div class="lg:col-span-2">
<h2 class="mb-16">Installation</h2>
<p>
All the Fabric Elements code is provided as a single package and each component can be
imported from this package.
</p>
<h3 class="mt-24 mb-16">Install from NPM</h3>
<p>The Fabric Elements package can be installed from NPM.</p>
<syntax-highlight>npm install @fabric-ds/elements</syntax-highlight>
<h3 class="mt-24 mb-16">Install from Eik</h3>
<p>The same package is also available via our Eik CDN server</p>
<syntax-highlight
>https://assets.finn.no/pkg/@fabric-ds/elements/v1/index.js</syntax-highlight
>
<h2 class="mt-32 mb-16">Using Components</h2>
<p>Once installed, components can be used in your HTML markup.</p>
<syntax-highlight>
<f-breadcrumbs class="mt-10">
<a href="#/url/1">Eiendom</a>
<a href="#/url/2">Bolig til salgs</a>
<a href="#/url/3" aria-current="page"> Oslo </a>
</f-breadcrumbs>
</syntax-highlight>
<f-breadcrumbs class="mt-10">
<a href="#/url/1">Eiendom</a>
<a href="#/url/2">Bolig til salgs</a>
<a href="#/url/3" aria-current="page"> Oslo </a>
</f-breadcrumbs>
<br />
<h4 class="mt-24 mb-16">Importing from the NPM package</h4>
👉
<strong><i>This is the most common method and should be used in most cases</i></strong>
When importing from NPM you will need to ensure you have build tooling in place. If you
are working with Podium podlets or layouts which is the most common use case at Finn,
you likely already have Eik in place with Rollup or Esbuild in which case no further
action should be needed.
<i>Example</i>
<syntax-highlight>import '@fabric-ds/elements';</syntax-highlight>
<h4 class="mt-24 mb-16">Importing directly from Eik</h4>
👉
<strong><i>This is great for prototyping (can also be used in production)</i></strong>
<p>
It is also possible to import components directly from the URL on our Eik server.
While not common, it should be possible to write Elements code without the need for a
build setup. You might find this useful for rapid prototyping something on a hack day
for example!
</p>
<i>Example</i>
<syntax-highlight>
import 'https://assets.finn.no/pkg/@fabric-ds/elements/v1/index.js';
</syntax-highlight>
</div>
<div>
<f-docs-highlight-box></f-docs-highlight-box>
</div>
</div>
</main>
<%- include('footer.html'); -%>
</f-docs-template>
<%- include('scripts.html'); -%>
</body>
</html>