Responsive Sitecore Components Guide

Owned by Schwiethale, Kiri
Last updated: Jun 20, 2019 by Jason Herrman
6 min read

Terms:

TermDefinitionSitecore Icon
Component

Components are what you build content with.
It has the puzzle piece icon in the Sitecore Page Editor.
You can add new, delete, or move components on a page.

Delete

In the Page Editor, you can delete a component by clicking on the red 'X' icon.
Note: You are not actually deleting content. That content still exists in the file
tree because you can always bring it back by adding a new component.
Instead, think of it as hiding content from a page. 
UsersAnyone using the website or interacting with it.N/A


Components Breakdown:

1

Hero Image and Title

For the Home Page only.

  • On the tablet and desktop version, the title position is adjustable to allow for more flexible image choices.

To edit the title position:

  1. In the page editor, click on the Image.
  2. Click on the blue arrow to select the parent element (in this case, we want to select the Homepage Hero Image and Title component)
  3. Once the component has been selected, click on the 'More' drop-down, and select 'Edit the Component Properties'
  4. This dialog box will appear, where you can choose the vertical and horizontal positions from the drop-down menus, under 'Text Position'.
  5. Click 'OK' and be sure to save the page to see your changes. 


2

News / Events

This panel highlights news, upcoming deadlines, or announcements that are date-specific or time-sensitive.
The purpose is to quickly communicate upcoming deadlines and important information for prospective students. There is no need to list out multiple dates, since that information is listed on the linked page.
Keep in mind this is one of the first things a mobile visitor sees. 

Currently used on the Home Page only.

If a "Next Date" does not apply, leave the two text fields at the bottom blank. A single gray box should appear at the bottom (as in the example image to the right) to maintain design consistency.

3

Infographic Panel*

For number-related content, highlighting statistics significant to SPU. Infographics provide a visual means of communicating data.
A minimum of three infographics are necessary.

*UC maintains these as statistics are updated with each issue of etc.

4

Lightbox Panel*

Also known as an image gallery.

*UC maintains these.

5

From This Place Panel*

Different story features should tie in to page content (with the exception of the home page).

  • Left / Right option available. Take into account other components on the page before choosing either left or right options in order to achieve balance.
  • Color option available. Take into account the colors of other components on the page so that one color isn't heavily repeated. 

For example, use the thumbnail to the right if a component above (or below) features text on the left side.

*UC maintains these.

6

etc Features*

Updated with each new issue of etc.
Eight of these components are sprinkled throughout the UGA site, to correspond with the eight departments of the magazine.

  • Left / Right option available. Take into account other components on the page before choosing either left or right options in order to achieve balance.

  • Color option available. Take into account the colors of other components on the page so that one color isn't heavily repeated.

*UC maintains these.

7

Page Feature

Featured on Home and Secondary Landing Pages. Used to feature a sub-page or video content.

Left / Right option available. Take into account other components on the page before choosing either left or right options in order to achieve balance.

8

Quote Panel

Feature quotes from students or My Two Cents' advice with this component.

9

Intro Paragraph

Introduce the content on a page with an introductory paragraph that highlights what the page is about and useful information that stems from this page. The text is slightly larger than the body copy text because it functions as a visual lead-in to the main content.


There are two parts to an Intro Paragraph component:

Subtitle field - Catchy phrase on the main landing pages, and the Page Title on lower-level pages (such as Discover Seattle)

Intro field - The bulk of the intro paragraph.

10

Body Content

Title field - Used for content headings, marks different sections of content, and allows content to be easily scannable by the reader.

Body Copy field - where paragraphs of text live. Open the text editor to style text in a Microsoft Word-like interface.

  • Bolded text is usually used at the beginning of a bulleted list to summarize main points, which aids in scannability
  • Hyperlinks can be added to text, they will appear as bolded and red automatically. 

11

Callout with Image

Highlight related, secondary content within sections of body copy by using a Callout. These are a great way to feature content without disrupting the flow of the page (as with Page Feature panels).

Basic structure: 

Title field - Use for a heading

Body Copy field - Ideal for one paragraph of text.

Action link - Placed at the bottom to call users to action.

(ex. )

Left / Right options available for image placement. Take into account other components on the page before choosing either left or right options in order to achieve balance.



12

Standard Callout

Highlights related, secondary content within sections of body copy. These are a great way to feature content without disrupting the flow of the page (as with Page Feature panels).

Title field - Use for a heading

Body Copy field - Informational sentence or two.

13

Button Callout

A direct call to action. Intended for users to apply to SPU, apply for a scholarship, or register for an event.

Edit component properties to use a FontAwesome icon.

14

Featured Contents

Highlight stories/pages with a small image and blurb. Can be used alone or in a list.

Title field - Use for a heading & link

 Body Copy field - Brief description of featured content.

15

Table

Display detailed schedule and scholarship information in a table for an optimized, easy-to-read experience that breaks up information appropriately. Handy for long lists with more detailed information where a simple bulleted list doesn't suffice.

Basic structure:

Left column - Money amount, day, time, etc.

Title - Name of Scholarship / Event

Body paragraph - description, useful information, links

Think of this as a two-column table. If more than two columns are needed, consider adding it as another paragraph beneath the body paragraph section. Remember that it all scales down to one column on mobile devices.