diff --git a/templates/Apps/HeroCraftCardV1/content.hbs b/templates/Apps/HeroCraftCardV1/content.hbs
index c9254da..a9348d6 100644
--- a/templates/Apps/HeroCraftCardV1/content.hbs
+++ b/templates/Apps/HeroCraftCardV1/content.hbs
@@ -10,13 +10,16 @@
diff --git a/templates/Apps/HeroCraftCardV1/style.css b/templates/Apps/HeroCraftCardV1/style.css
index b30cd9f..cff3266 100644
--- a/templates/Apps/HeroCraftCardV1/style.css
+++ b/templates/Apps/HeroCraftCardV1/style.css
@@ -72,6 +72,39 @@
bottom: -10px;
}
+ .aura-values {
+ grid-row: 1;
+ grid-column: -3 / -1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 3;
+
+ .dual-pill {
+ border-radius: 999px;
+ background: var(--accent-1);
+ display: flex;
+ flex-direction: row;
+ gap: 0.25rem;
+ align-items: center;
+ padding-left: 8px;
+ margin-left: 1rem;
+ margin-bottom: 1.2rem;
+ }
+
+ .values {
+ border-radius: 999px;
+ margin: 2px;
+ background: var(--base-background);
+ color: var(--base-text);
+ padding: 0.125rem 0.5rem;
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+ --slash-color: var(--accent-1);
+ }
+ }
+
.craft-list {
display: grid;
grid-template-rows: subgrid;
diff --git a/templates/css/elements/span.css b/templates/css/elements/span.css
index b4a2cef..85a099b 100644
--- a/templates/css/elements/span.css
+++ b/templates/css/elements/span.css
@@ -10,6 +10,13 @@
overflow: hidden;
}
+ &.slash {
+ width: 2px;
+ background: var(--slash-color, currentColor);
+ border-radius: 999px;
+ transform: rotate(var(--slash-rotation, 15deg));
+ }
+
/* Makes it so that spans are never less than the font size */
&:empty::before {
content: "\200b";