Browse Source

docs(shortcode/grid): add example of image alignment

Josh Habdas 10 months ago
parent
commit
d63fd3ff08
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 28 additions and 0 deletions
  1. 28
    0
      docs/content/shortcode/grid.md

+ 28
- 0
docs/content/shortcode/grid.md View File

@@ -72,6 +72,34 @@ With 12 columns:
72 72
   {{< hackcss-cell class="-1of12" text="1" />}}
73 73
 {{< /hackcss-grid >}}
74 74
 
75
+Aligning three images with space around:
76
+
77
+```html
78
+{{</* hackcss-grid class="-around" >}}
79
+  {{< hackcss-cell class="-2of12" >}}
80
+    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E">
81
+  {{< /hackcss-cell >}}
82
+  {{< hackcss-cell class="-2of12" >}}
83
+    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E">
84
+  {{< /hackcss-cell >}}
85
+  {{< hackcss-cell class="-2of12" >}}
86
+    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E">
87
+  {{< /hackcss-cell >}}
88
+{{< /hackcss-grid */>}}
89
+```
90
+
91
+{{< hackcss-grid class="-around" >}}
92
+  {{< hackcss-cell class="-2of12" >}}
93
+    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E">
94
+  {{< /hackcss-cell >}}
95
+  {{< hackcss-cell class="-2of12" >}}
96
+    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E">
97
+  {{< /hackcss-cell >}}
98
+  {{< hackcss-cell class="-2of12" >}}
99
+    <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E">
100
+  {{< /hackcss-cell >}}
101
+{{< /hackcss-grid >}}
102
+
75 103
 Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
76 104
 
77 105
 ```html

Loading…
Cancel
Save