Components
In general, using EUI components should remove the need for applying specific styles or formatting. Components have been built to provide a look and feel that is consistent throughout all sites that use the EUI. Overriding styles or applying additional styles opens up the potential for negatively impacting the look and feel of the website using EUI components.
Base Styles
Common text components have "base styles" applied. Colors, line height, font sizes, and lists have been styled to compliment one another and provide consistency throughout your website.
When adding custom heading levels to your page's content, never use the H1 element as that is reserved for the site title. Start with H2 and work your way down from there.Click here to see EUI base styles
Buttons
Buttons can be used throughout your site to trigger actions. There are several options to choose from when adding buttons, including size, color, and shape.Click here to see EUI buttons
Navigation Menu
Main site navigation should allow for easy access to important content. Through the use of dropdown menus consisting of nested lists, site creates are able to expose more pages in a meaningful way. These links, however, should be reserved for truly important content so that users are not provided with too many options, making navigation overwhelming.Click here to see an EUI navigation menu
Points of Interest
If a user's attention needs to be directed to a particular point on a large image or map, a POI component can be used. Content authors have the ability to place the POI over a given region and can add text to reveal more information about the image when a user hovers over the POI with their mouse.Click here to see an EUI point of interest
Super Bullets
Instead of a usual bullet list, a list of news items, events, or featured links can be enhanced by presenting them as "super bullets". Site creators can use super bullets with a thumbnail image or without. Super bullets should have a main headline and short description of the link to encourage a user to click on the component.Click here to see an EUI super bullet
Heros
Hero elements can be used at the top of featured pages. Hero elements support a title and subtitle. A hero elements background should be a large, high resolution image. Selecting an appropriate image is crucial to maintaining the quality and standards set by the rest of the site. Images should be at least 1500x450 pixels. Larger images are supported, and in some cases preferred. Choosing a smaller images will result in a pixelated image, which will negatively impact the quality of the site.Click here to see an EUI hero element
Feature Grid
A feature grid can be used to present a user with a collection of pages or articles that require special attention. A feature grid section supports a headline, short summary, and background image. Background images for these featured content pieces should also be high resolution. Minimum image dimensions should be at least 900x300 pixels. Larger images are also supported. Choosing a smaller image could result in a blurry or pixelated image. Also, images should be optimized for a landscape orientation, meaning they should be selected or designed to look good when formatted wider than they are tall.Click here to see an EUI feature grid
Images
Images can be displayed in a number of different ways. By default, images are shown as "block-level" elements, meaning they will appear on their own line with no surrounding text. Classes may be assigned to image and figure elements to align them left and right. When doing so, text will flow around the image, making for a nice in-line look and feel.
Captions can also be added to images. Just make sure that the caption falls within the figcaption element, as indicated in the example located in the EUI.Click here to see EUI image options