feat: Search box

contents/_includes/patterns/search-box.njk

@@ -0,0 +1,4 @@
+<div class="search-box">
+    <input type="text" class="search-box__input" />
+    {% circle "md" %}
+</div>

contents/index.njk

@@ -94,6 +94,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %}
             {% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %}
             {% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %}
+            {% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %}
         </div>
     </div>
 

contents/search-box.md

@@ -0,0 +1,40 @@
+---
+layout: layouts/post.njk
+title: Search box
+description: Create a search box with CSS flexbox
+keywords: css flexbox, css search box
+---
+
+## HTML
+
+```html
+<div class="search-box">
+    <!-- Text input -->
+    <input type="text" class="search-box__input" />
+
+    <!-- Search icon sticks to the left or right -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.search-box {
+    display: flex;
+
+    /* If you want to place the icon before the text input */
+    flex-direction: row-reverse;
+
+    /* Border */
+    border: 1px solid #d1d5db;
+}
+
+.search-box__input {
+    border-color: transparent;
+    /* Take available width */
+    flex: 1;
+}
+```
+
+{% demo %}{% include "patterns/search-box.njk" %}{% enddemo %}