diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css
index 263dde6..429706f 100644
--- a/src/assets/css/src/2.blocks.design-to-light.css
+++ b/src/assets/css/src/2.blocks.design-to-light.css
@@ -37,19 +37,44 @@
left: .5rem;
top: .5rem;
}
-#dtl-btn[data-grade]::after {
+#dtl-btn[data-grade]::after,
+#dtl-btn .new {
position: absolute;
right: .25rem;
top: .25rem;
width: 2rem;
height: 2rem;
+ user-select: none;
+ border-radius: var(--rounded-sm);
+}
+#dtl-btn[data-new][data-grade]::after {
+ display: none;
+}
+#dtl-btn .new {
+ color: var(--color-white);
+ background: var(--color-primary-50);
+ font-weight: 700;
+ font-size: var(--text-xs);
+ padding: .5rem 0;
+ z-index: 10;
+}
+#dtl-btn .new::after {
+ content: "";
+ width: .5rem;
+ height: .5rem;
+ border: 2px solid var(--color-black);
+ border-radius: 50%;
+ background: var(--color-primary);
+ display: block;
+ position: absolute;
+ top: -.333rem;
+ right: -.333rem;
}
/* Grades */
[data-grade]::after {
content: attr(data-grade);
color: transparent;
- user-select: none;
border-radius: var(--rounded-sm);
background-repeat: no-repeat;
background-position: center;
diff --git a/src/components/design-to-light/DTLButton.vue b/src/components/design-to-light/DTLButton.vue
index 19a4e8f..2d3dd35 100644
--- a/src/components/design-to-light/DTLButton.vue
+++ b/src/components/design-to-light/DTLButton.vue
@@ -1,6 +1,7 @@
-