4imprint Style Guide Components : Logos

Approved Logos

4imprint
Deal of the Day
Outlet
Steal a Deal

4imprint Logo

Approved options for the main 4imprint logo.

Examples

USA

Code

					
<a href="/" class="headerLogo noLine inlineMiddle posRelative">
	<svg class="textBlue" height="53px" width="138px" role="img" aria-label="4imprint"><use xlink:href="#svgLogo-4imprint"></use></svg>
	<span class="localeName">USA</span>
</a>

Notes

The 4imprint logo has been designed to work ideally on a white background

The black or white format may be used on a colored background

The non-svg library version of the logo can be cound here: //4imprintweb.blob.core.windows.net/qtz/images/4imprint.svg

Resources

Sass File(s)	/sass/components/_4ilogo.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	ecommerce/header/logo2023

Accessibility

None at this time

Deal of the Day Logo

Approved logo for Deal of the Day.

Example

deal of

the day

Code

					
<div class="dotdLogoSm">
	<div class="displayFlex">
		<span class="textDeal textBlue textBold">deal</span>
		<span class="textOf textDarkestGray">of</span>
	</div>
	<div class="displayFlex">
		<span class="textThe textDarkestGray">the</span>
		<span class="textDay textBlue textBold">day</span>
	</div>
</div>

Notes

For use on www site. For large version, please see deal of the day site.

Resources

Sass File(s)	/sass/components/_dotdlogo.scss
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time

Outlet Logo

Approved logo for the outlet site.

Example

Code

					
<svg class="outletLogo" width="102px" height="55px" focusable="false"><title>4imprint Outlet</title><use xlink:href="#svgLogo-outlet"></use></svg>

Notes

None at this time.

Resources

Sass File(s)	None Required
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

None at this time

Steal a Deal Logo

Approved logo for Steal a Deal.

Example

Code

					
<img loading="lazy" src="//cdn.4imprint.com/qtz/icons/svg/outlet/stealadeal_2020.svg" alt="Outlet Steal a Deal" width="85" height="54" />

Code

					
<svg height="54px" width="80px" role="img" aria-label="Steal a Deal"><title>Steal a Deal</title><use xlink:href="#svgLogo-sad"></use></svg>

Notes

SVG img for main site only; SVG from SVG library for outlet only.

Resources

Sass File(s)	None Required
JS File(s)	None Required
JS Functions	None
Locale Keys	None

Accessibility

If adding the alertWarning class, you must also add the following to ensure the warning text is read immediately to the user via screen reader: