diff --git a/docs/content/en/blog/DevLog-2025.08.01/CharacterShowcase.vue b/docs/content/en/blog/DevLog-2025.08.01/CharacterShowcase.vue
index ee905e9dc..ab01ec3c1 100644
--- a/docs/content/en/blog/DevLog-2025.08.01/CharacterShowcase.vue
+++ b/docs/content/en/blog/DevLog-2025.08.01/CharacterShowcase.vue
@@ -11,24 +11,26 @@ const { variant = 'default' } = defineProps<{
   <div flex="~ col items-center gap-1 justify-start items-center">
     <div
       b="~ 2"
-      :class="{
-        'b-solid b-primary/50 bg-primary/10 w-10': variant === 'active',
-        'b-dotted b-primary/20 w-10': variant === 'dotted',
-        'b-dashed b-primary/20 w-10': variant === 'default',
-        'b-transparent bg-transparent': variant === 'connector',
-      }"
-      h-10 rounded-lg text-lg
-      flex="~ items-center justify-center"
-      transition="~ all duration-150 ease-out"
+      :class="[
+        variant === 'active' ? 'b-solid b-primary/50 bg-primary/10 w-10' : '',
+        variant === 'dotted' ? 'b-dotted b-primary/20 w-10' : '',
+        variant === 'default' ? 'b-dashed b-primary/20 w-10' : '',
+        variant === 'connector' ? 'b-transparent bg-transparent' : '',
+        'transition-all duration-150 ease-out',
+        'h-10 rounded-lg text-lg',
+        'flex items-center justify-center',
+      ]"
     >
       {{ value }}
     </div>
 
     <div
       v-if="codePoint || invisibleCodePoint"
-      text-xs text="primary" font-mono
-      flex="~ col items-center justify-center"
-      :class="{ invisible: invisibleCodePoint }"
+      :class="[
+        invisibleCodePoint ? 'invisible' : '',
+        'text-xs text-primary font-mono',
+        'flex flex-col items-center justify-center',
+      ]"
     >
       <div v-for="char in value" :key="char">
         {{ char.codePointAt(0)?.toString(16).toUpperCase() }}