Identity Card Symbol

Standardized visual container for DID verification data and user identity profiles.

STABLE REACT / VUE

Digital Asset ID

DID:eth:0x82...1a2b

Display Name

Alex Rivera

Trust Score

98.50

Level

Tier 4

VERIFIED PROTOCOL

Standard Theme (Dark Mode)

Logic & Schema

// Interface Definition

interface DIDCardProps {

id: string; // DID Identifier

username: string;

score: number;

tier: 'Standard' | 'Premium' | 'Tier4';

isVerified: boolean;

theme: 'Dark' | 'Light' | 'Glass';

}

// Implementation Logic

const renderScore = (score: number) => {

return score > 90 ? '#10b981' : '#f59e0b';

}

Available Variants

Select the appropriate variant based on the business scenario requirements.

LIGHT

Standard Light

Optimized for white backgrounds and clean interfaces.

variant="light"

DARK

Deep Obsidian

High contrast for dashboard or dark-themed applications.

variant="dark"

GLASS

Frosted Glass

Modern frosted effect for complex backgrounds.

variant="glass"

Source Implementation

DIDCard.vue

DIDCardStyles.css

<h4>{{ label }}</h4>

</div>

<h2>{{ identity.displayName }}</h2>

<span>Trust Score: {{ identity.trustScore }}</span>

</div>

</template>

import { computed } from 'vue';

const props = defineProps(['identity', 'variant']);

const variantClass = computed(() => `theme-${props.variant}`);

</script>

Sync with Business Logic

Ensure your business version matches the DID Symbol system. Automated alerts will be sent to R&D when breaking changes are deployed to the core identity protocol.

Active Integration

14 Services

Compliance Rate

98.2%

Last Update

2h ago

开始设计