Card Maker

Interactive cheatsheet card maker with live preview. Write markdown on the left, see the rendered layout on the right. Quick reference tables for sections, cards, and modifiers.

#Editor

#Interactive Card Maker

Write ## Section for sections and ### Card for cards. Add {.cols-2} to sections, {.col-span-2} to cards to control layout. See the full syntax reference for visual examples.

Editor
Preview
Syntax Reference
Section
## TitleNew section (default 3 cols)
{.cols-1}1-column grid
{.cols-2}2-column grid
{.cols-3}3-column grid
{.cols-4}4-column grid
{.cols-5}5-column grid
{.cols-6}6-column grid
Card
### TitleNew card in section
{.col-span-2}Span 2 columns
{.col-span-3}Span 3 columns
{.row-span-2}Span 2 rows
{.row-span-3}Span 3 rows
{.primary}Red title accent
{.secondary}Amber title accent
Table
| a | b |Table row
|---|---|Separator (skipped)
{.show-header}Show header row
{.bold-first}Bold first column
{.shortcuts}Monospace first col
{.left-text}Left-align all cells
{.no-wrap}No cell wrapping
List
- itemUnordered list item
1. itemOrdered list item
{.cols-2}Two-column list
{.marker-none}No bullet markers
{.marker-round}Round dot markers
{.marker-timeline}Timeline style
Code Block
```langFenced code block
{.wrap}Wrap long lines
#### h4Sub-heading in card
Inline
`code`Inline code
**bold**Bold text
*italic*Italic text
[t](url)Hyperlink
{.link-arrow}Arrow suffix on link

#Layout Reference

#Sections

Variant Effect
{.cols-1} one-column layout
{.cols-2} two-column layout
{.cols-3} three-column layout (default)
{.cols-4} four-column layout
{.cols-5} five-column layout
{.cols-6} six-column layout

#Cards

Variant Effect
{.col-span-2} card spans 2 columns
{.col-span-3} card spans 3 columns
{.row-span-2} card spans 2 rows
{.row-span-3} card spans 3 rows
{.primary} red title
{.secondary} yellow title

#Content Reference

#Tables

Variant Effect
{.show-header} show the header row
{.shortcuts} render Ctrl S kbd keys
{.bold-first} bold first column
{.plus-first} plus marker in first column
{.left-text} last column left-aligned
{.no-wrap} no text wrapping

#Lists

Variant Effect
{.cols-2} two-column list
{.cols-3} three-column list
{.marker-none} no bullet marker
{.marker-round} round bullet
{.marker-timeline} timeline style

#Code Blocks

Syntax Effect
```lang fenced code block with syntax
{.wrap} wrap long lines in code block
#### heading h4 heading inside a card
Pattern Effect
Text before list header paragraph (above content)
Text after code footer paragraph (below content)
--- horizontal rule (visual separator)
{.link-arrow} big external link style
> blockquote blockquote (indented note)

#Also See

#Official Resources

#Cyber Aurelien Guidi

  • Cyber Aurelien Guidi Syntax (Full syntax reference with visual examples)
  • Nmap (Network scanning and reconnaissance)
  • Metasploit (Exploitation framework cheatsheet)
  • ffuf (Fast web fuzzer for directory and parameter discovery)