One Teva Design System

UI Elements

Social Media Bar

Social Media Bar is a simple component that displays links to your social media profiles.

Default

Consider these factors when constructing the social media bar:

  • Use the HTML aria-label attribute to provide an accessible label for all elements.

Consider these factors when constructing the social media bar:

  • Set rel="noopener noreferrer" for external links to improve security.
  • Use target="_blank" for external links, especially social media, to keep users on your site.
<!-- source -->
<vision-social-media-bar aria-label="Follow us on social media:">
	<vision-social-media-bar-item
		aria-label="Visit our Facebook page"
		href="https://facebook.com/yourprofile"
		target="_blank"
		rel="noopener noreferrer"
	>
		<svg role="img" width="1em" height="1em" aria-label="facebook-color" viewBox="0 0 34 34">
			<g fill="none" fill-rule="evenodd">
				<path
					fill="#1877F2"
					d="M32 17c0-8.284-6.716-15-15-15S2 8.716 2 17c0 7.487 5.485 13.692 12.656 14.818V21.336h-3.808V17h3.808v-3.305c0-3.76 2.24-5.836 5.666-5.836 1.641 0 3.358.293 3.358.293v3.692h-1.892c-1.863 0-2.444 1.156-2.444 2.342V17h4.16l-.665 4.336h-3.495v10.482C26.514 30.692 32 24.487 32 17"
				></path>
				<path
					fill="#FFF"
					d="M22.839 21.336 23.504 17h-4.16v-2.814c0-1.186.58-2.342 2.444-2.342h1.892V8.152s-1.717-.293-3.358-.293c-3.426 0-5.666 2.077-5.666 5.836V17h-3.808v4.336h3.808v10.482a15.1 15.1 0 0 0 4.688 0V21.336z"
				></path>
			</g>
		</svg>
	</vision-social-media-bar-item>
	<vision-social-media-bar-item
		aria-label="Visit our YouTube page"
		href="https://youtube.com/yourprofile"
		target="_blank"
		rel="noopener noreferrer"
	>
		<svg role="img" width="1em" height="1em" aria-label="youtube-color" viewBox="0 0 34 34">
			<g fill="none" fill-rule="evenodd">
				<path
					fill="red"
					d="M33.29 8.74a4.27 4.27 0 0 0-3.006-3.025C27.632 5 17 5 17 5S6.368 5 3.716 5.715A4.27 4.27 0 0 0 .71 8.741C0 11.409 0 16.977 0 16.977s0 5.568.71 8.237a4.27 4.27 0 0 0 3.006 3.026c2.652.715 13.284.715 13.284.715s10.632 0 13.284-.715a4.27 4.27 0 0 0 3.005-3.026C34 22.545 34 16.977 34 16.977s0-5.568-.71-8.236"
				></path>
				<path fill="#FFF" d="m13.523 22.033 8.886-5.056-8.886-5.055z"></path>
			</g>
		</svg>
	</vision-social-media-bar-item>
	<vision-social-media-bar-item
		aria-label="Visit our Instagram page"
		href="https://instagram.com/yourprofile"
		target="_blank"
		rel="noopener noreferrer"
	>
		<svg role="img" width="1em" height="1em" aria-label="instagram-color" viewBox="0 0 34 34">
			<defs>
				<linearGradient
					id="one-teva-icons-share-195281b7ea5283ffebd"
					x1="7.19%"
					x2="92.179%"
					y1="90.73%"
					y2="8.125%"
				>
					<stop offset="0%" stop-color="#FECB1E"></stop>
					<stop offset="30.18%" stop-color="#F9550D"></stop>
					<stop offset="69.159%" stop-color="#DD0048"></stop>
					<stop offset="100%" stop-color="#BF00A7"></stop>
				</linearGradient>
			</defs>
			<path
				fill="url(#one-teva-icons-share-195281b7ea5283ffebd)"
				fill-rule="evenodd"
				d="M15.788 0c1.825.003 2.688.013 3.45.037l.237.008c.315.011.628.025 1.003.042 1.544.07 2.598.316 3.52.674.954.37 1.762.867 2.568 1.673a7.1 7.1 0 0 1 1.673 2.568c.358.922.603 1.976.674 3.52.017.375.03.688.042 1.003l.008.238c.024.76.034 1.624.036 3.449v.609L29 14.5v1.289a116 116 0 0 1-.037 3.448l-.008.238c-.011.315-.025.628-.042 1.003-.07 1.544-.316 2.598-.674 3.52a7.1 7.1 0 0 1-1.673 2.568 7.1 7.1 0 0 1-2.568 1.673c-.922.358-1.976.603-3.52.674-.375.017-.688.03-1.003.042l-.238.008c-.76.024-1.624.034-3.449.036l-.94.001h-1.637a116 116 0 0 1-3.448-.037l-.238-.008c-.315-.011-.628-.025-1.003-.042-1.544-.07-2.598-.316-3.52-.674a7.1 7.1 0 0 1-2.568-1.673A7.1 7.1 0 0 1 .76 23.998c-.358-.922-.603-1.976-.674-3.52a102 102 0 0 1-.042-1.003l-.008-.238c-.024-.76-.034-1.624-.036-3.449v-2.576c.002-1.825.012-2.688.036-3.45l.008-.237c.011-.315.025-.628.042-1.003.07-1.544.316-2.598.674-3.52a7.1 7.1 0 0 1 1.673-2.568A7.1 7.1 0 0 1 5.002.76C5.924.403 6.978.158 8.522.087 8.897.07 9.21.057 9.525.045l.238-.008c.76-.024 1.624-.034 3.449-.036Zm-.62 2.613H12.96c-2.495.005-3.022.025-4.32.084-1.413.065-2.18.3-2.692.5A4.5 4.5 0 0 0 4.281 4.28c-.507.507-.822.99-1.085 1.667-.198.511-.434 1.279-.499 2.693-.059 1.297-.079 1.824-.083 4.319v.565l-.001.308v2.207c.005 2.495.025 3.022.084 4.32.065 1.413.3 2.18.5 2.692.262.677.577 1.16 1.084 1.667s.99.822 1.667 1.085c.511.198 1.28.434 2.693.499.324.015.6.027.871.037l.232.008c.736.025 1.523.035 3.216.038l.565.001h2.516c1.693-.004 2.48-.014 3.215-.039l.232-.008c.27-.01.547-.022.871-.037 1.414-.065 2.182-.3 2.693-.5a4.5 4.5 0 0 0 1.667-1.084c.507-.507.822-.99 1.085-1.667.198-.511.434-1.279.499-2.693.06-1.297.079-1.824.083-4.319l.001-.565V12.96c-.005-2.495-.025-3.022-.084-4.32-.065-1.413-.3-2.18-.5-2.692a4.5 4.5 0 0 0-1.084-1.667 4.5 4.5 0 0 0-1.667-1.085c-.511-.198-1.279-.434-2.693-.499-1.297-.059-1.824-.079-4.319-.083l-.565-.001zM14.5 7.054a7.446 7.446 0 1 1 0 14.892 7.446 7.446 0 0 1 0-14.892m0 2.613a4.833 4.833 0 1 0 0 9.666 4.833 4.833 0 0 0 0-9.666m7.74-4.647a1.74 1.74 0 1 1 0 3.48 1.74 1.74 0 0 1 0-3.48"
				transform="translate(2.5 2.5)"
			></path>
		</svg>
	</vision-social-media-bar-item>
	<vision-social-media-bar-item
		aria-label="Visit our LinkedIn page"
		href="https://linkedin.com/yourprofile"
		target="_blank"
		rel="noopener noreferrer"
	>
		<svg role="img" width="1em" height="1em" aria-label="linkedin-color" viewBox="0 0 34 34">
			<g fill="none" fill-rule="evenodd">
				<path
					fill="#0A66C2"
					d="M31 5.059V28.94A2.06 2.06 0 0 1 28.941 31H5.06A2.06 2.06 0 0 1 3 28.941V5.06C3 3.922 3.922 3 5.059 3H28.94C30.078 3 31 3.922 31 5.059"
				></path>
				<path
					fill="#FFF"
					d="M26.882 18.878c0-3.962-2.52-5.502-5.023-5.502a4.7 4.7 0 0 0-4.167 2.125h-.116v-1.795h-3.87v13.176h4.118v-7.008a2.734 2.734 0 0 1 2.47-2.948h.157c1.309 0 2.28.823 2.28 2.899v7.057h4.118zM11.606 9.176A2.37 2.37 0 0 0 9.25 6.788h-.075a2.389 2.389 0 0 0 0 4.777 2.37 2.37 0 0 0 2.43-2.313v-.076M7.118 26.882h4.117V13.706H7.118z"
				></path>
			</g>
		</svg>
	</vision-social-media-bar-item>
</vision-social-media-bar>