PDS proposals
← All proposals

Identity Block

Start from the PDS v2 Identity Block and use the Agent Avatar in place of the human Avatar, as Avatar Label does.

Extends a PDS componentOpen in Storybook

proposals/IdentityBlock/identity-block.css43 lines · View on GitHub
.pds-identity-block {
	align-items: center;
	display: flex;
	gap: var(--pds-spacing-s);
	min-width: 0;
	overflow: hidden;
}

.pds-identity-block__avatar {
	flex-shrink: 0;
}

.pds-identity-block__text {
	display: flex;
	flex-direction: column;
	gap: var(--pds-spacing-5xs);
	min-width: 0;
	opacity: 1;
	transition: opacity 100ms ease-in-out;
	will-change: opacity;
}

.pds-identity-block__primary-text {
	color: var(--pds-color-foreground-default);
	font-family: var(--pds-typography-ff-default);
	font-size: var(--pds-typography-size-s);
	font-weight: var(--pds-typography-fw-semibold);
	line-height: var(--pds-typography-lh-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pds-identity-block__secondary-text {
	color: var(--pds-color-foreground-default-secondary);
	font-family: var(--pds-typography-ff-default);
	font-size: var(--pds-typography-size-xs);
	line-height: var(--pds-typography-lh-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}