A variety of elements can boost user’s experience on the ECLKC website. Elements must meet certain specifications, and their data is uploaded to a Drupal field(s). Some elements have more than one purpose, depending on how they are displayed in a page layout.
The table below describes the most common elements. Other elements are restricted to a layout (see Page Layouts).
| Element | Specifications and Limitations | Purpose and Requirements |
|---|---|---|
| Title | Length: Unrestricted, but SEO best practices recommend 60 characters or fewer | It is required for all pages and determines the last segment of all URL aliases. It should not include the name of the series or resource type. |
| Summary | Length: 150 to 215 characters | Summary text is marketing for your resource and includes:
It is not displayed on the actual page but introduces the page in dynamic views and river pages. |
| Content Text | There are no set specs for content text or additional content. However, some restrictions may apply to content displayed in certain layouts. | Content text can be the main container of information in most pages. It is also known as introductory text, blurb, or text below video in others. Its purpose is to better describe the layout. Some elements, such as inline images and block quotes, must be included in the content text. |
| Fifty-fifty | Heading Length: 60-character limit Text Length: 215-character limit. No hyperlinked text. Image Size: 1,260 x 920 px | This element is only for topic pages. Fifty-fifties are spaces to promote new and relevant resources from the topic page layout. The recommendation is to update these as new resources become available. Rotating them every other month is recommended. They could also be seasonal and used to promote items related to significant events or campaigns. Titles must be concise, which may require truncating to just the key points of the title. |
| Feature Button | Button Text Length: 60-character limit | These are the “anchor” of a topic page layout. They should be used to highlight sub-topics and relevant links to the HSPPS. Feature buttons, also known as “blue boxes,” help the user find a consistent set of resources or a sub-section within a topic. |
| Explore Resource Card | Heading Length: 60-character limit Image Size: 750 x 500 px No more than 9 cards can be used on any page. | These visual cards are perfect for bringing attention to specific parts of the site and frequently used or promoted resources. Titles must be concise, which may require truncating to just the key points of the title. Explore Resource cards may link to resources that are no longer as popular as a 50-50s but are still relevant. The use of analytics may provide a great way to come up with the top 6–9 resources to promote as featured items. This could be an individually retrievable item or a collection. |
| Resource Item | Heading Length: Unlimited, although shorter headings are strongly encouraged. Text: No longer than a few sentences (150 to 450 characters). No hyperlinked text. Image Size: 400 x 268 px minimum. These images, also known as thumbnails, may be aligned left or alternate between left and right alignment. | Resource items include a short description with a thumbnail. They are unique in that there are no limitations to the number that may be used. Each resource item links to only one webpage or PDF file. It may be used for series or collections. If the page is long, it can include sections separated by sub-headings. |
| Tabbed Content | Number of tabs: Minimum 2, maximum 4 | Tabbed content is used to organize multiple attachments or handouts, including slides and PDF files. |
| Accordion | Heading Length: Unlimited, although shorter headings are strongly encouraged. | While it is preferred practice to place content on a page directly, accordions come in handy for hiding content that is nonessential or supplementary, for example, references, additional resources, or related regulations. All accordions are initially closed when the page loads. |
| Plain Dropdown | Heading Length: Unlimited, although shorter headings are strongly encouraged. | Plain dropdowns are ideal for quick access to responses, a few links, specifications, or short bits of text. Do not use them for substantial content. All dropdowns are initially closed when the page loads. |
| Descriptive Dropdown | Heading Length: Unlimited, although shorter headings are strongly encouraged. Text: No longer than a few sentences (150 to 450 characters) Image Size: 600 x 400 px | Descriptive dropdowns link to set of pages or files (two or more). The thumbnail is always on the right. The dropdown text starts with an action verb. For example: “Explore…” Limit description to the blurb. The dropdown content should include only hyperlinked bullet items. It is initially closed when the page loads. |
| Video | Heading: Title of the individual video page. Videos are displayed in a 640 x 360 proportion only. Transcript and captions | Videos can be embedded in other page layouts, but they require the creation of an individual video page. They always include a downloadable PDF transcript and captions. Videos can be downloaded or played on the page. We recommend using video elements at the top of the page. In rare circumstances, more than one video clip can be displayed on the same page. Eventually, blue dividers can be used for sub-headings separating videos. |
| Playlist | Heading: Title of the individual video or audio that is at the top of the playlist. Audio playlists have a different look than video playlists. | Playlists can be embedded in other page layouts and require the creation of an individual playlist page. They include videos or audios that are only part of that playlist. The individual videos can be accessed by selecting the titles. Through the playlist, they display other features, for example, their HTML transcript and the video blurbs and attachments. A playlist should be embedded at the top of the page. Only in rare circumstances is more than one playlist allowed. In such cases, blue dividers can be used for sub-headings separating playlists. |
| FAQ | FAQ Section Heading: Optional; it appears above the FAQ items. Each FAQ must include:
| Used for questions and answers. All questions are permanently displayed on the page, while all answers are initially closed when the page loads. |
| Infographic | Infographic Image: 800 px minimum width for page, but as large as possible for the full-size version. Text version: Required | Infographics are visualizations of complex topics. |
| Hero Image | Heading: Topic or book name Image Size: 2,800 x 600 px | Large image displayed on top of most ECLKC pages. Books and Topic page are the only layouts with customized hero images. Most layouts display the hero image corresponding to their topic or the book to which they belong. |
| Inline Image | Image Width: 600 to 1000 px. Images are always positioned to the right. Required description: Alt Text | Inline images are included in content text fields. |
| Block Quote | Only use this when there is an important message to be highlighted. | Highlighted content only included in content text fields. |
| Homepage Card | Heading: 52- to 60-character limit Blurb: 175-character limit Image Size: 700 x 350 px | Used only when approved by the OHS for important promotion or updates. |
| Flag Card | Heading: 52- to 60-character limit Image Size: 240 x 180 px | Used by National Centers for promoting new or important resources on the homepage. |
| Outline | Used only in books. It is a dynamic classification of pages in chapters and subchapters. A page can be tied to only one outline and in only one position. | |
| Go to Link | Heading: “Go to” is a default, followed by the title of the series. | It refers the user to the series to which the page belongs. Go to links are used when the page is part of a series. It includes nonstand-alone video clips or publications that are part of a learning module. Only one Go to link is allowed per page. |
| Taxonomy Fields | Topic, Tag, Age Group, Audience, Program Option, Program Type, Series, National Center. See Dynamic Views and Taxonomy Fields. | Resource tagging system allows users to explore a collection of information by applying multiple filters, also known as faceted search. All taxonomy fields are single option, with exception of Tags, which allows 3 maximum. Some taxonomy fields are displayed in most page layouts. |
Last Updated: May 31, 2024