The-Forge/components.html at main · skullxcode/The-Forge · GitHub

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Components | The Forge - Design System</title>
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav id="global-navbar">
            <div id="global-navbar-icons">
                <a href="index.html"><img src="logo.png" alt="" id="global-navbar-img"></a>
            </div>
            <div id="global-navbar-links-section">
                <a href="index.html" class="global-navbar-links">Home</a>
                <a href="colors.html" class="global-navbar-links">Colors</a>
                <a href="foundations.html" class="global-navbar-links">Foundations</a>
                <a href="components.html" class="global-navbar-links">Components</a>
                <a href="utilities.html" class="global-navbar-links">Utilities</a>
            </div>
        </nav>
    </header>
    <main class="main-content">

        <aside class="sidebar">
            <h4>Components</h4>
            <nav class="sidebar-nav">
                <a href="#buttons">Buttons</a>
                <a href="#cards">Cards</a>
                <a href="#forms">Forms</a>
                <a href="#alerts">Alerts</a>
            </nav>
        </aside>

        <section class="page-content">
            <h1>Components</h1>
            <p class="page-intro">Reusable UI elements built from our foundations. Use the HTML snippets provided to add them to your project.</p>

            <section id="buttons" class="content-section-box">
                <h2>Buttons</h2>
                <p>Buttons are used for primary actions. We have two main styles: primary (for main actions) and secondary (for outline actions).</p>

                <div class="component-demo-box">
                    <a href="#" class="btn-primary" style="margin-right: 1rem;">Primary Button</a>
                    <a href="#" class="btn-secondary">Secondary Button</a>
                </div>

                <pre class="code-snippet-box"><code>&lt;a href="#" class="btn-primary"&gt;Primary Button&lt;/a&gt;
&lt;a href="#" class="btn-secondary"&gt;Secondary Button&lt;/a&gt;</code></pre>
            </section>

            <section id="cards" class="content-section-box">
                <h2>Cards</h2>
                <p>Cards are used to group related content. They are a flexible container with a shadow, border, and padding.</p>

                <div class="component-demo-box">
                    <div class="cards" style="max-width: 350px;">
                        <div class="cards-title">Card Title</div>
                        <div class="cards-content">This is some content inside a card. It's a great way to group information.</div>
                        <a href="#" class="btn-primary" style="margin-top: 1rem;">Learn More</a>
                    </div>
                </div>

                <pre class="code-snippet-box"><code>&lt;div class="cards"&gt;
    &lt;div class="cards-title"&gt;Card Title&lt;/div&gt;
    &lt;div class="cards-content"&gt;This is some content...&lt;/div&gt;
    &lt;a href="#" class="btn-primary"&gt;Learn More&lt;/a&gt;
&lt;/div&gt;</code></pre>
            </section>

            <section id="forms" class="content-section-box">
                <h2>Forms</h2>
                <p>Styled form elements for collecting user input. Use <code>.form-group</code> to wrap labels and inputs for proper spacing.</p>

                <div class="component-demo-box" style="background-color: #f9f9f9;">
                    <form>
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" class="form-control" rows="3" placeholder="Write your message..."></textarea>
                        </div>
                        <a href="#" class="btn-primary">Submit</a>
                    </form>
                </div>

                <pre class="code-snippet-box"><code>&lt;form&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="name"&gt;Name&lt;/label&gt;
        &lt;input type="text" id="name" class="form-control"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="message"&gt;Message&lt;/label&gt;
        &lt;textarea id="message" class="form-control" rows="3"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;a href="#" class="btn-primary"&gt;Submit&lt;/a&gt;
&lt;/form&gt;</code></pre>
            </section>

            <section id="alerts" class="content-section-box">
                <h2>Alerts</h2>
                <p>Alerts are used to provide contextual feedback messages for typical user actions.</p>

                <div class="component-demo-box" style="background-color: #f9f9f9;">
                    <div class="alert alert-success">
                        <strong>Success!</strong> Your message has been sent.
                    </div>
                    <div class="alert alert-danger">
                        <strong>Error!</strong> Please check your form fields.
                    </div>
                </div>

                <pre class="code-snippet-box"><code>&lt;div class="alert alert-success"&gt;
    &lt;strong&gt;Success!&lt;/strong&gt; Your message has been sent.
&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;
    &lt;strong&gt;Error!&lt;/strong&gt; Please check your form fields.
&lt;/div&gt;</code></pre>
            </section>

        </section>
    </main>
    <footer>
        <div class="quick-links-container">
        <h3>Quick Links</h3>
            <div class="quick-links">
                <a href="index.html">Home</a>
                <a href="colors.html">Colors</a>
                <a href="foundations.html">Foundations</a>
                <a href="components.html">Components</a>
                <a href="utilities.html">Utilities</a>
                <a href="#" class="back-to-top">Back to Top ↑</a>
            </div>
        </div>
        <div class="trademark">
            <p>© 2025 The Forge. A project by skullxcode.</p>
        </div>
    </footer>
</body>
</html>