Typography for Intel.gov uses Oswald and Maitree Google Fonts.
Oswald, 5.5em, 500, #333, Uppercase
Oswald, 2.15em, 500, #a68449
Maitree, 1.43em, 700, #333
Oswald, 1.2em, 500, #333
Body Copy
Maitree, 1.15em, 400, #333
Utility Class | Description | Demo |
---|---|---|
.font_text | Applies body font styles |
Body text |
.font_title | Applies title font styles |
Title font |
.font-title-extra-light | Extra light title font |
Title font: 200 weight |
.font-title-light | Light title font |
Title font: 300 weight |
.font-title-medium | Medium title font |
Title font: 500 weight |
.font-title-semi-bold | Semi-bold title font |
Title font: 600 weight |
.font-title-bold | Bold title font |
Title font: 700 weight |
.uc | Uppercase font |
Uppercase text |
.lc | Lowercase font |
Lowercase text |
.text-shadow | Adds a shadow to body copy |
Copy with shadow |
.heading-text-shadow | Adds a shadow to headings |
Heading with shadow |
.deemphasized | Adds deemphasized styles to copy |
Deemphasized text |
.center | Center aligns text |
Centered text |
.left | Left aligns text |
Left-aligned text |
.hashtag | Applies hashtag (#text) styling to text |
#Hashtag styled text |
#000
#595e61
#e4edf2
#637f8b
#4e6e79
#b88426
#c09e64
#fff
#424b50
#d1e5f2
#2d425d
#a68449
#ad8642
#b0c9da
#61818c
#b0c9da
#4e6e79
#B9862B
#d0b161
The Intel.gov website utilizes a variety of button classes. These buttons have a transparent background with a color border, which changes dependent upon the background utility class that is being used. Buttons should be contained within the ".btn-container" class, unless specified otherwise.
Icons used on the Intel.gov website are used to represent social media sites, as well as tools such as search, copy action, and the hamburger menu. Below are visual representations of the sprite icons and seals on the website:
All icons are in SVG file format, and have the following dimensions:
Icon Type | Dimensions |
---|---|
Twitter (black version) | 150px x 150px |
Search | 114px x 109px |
Hamburger Menu | 135px x 112px |
Icon Type | Dimensions |
---|---|
Twitter (gold version) | 129px x 129px |
Facebook and Copy action | 133px x 135px |
Lists are used throughout the Intel.gov website to call attention to specific points of interest. These lists are generally used on internal pages, such as Our Values.
The following is the applied style for internal pages:
The Intel.gov websites uses Bootstrap 3.37, and therefore utilizes its grid system as well. The internal pages of the intel.gov website uses the following as its primary structure:
Further documentation on how to use the Bootstrap grid system can be found on the Bootstrap website.
Throughout the website, there are sections that use Featured K2 items to display content. These sections are "highlighted" on the page, and should display no more than three items at a time as featured. The sections referenced here are listed below:
Section | Maximum # of Items |
---|---|
Intel Stories | 1 |
A Day in the Life | 3 |
Featured Barrier Breaker | 1 |
Barrier Breakers in History | 3 |
Career News | 1 |
Intel Vault | 1 |
Public's Daily Brief | 1 |
President's Daily Brief | 1 |
The items in this section should always display chronologically, including featured items. This may change for a specific timeframe, such as during African American History Month.
Throughout the website, hyperlinks to external websites will appear with a designated icon next to them. These external links are handled via a custom JavaScript script that is activated when the hyperlink's URL does not share the same domain as Intel.gov. When this occurs, the icon will be added automatically and will appear next to the hyperlink on the page. If there is a situation when an exception is needed (i.e. - a link on an image), use the following in your a tag:
a class="no-ext-link-icon" which will generate the icon:
Blockquote tags are displayed primarily on the "Day in the Life" section of the website, and are used to emphasize a quote from the employee. A working example of this can be found here. The code and applied style can be seen below:
Code | Example |
---|---|
<blockquote> |
"Quote from employee displayed here" |