-
Notifications
You must be signed in to change notification settings - Fork 107
Expand file tree
/
Copy pathindex.html
More file actions
107 lines (90 loc) · 9.64 KB
/
Copy pathindex.html
File metadata and controls
107 lines (90 loc) · 9.64 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
---
layout: layout-base.njk
title: PatternFly Elements
templateEngineOverride: njk
description: A set of community-created web components based on PatternFly design.
---
<link rel="stylesheet" href="home.css">
<body>
<a href="#home-header" class="skip-to-content-link">Skip to content</a>
{% renderFile "./docs/_snippets/pf-bar-html.md" %}
<header class="band accent" id="home-header">
<h1>
<img alt="" src="{{ '/images/pfe-logo-inverse-white.svg' | url }}">
<span class="sr-only">{{ title }}</span>
</h1>
<p>{{ description }}</p>
<div class="cta-group">
<a class="cta primary" href="{{ 'get-started' | url }}">Get started</a>
<a class="cta secondary" href="{{ 'components' | url }}">View the components</a>
</div>
</header>
<main>
<section id="lightw" class="band">
<h2 id="lightweight">Lightweight</h2>
<p class="subtitle">Use only what you need.</p>
<p>Pick and choose from the <a href="{{ '/components/' | url }}">list of components</a>.
Use them all or just one, and keep your page payloads small with PatternFly Elements
because the components range from ~3 kB to ~10 kB in size minified and gzipped.</p>
{% renderFile "./docs/_snippets/card-html.md" %}
<pf-card border>
<h2 slot="header">Card component</h2>
<p>PatternFly Elements are custom HTML elements that work everywhere.
The Card element has <code>header</code> and <code>footer</code> slots for things like
titles and actions.
</p>
<a class="cta" slot="footer" href="components/card">More about <code>pf-card</code></a>
</pf-card>
<a class="cta" href="components/">View the rest of the components</a>
<pf-progress-stepper vertical>
<pf-progress-step description="Use NPM or load PatternFly Elements directly via CDN"
variant="success">Install</pf-progress-step>
<pf-progress-step description="Craft pages and apps using our HTML, CSS, and JS APIs"
variant="info">Build Your UI</pf-progress-step>
<pf-progress-step description="Ship performant, accessible products"
variant="success"
current
icon="optimize" icon-set="patternfly">Ship!</pf-progress-step>
</pf-progress-stepper>
</section>
<section id="univ" class="band base">
<div class="max-width-container">
<h2>Universal</h2>
<header>
<p class="tagline">Integrate PatternFly Elements with your framework of choice or use them by themselves.</p>
<p>PatternFly Elements integrate seamlessly with multiple frontend frameworks. Just install it
with <pf-clipboard-copy inline compact code>npm install @patternfly/elements</pf-clipboard-copy>,
or use PatternFly Elements on their own without a framework.
It's up to you and the needs of your project.</p>
</header>
<pf-tabs>
<pf-tab slot="tab">HTML<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23m53.5-69h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8-16.1-24.8V69h-22.6m89.2-69h23v46.2h32.6V69h-55.6"/><path fill="#e44d26" d="m107.6 471-33-370.4h362.8l-33 370.2L255.7 512"/><path fill="#f16529" d="M256 480.5V131h148.3L376 447"/><path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4m2 22.8H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/><path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6m-4.1 46.5H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/></svg></pf-tab>
<pf-tab-panel>{% renderFile "./docs/_snippets/accordion-html.md" %}</pf-tab-panel>
<pf-tab slot="tab">React<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg></pf-tab>
<pf-tab-panel>{% renderFile "./docs/_snippets/accordion-jsx.md" %}</pf-tab-panel>
<pf-tab slot="tab">Vue<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path fill="#41b883" d="m161.096.001-30.224 52.35L100.647.002H-.005L130.872 226.69 261.749 0z"/><path fill="#34495e" d="m161.096.001-30.224 52.35L100.647.002H52.346l78.526 136.01L209.398.001z"/></svg></pf-tab>
<pf-tab-panel>{% renderFile "./docs/_snippets/accordion-vue.md" %}</pf-tab-panel>
<pf-tab slot="tab">Angular<svg slot="icon" xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 250 250" viewBox="0 0 250 250"><path d="M125 30 31.9 63.2l14.2 123.1L125 230l78.9-43.7 14.2-123.1z" style="fill:#dd0031"/><path d="M125 30v22.2-.1V230l78.9-43.7 14.2-123.1L125 30z" style="fill:#c3002f"/><path d="M125 52.1 66.8 182.6h21.7l11.7-29.2h49.4l11.7 29.2H183L125 52.1zm17 83.3h-34l17-40.9 17 40.9z" style="fill:#fff"/></svg></pf-tab>
<pf-tab-panel>{% renderFile "./docs/_snippets/accordion-ng.md" %}</pf-tab-panel>
<pf-tab slot="tab">Svelte<svg slot="icon" xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 98.1 118" viewBox="0 0 98.1 118"><path d="M91.8 15.6C80.9-.1 59.2-4.7 43.6 5.2L16.1 22.8C8.6 27.5 3.4 35.2 1.9 43.9c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5" style="fill:#ff3e00"/><path d="M40.9 103.9c-8.9 2.3-18.2-1.2-23.4-8.7-3.2-4.4-4.4-9.9-3.5-15.3.2-.9.4-1.7.6-2.6l.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1 1.6 2.3 4.4 3.4 7.1 2.7.6-.2 1.2-.4 1.7-.7L65.5 72c1.4-.9 2.3-2.2 2.6-3.8.3-1.6-.1-3.3-1-4.6-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7l-10.5 6.7c-1.7 1.1-3.6 1.9-5.6 2.4-8.9 2.3-18.2-1.2-23.4-8.7-3.1-4.4-4.4-9.9-3.4-15.3.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5 8.9-2.3 18.2 1.2 23.4 8.7 3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7L32.4 46.1c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6c1.6 2.3 4.4 3.3 7.1 2.6.6-.2 1.2-.4 1.7-.7l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5 8.9-2.3 18.2 1.2 23.4 8.7 3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5" style="fill:#fff"/></svg></pf-tab>
<pf-tab-panel>{% renderFile "./docs/_snippets/accordion-svelte.md" %}</pf-tab-panel>
</pf-tabs>
<pf-accordion>
<pf-accordion-header expanded>
<h3>Getting Started</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Read our <a href="/get-started/">Getting started</a> page to learn how to install and use PatternFly Elements.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>HTML APIs</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>For more information on how to use each PatternFly element, read the <a href="/components/">component docs</a>.</p>
</pf-accordion-panel>
</pf-accordion>
<a class="cta" href="{{ '/framework-integration/' | url }}">Learn how to integrate PatternFly Elements in your application</a>
</div>
</section>
</main>
{% include '_foot.njk' %}