#67 Add Grid Snippet

Closed
opened 2 years ago by jhabdas · 1 comments
jhabdas commented 2 years ago (Migrated from git.habd.as)
Owner

Available in hack. Use with Cell.

Available in hack. Use with Cell. - [x] Add composable Faceted components and Shortcodes. - [x] Unblocks https://git.habd.as/comfusion/hall-of-mirrors/issues/17
jhabdas commented 2 years ago (Migrated from git.habd.as)
Poster
Owner

Example grid:

<div class="grid">
  <div class="cell -4of12">
    {{< hackcss-card header="Step 1" >}}
      {{< hackcss-form action="https://git.habd.as/comfusion/toxic-swamp/releases" >}}
        {{< hackcss-button type="primary" isblock="true" isghost="true" >}}
          <svg class="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
            <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
          </svg>&nbsp;&nbsp;Download
        {{< /hackcss-button >}}
      {{< /hackcss-form >}}
    {{< /hackcss-card >}}
  </div>
  <div class="cell -4of12">
    {{< hackcss-card header="Step 2" >}}
      {{< hackcss-button type="info" isblock="true" isghost="true" >}}
        <svg id="source" aria-labelledby="source-label" class="i-code" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
        </svg>&nbsp;&nbsp;Install
      {{< /hackcss-button >}}
    {{< /hackcss-card >}}
  </div>
  <div class="cell -4of12">
    {{< hackcss-card header="Step 3" >}}
      {{< hackcss-button type="success" isblock="true" isghost="true" >}}
        <svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
          <path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
        </svg>&nbsp;&nbsp;Profit
      {{< /hackcss-button >}}
    {{< /hackcss-card >}}
  </div>
</div>
Example grid: ``` <div class="grid"> <div class="cell -4of12"> {{< hackcss-card header="Step 1" >}} {{< hackcss-form action="https://git.habd.as/comfusion/toxic-swamp/releases" >}} {{< hackcss-button type="primary" isblock="true" isghost="true" >}} <svg class="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path> </svg>&nbsp;&nbsp;Download {{< /hackcss-button >}} {{< /hackcss-form >}} {{< /hackcss-card >}} </div> <div class="cell -4of12"> {{< hackcss-card header="Step 2" >}} {{< hackcss-button type="info" isblock="true" isghost="true" >}} <svg id="source" aria-labelledby="source-label" class="i-code" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" /> </svg>&nbsp;&nbsp;Install {{< /hackcss-button >}} {{< /hackcss-card >}} </div> <div class="cell -4of12"> {{< hackcss-card header="Step 3" >}} {{< hackcss-button type="success" isblock="true" isghost="true" >}} <svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" /> <path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" /> </svg>&nbsp;&nbsp;Profit {{< /hackcss-button >}} {{< /hackcss-card >}} </div> </div> ```
Sign in to join this conversation.
No Milestone
No project
No Assignees
1 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.