One Teva Design System

UI Elements

Identification

Use the Identification to position up to two logo's in the Page Header.

Default

The Identification component facilitates the addition of logos to headers, allowing users to enhance brand recognition. Through simple HTML structure and CSS styling, logos can be positioned within headers to align with design preferences and optimize visual appeal.

Spacing can be configured either directly from the logo markup or, ideally, through the theme settings for consistent design coherence.

Consider these factors when constructing Identification links:

  • Use the HTML aria-label attribute to provide the users with context of what will happen when clicked.
  • The HTML alt attribute provides a readable alternative for the provided logo's. When the logo has an alt attribute setting an aria-label on the link might not be necessary if it won't provide any necessary context.

Single logo

Teva
<!-- background color set to give visible presence to Identification -->
<Identification class="bg-blue-100">
	<Identification.Item>
		<a class="block w-48 my-6" href="#primary" aria-label="Teva logo, go to homepage">
			<img src="/logos/logo_teva.svg" alt="Teva" />
		</a>
	</Identification.Item>
</Identification>

Two logos

Ajovy
Teva
<!-- background color set to give visible presence to Identification -->
<Identification class="bg-blue-100">
	<Identification.Item>
		<a class="block w-48 my-6" href="#primary" aria-label="Ajovy logo, go to homepage">
			<img src="/logos/logo_ajovy.svg" alt="Ajovy" />
		</a>
	</Identification.Item>
	<Identification.Item x="end" y="end">
		<a class="block w-20 mb-6" href="#secondary" target="_blank" aria-label="Teva logo, go to tevapharm.com">
			<img src="/logos/logo_teva.svg" alt="Teva" />
		</a>
	</Identification.Item>
</Identification>

Height

The Identifications height is determined by the largest logo.

Primary company name
Secondary company name
<!-- background color set to give visible presence to Identification -->
<Identification class="bg-blue-100">
	<Identification.Item>
		<a href="#primary" aria-label="Primary company logo, go to homepage">
			<img src="https://placehold.co/300x80/gray/white" alt="Primary company name" />
		</a>
	</Identification.Item>
	<Identification.Item x="end">
		<a href="#secondary" target="_blank">
			<img src="https://placehold.co/80x30/gray/white/png" alt="Secondary company name" />
		</a>
	</Identification.Item>
</Identification>
Primary company name
Secondary company name
<!-- background color set to give visible presence to Identification -->
<Identification class="bg-blue-100">
	<Identification.Item>
		<a href="#primary" aria-label="Primary company logo, go to homepage">
			<img src="https://placehold.co/80x30/gray/white" alt="Primary company name" />
		</a>
	</Identification.Item>
	<Identification.Item x="end">
		<a href="#secondary" target="_blank">
			<img src="https://placehold.co/300x80/gray/white/png" alt="Secondary company name" />
		</a>
	</Identification.Item>
</Identification>

Spacing

Spacing can be set from logo or on <Identification>

Primary company name
Secondary company name
<!-- background color set to give visible presence to Identification -->
<Identification class="bg-blue-100 pt-6">
	<Identification.Item>
		<a href="#primary" aria-label="Primary company logo, go to homepage" class="block mb-6">
			<img src="https://placehold.co/300x80/gray/white" alt="Primary company name" />
		</a>
	</Identification.Item>
	<Identification.Item x="end">
		<a href="#secondary" target="_blank">
			<img src="https://placehold.co/80x30/gray/white/png" alt="Secondary company name" />
		</a>
	</Identification.Item>
</Identification>

Positioning

Secondary logos can be positioned by using the x and y props of <Identification.Item>

Primary company name
Secondary company name
Secondary company name
Secondary company name
<!-- background color set to give visible presence to Identification -->
<Identification class="bg-blue-100">
	<Identification.Item>
		<a href="#primary" aria-label="Primary company logo, go to homepage">
			<img src="https://placehold.co/300x80/gray/white" alt="Primary company name" />
		</a>
	</Identification.Item>
	<Identification.Item x="end" y="start">
		<a href="#secondary" target="_blank">
			<img src="https://placehold.co/80x30/orange/white/png" alt="Secondary company name" />
		</a>
	</Identification.Item>
	<Identification.Item x="center" y="center">
		<a href="#secondary" target="_blank">
			<img src="https://placehold.co/80x30/green/white/png" alt="Secondary company name" />
		</a>
	</Identification.Item>
	<Identification.Item x="end" y="end">
		<a href="#secondary" target="_blank">
			<img src="https://placehold.co/80x30/gray/white/png" alt="Secondary company name" />
		</a>
	</Identification.Item>
</Identification>