devto

Open Graph Image like devto style

Used URL

https://generator.opengraphimg.com/?style=devto&title=Generate%2520Open%2520Graph%2520Images%2520%253Cbr%2520%252F%253E%2520%253Cb%253Edirectly%2520in%2520your%2520browser%253C%252Fb%253E%2520%253Cbr%2520%252F%253E%2520%253Csmall%2520class%253D%2522text-3xl%2522%253EBuilt-in%2520support%2520for%2520HTML%2520and%2520emojis%2520%25F0%259F%25A4%25A9%253C%252Fsmall%253E&tags=easy,fast,automatic&author=opengraphimg&atSymbol=true&titleMargin=-m-12

Remember that i use
`encodeURIComponent(encodeURIComponent("Your content here"))`
to encode the title of the image

Used props

VariableValue
styledevto
titleGenerate Open Graph Images <br /> <b>directly in your browser</b> <br /> <small class="text-2xl">Built-in support for HTML and emojis 🤩</small>
tagseasy,fast,automatic
authoropengraphimg
atSymboltrue
titleMargin-m-12

Available props

VariableDefault value
logoUrl""

Default props

VariableDefault value
background#ffffff00
boxBackground#ffffff00
boxOverlayBackground#1C64F200
borderColor#1C64F200
titleAligntext-left
titleSizetext-6xl
titleMargin-mt-16 -mx-16
titleColor#1C64F2
detailsMargin-my-20 -mx-16
tagsSizetext-2xl
tagsColor#1C64F200
authorSizetext-2xl
authorColor#1C64F200
logoSizew-10 h-10
logoMarginmr-4