Welcome to Arborius CardGen

see https://pew.dk/card for the original CardGen project

While this site does save your data in your local web storage, please also back it up externally.

Simple browser based card generator for faster prototyping of boardgames. I designed this as a single HTML file with embedded CSS and JavaScript, to make it easier for you to download, modify and run offline. The tool requires basic knowledge of HTML and CSS, but hopefully editing the initial templates should be enough to get you started.

For more info or suggestions please visit https://github.com/vildninja/card.

/Jannek

Download project as JSON

name,archea,alchema,ability,type,lore,
Colossus' Zirium,,<span style="font-size: 150%;">⮷</span>,<span style="font-size: 150%;">⟳</span> <span style="font-size: 150%;">⚔️</span>,red,loather.png,
Iron from the Swordwriter,,<span style="font-size: 150%;">⚔️</span>,absorb 1 below,red,elred.png,
Whisperer of the Manchild,,<span style="font-size: 150%;">📤</span>,<span style="font-size: 150%;">⟳</span> 1adj<span style="font-size: 150%;">≡</span>,red,whisperer.png,
"Karal, Servent of Goar",,<span style="font-size: 150%;">⚔️</span>,<span style="font-size: 150%;">📥</span> 1 below,red,karal.png,
The Wanderer: Tritius,4,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">⟳</span> 1adj<span style="font-size: 150%;">≡</span>,red,wanderer.png,
"Deta, a Brick in the Road",4,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">📤</span>,red,deta.png,
"""The Embolism"": A Sorcerer's Regret",4,<span style="font-size: 150%;">📥</span>,<span style="font-size: 150%;">⇧</span> ,red,pylor.png,
Patient Master of the Unlearned,,<span style="font-size: 150%;">📥</span>,<span style="font-size: 150%;">⮷</span> 1adj<span style="font-size: 150%;">≡</span>,green,master.png,
Serpents of the Sandy Tomb,,<span style="font-size: 150%;">📥</span>,<span style="font-size: 150%;">📤</span> 1 below,green,serpents.png,
Whisperer of the Manchild,,<span style="font-size: 150%;">📤</span>,<span style="font-size: 150%;">⟳</span> 1adj<span style="font-size: 150%;">≡</span>,green,whisperer.png,
The Eight Hands of the Glassy Reef,,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">📥</span>,green,seasword.png,
The Wanderer: Tritius,4,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">⟳</span> 1adj<span style="font-size: 150%;">≡</span>,green,wanderer.png,
"Deta, a Brick in the Road",4,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">📤</span>,green,deta.png,
"""The Embolism"": A Sorcerer's Regret",4,<span style="font-size: 150%;">📥</span>,<span style="font-size: 150%;">⇧</span> ,green,pylor.png,
"Juone, Swarm of the Earth",,<span style="font-size: 150%;">⚔️</span>,<span style="font-size: 150%;">⟳</span>,blue,juone.png,
Egsalius: The Jar Man,,<span style="font-size: 150%;">⮳</span>,<span style="font-size: 150%;">⟳</span> <span style="font-size: 150%;">⚔️</span>,blue,jarman.png,
The Eight Hands of the Glassy Reef,,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">📥</span>,blue,seasword.png,
"Karal, Servent of Goar",,<span style="font-size: 150%;">⚔️</span>,<span style="font-size: 150%;">📥</span> 1 below,blue,karal.png,
The Wanderer: Tritius,4,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">⟳</span> 1adj<span style="font-size: 150%;">≡</span>,blue,wanderer.png,
"Deta, a Brick in the Road",4,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">📤</span>,blue,deta.png,
"""The Embolism"": A Sorcerer's Regret",4,<span style="font-size: 150%;">📥</span>,<span style="font-size: 150%;">⇧</span> ,blue,pylor.png,
"Borem, Loather of the Triumphant Descent",4,<span style="font-size: 150%;">⟳</span>,spill a <span style="font-size: 150%;">≡</span> under this,black,borem.png,
The First Falgol Architect,4,<span style="font-size: 150%;">⇧</span>,<span style="font-size: 150%;">⮷</span> 1adj<span style="font-size: 150%;">≡</span>,black,architect.png,
Ogzed: Bastoron's Error,4,defend,<span style="font-size: 150%;">📤</span> 1<span style="font-size: 150%;">♜</span> below the <span style="font-size: 150%;">⚔️</span>er,black,ogzed.png,

.cardframe {
  position: relative;
  float: left;
  width: 39mm;
  height: 39mm;
  margin: 0mm;
  box-sizing: border-box;
  border-top: .25mm solid transparent;
  border-right: .75mm solid black;
  border-bottom: .75mm solid black;
  border-left: .25mm solid transparent;
  background-color: #77d;
}
.tableau {
  border-top: 0.1mm solid black;
  border-bottom: 0.1mm solid black;
  position: absolute;
  display: flex;
  flex-flow: column;
  bottom: 100%;
  width: 100%;
  height: auto;
}
.minitableau {
  position: absolute;
  display: flex;
  flex-flow: column;
  top: 1mm;
  left: 1mm;
  width: 100%;
  height: auto;
}
.info {
  position: absolute;
  display: flex;
  flex-flow: column;
  left: -0.75mm;
  top: -0.75mm;
  width: calc(100% - .7mm);
  height: calc(100% + 1.3mm);
}
.accent {
  position: absolute;
  width: calc(100% - 1.7mm);
  height: calc(100% - 0.2mm);
  background-color: #bbb;
  border: 0.1mm solid black;
  top: 0mm;
  bottom: 0mm;
  left: 0mm;
  right: 2mm;
}
.name {
  position: relative;
  width: 100%;
  background-color: #ddea;
  width: calc(100% - 0mm);
  border: 0.1mm solid black;
  border-bottom: 0mm;
  margin: 1mm;
  box-sizing: border-box;
  z-index: 3;
}
.archea {
  position: absolute;
  right: 0;
  background-color: #ccd;
  border: 0mm;
  border-left: 0.25mm solid black;
  border-top: 0.25mm solid black;
  height: 3.5mm;
  aspect-ratio: 1 / 1;
  bottom: 0mm;
}
.description {
  position: relative;
  box-sizing: border-box;
  flex-grow: 1;
  top: -1mm;
  width: 100%;
  border: 0.1mm solid black;
  margin: 0mm 0mm 0mm 1mm;
  background-color: #eef;
}
.lore {
  position: relative;
  align-self: flex-end;
  bottom: 1.45mm;
  right: 0mm;
  width: 100%;
  box-sizing: border-box;
  background-color: #ccf;
  margin: -1mm;
  border: 0.1mm solid black;
}
h1 {
  font-family: sans;
  margin: 0mm;
  padding: 0.25mm 0.25mm;
  font-size: 2.5mm;
}
h2 {
  font-family: sans;
  font-weight: normal;
  font-style: italic;
  margin: 0mm;
  font-size: 2.5mm;
  color: #0006;
  padding: 1mm;
}
h3 {
  position: absolute;
  font-family: mono;
  font-weight: bold;
  margin: 0mm;
  font-size: 2.75mm;
  bottom: 0mm;
  padding: 0mm 0mm 0mm .25mm;
  line-height: 1.25;
  background-color: #fff3;
  text-shadow: 0 0 3px #fff;
}
h5 {
  font-family: mono;
  font-weight: bold;
  margin: 0mm;
  font-size: 4mm;
  bottom: 0mm;
  padding: 0mm 0mm 0mm .25mm;
  line-height: 1.25;
  background-color: #fff3;
  text-shadow: 0 0 3px #000;
}
h4 {
  font-family: sans;
  text-align: center;
  margin: 0mm 0mm 0mm 0mm;
  font-size: 3.25mm;
  position:absolute; bottom: -0.4mm; right: 0mm;
  padding: 0mm 0.5mm;
}

<h3>%alchema% : %ability%</h3>
        
      </div>
    </div>
  </div>
</div>

<!-- <div class="cardframe" style="
    width: 63.5mm;
    height: 89mm;
    background: %type%;">
    <div class="accent"
         style="background: linear-gradient(80deg, %accent1%, %accent2%);"></div>
    <div class="info">
      <div class="name"
           style="background-color:%namecolor%;">
        <h1>%name%</h1>
        <div class="archea"><h4>%archea%</h4></div>
      </div>
      <div class="description" style="background-color:%desccolor%;">
        <h3>%ability%</h3>

</div>