Sample page template files to help with local development of new projects. These are a simplified static versions of the header and footer and will not show updated menu items. The templates are resposnive to mimic the standard DigiKey page layout.
The full template can be viewed or downloaded here. Note the standard fonts and icon font packages are not attached to this template.
Each of the following template pieces requires the global.css file to be present on the page:
<link rel="stylesheet" type="text/css" href="https://www.digikey.com/-/digit/global.css">
Header
<header class="header flymenu nav-down" id="header">
<link rel="stylesheet" type="text/css" href="https://www.digikey.com/-/media/Designer/Header/ENav2021/CSS/combined.css">
<style>
/* Header specific style overrides */
.flymenu .flymenu__cart .flymenu__section-title::before,
.cart-dropdown-title:after,
.my-account-line-2:after,
.flymenu .flymenu__sections .flymenu__section .flymenu__section-title:after,
.flymenu .search-button:after,
.flymenu .flymenu__my-account .flymenu__section-title::before,
.flymenu .flymenu__pin .flymenu__section-title:after,
.mobile_only {
display:none;
}
@media screen and (max-width:1024px) {
.mobile_only {
display: inline;
}
}
</style>
<div class="header__top">
<span class="icon-bars flymenu__trigger">
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-bars_white.png" height="28px" style="vertical-align: middle;" />
</span>
<a href="https://www.digikey.com/en" class="header__logo">
<img src="https://www.digikey.com/-/media/Images/Header/logo_dk.png" alt="DigiKey Electronics - Electronic Components Distributor">
</a>
<div class="header__search">
<div class="header__searchbar header-search-panel">
<div class="searchbox-mask"></div>
<div class="searchbox-inner">
<div class="searchbox-inner-categories">
<select class="header__searchtype-wrapper product-search-categories search-product-categories" id="header-search-type">
<option value="/en/products/result?keywords={0}" data-name="Ntt">All Products</option>
<option value="/en/content-search?t={0}" data-name="Ntt">All Content</option></select>
</div>
<div class="searchbox-inner-searchtext" ref-page-event="Initiate Search">
<input name="keywords" class="header__searchinput dkdirchanger product-search-text search-textbox" type="text" autocomplete="off" placeholder="Enter keyword or part #" style="direction: ltr;">
</div>
<div class="searchbox-inner-searchbutton" ref_page_event="Initiate Search">
<button class="search-button" type="button" value="" id="header-search-button">
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-search_white.png" height="18px" style="vertical-align: middle;" />
</button>
</div>
</div>
</div>
</div>
<div class="flymenu__pin flymenu__my-account flymenu__section">
<a class="flymenu__section-title authenticated link" id="my_digikey_logged_out" href="#">
<img class="mobile_only" src="http://www.digikey.com/-/media/designer/global/icons/icon-user_white.png" height="28px" style="vertical-align: middle;"/>
<img class="mobile_only" src="http://www.digikey.com/-/media/designer/global/icons/icon-angle-down_white.png" height="18px" style="vertical-align: middle;" />
<span class="my-account-line-1">Login or</span>
<span class="my-account-line-2">REGISTER <img src="http://www.digikey.com/-/media/designer/global/icons/icon-angle-down_white.png" height="18px" style="vertical-align: middle;" /></span>
</a>
</div>
<div class="flymenu__pin flymenu__flag">
<a href="#" id="header__open-settings">
<img src="https://www.digikey.com/-/media/Images/Global/Flags/Square/US.png" alt="Edit Settings" style="width:30px;">
</a>
</div>
<div class="flymenu__pin flymenu__cart flymenu__section" tabindex="0" data-index="1">
<a class="flymenu__section-title resource--cart" href="/ordering/shoppingcart?lang=en">
<span class="cart-dropdown-title resource-text--dropdown">
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-shopping-cart_white.png" height="22px" style="vertical-align: middle;"/>
0 item(s)
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-angle-down_white.png" height="18px" style="vertical-align: middle;" />
</span>
<img class="mobile_only" src="http://www.digikey.com/-/media/designer/global/icons/icon-shopping-cart_white.png" height="28px" style="vertical-align: middle;"/>
<img class="mobile_only" src="http://www.digikey.com/-/media/designer/global/icons/icon-angle-down_white.png" height="18px" style="vertical-align: middle;" />
<span class="toggle--cart-total">0</span>
</a>
</div>
</div>
<div class="menu-backdrop"></div>
</header>
<div class="flymenu" id="header__storage">
<div class="header__bottom">
<div class="flymenu__nav-bar" data-menu-level="0">
<div class="flymenu__container">
<ul class="flymenu__sections">
<li class="flymenu__section " tabindex="0" data-index="2">
<a class="flymenu__section-title" data-level="1" href="#">Products
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-angle-down_white.png" height="18px" style="vertical-align: middle;" /></a>
</li>
<li class="flymenu__section " tabindex="0" data-index="3">
<a class="flymenu__section-title" data-level="1" href="#">Manufacturers
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-angle-down_white.png" height="18px" style="vertical-align: middle;" /></a>
</li>
<li class="flymenu__section flymenu__multiple" tabindex="0" data-index="4">
<a class="flymenu__section-title" data-level="1">Resources
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-angle-down_white.png" height="18px" style="vertical-align: middle;" /></a>
</li>
</ul>
</div>
</div>
</div>
</div>
Body
Here are the two most commom content layouts styled through the global files.
One Column Layout
<div class="main-layout-content">
<div class="layout-onecolumn">
<div class="content-column">
One Column
</div>
</div>
</div>
Two Column Layout
<div class="main-layout-content">
<div class="layout-twocolumn">
<div class="content-column">
<div id="leftColumn">Two Column Left Side</div>
<div id="rightColumn">Two Column Right Side</div>
</div>
</div>
</div>
Layouts can be stacked to have both on the same page if needed.
Footer
<div id="footer" class="footer">
<link rel="stylesheet" type="text/css" href="https://www.digikey.com/-/media/Designer/Footer/Footer%20Redesign/MVC/CSS/footer.css">
<style>
/* Footer specific style overrides */
.icon-phone::before,
.icon-email:before,
.icon-fax:before,
.icon-sms:before,
.codoze:before {
display: none;
}
</style>
<div class="footer__subscribe">
<span class="footer-email-heading">Stay Connected!</span>
<span class="footer-email-inputs">
<input type="email" placeholder="Enter your email" class="footer-email-input">
<input type="button" value="Subscribe" class="footer-email-button">
</span>
<span class="footer-email-phrase"></span>
<span id="result"></span>
</div>
<div class="footer__wrapper">
<div class="footer__top">
<div class="footer__column footer__column--info">
<h4 class="footer__headline">INFORMATION</h4>
<a href="#">About DigiKey</a>
<a href="#">Marketplace</a>
<a href="#">Sell on Digikey.com</a>
<a href="#">Fulfilled by DigiKey</a>
<a href="#">Careers</a>
<a href="#">Site Map</a>
<a href="#">API Solutions</a>
<a href="#">Newsroom</a>
</div>
<div class="footer__column footer__column--help">
<h4 class="footer__headline">HELP</h4>
<a href="#">Help and Support</a>
<a href="#">Order Status</a>
<a href="#">Shipping Rates/Options</a>
<a href="#">Returns and Order Issues</a>
<a href="#">Tariff Information</a>
</div>
<div class="footer__column footer__column--contact">
<h4 class="footer__headline">CONTACT US</h4>
<a href="#"><span class="icon-phone">
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-phone_white.png" height="16px" style="vertical-align: middle;" />
</span>1-800-344-4539</a>
<a href="#"><span class="footer_icon-spacer"></span> 218-681-6674</a>
<a href="#"><span class="icon-email">
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-envelope_white.png" height="16px" style="vertical-align: middle;" />
</span>sales@digikey.com</a>
<span><span class="icon-fax">
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-printer_white.png" height="16px" style="vertical-align: middle;" />
</span>218-681-3380</span>
<a href="#"><span class="icon-sms">
<img src="http://www.digikey.com/-/media/designer/global/icons/icon-mobile-phone_white.png" height="16px" style="vertical-align: middle;" />
</span>800-344-4539</a>
<div class="footercobrowse">
<a title="live assist" class="codoze"><img src="http://www.digikey.com/-/media/designer/global/icons/icon-group_white.png" height="16px" style="vertical-align: middle;" />
Co-Browse</a>
<div class="hidden" id="button_stop_assistant"> </div>
</div>
<div>
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Homepage/homepage-associations.png" alt="ECIA Member">
</a>
</div>
</div>
<div class="footer__column footer__column--follow">
<h4 class="footer__headline">FOLLOW US</h4>
<div class="footer__social">
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Icons/Social/facebook_white_icon.png" alt="Facebook">
</a>
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Icons/Social/twitter_white_logo.png" alt="Twitter">
</a>
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Icons/Social/youtube_white_icon.png" alt="YouTube">
</a>
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Icons/Social/instagram_white_icon.png" alt="Instagram">
</a>
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Icons/Social/linkedin_white_icon.png" alt="LinkedIn">
</a>
</div>
<div class="footer__apps">
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Icons/appstore-button.png" alt="Download on the App Store">
</a>
<a href="#">
<img src="https://www.digikey.com/-/media/Images/Icons/google-play-button.png" alt="Get it on Google Play">
</a>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="footer__bottom--line-1">
<a href="#"><img src="https://www.digikey.com/-/media/Images/Global/Flags/Square/US.png" alt="United States">United States</a>
<span>Copyright � 1995-2022, DigiKey Electronics.</span>
<span>All Rights Reserved.</span>
<a href="#"><span>Terms & Conditions</span></a>
<a href="#"><span>Privacy Notice</span></a>
<a href="#"><span>Accessibility Statement</span></a>
</div>
<div class="footer__bottom--line-2">
<span>Local Support: 701 Brooks Avenue South, Thief River Falls, MN 56701 USA</span>
</div>
<p>CA Privacy Rights: <a href="#">Do Not Sell My Personal Information</a></p>
</div>
</div>
</div>