Components refer to a variety of objects which are used as the building blocks for the content of a website. They may serve to frame a piece of content, indicate a type of information, highlight a piece of content, or direct the visitor to take a particular action.
Buttons
Buttons are boxed text elements that trigger an action on click for mouse users or on keydown for keyboard users. Buttons should not be used as general link styling on a page. When thinking about how to use buttons on your page, consider:
- Buttons should not be used for general link styling
- A button is a call-to-action which indicates an action the visitor should take
- Interactive components such as slideshows, forms, and menus have buttons
- Button text should indicate the specific action the button willh trigger ("Read More" is not appropriately specific)
Georgia Tech buttons are Tech Gold (#b3a369) with black text (#333333) and a hover/focus color of Tech Light Gold (#bfb37c). Secondary buttons are dark gray (#3b3b3b) with white text and a hover/focus color of medium gray (#545454).
Blockquotes
A blockquote is a section of content which is quoted from another source.
- A blockquote is not a general quotation style
- Blockquote content should not be altered from its original source
- Blockquotes should include a citation of the content's source
- Quotation marks are optional in a blockquote since the entire element is assumed to be a direct unaltered reference
Blockquotes are indicated by a 1px left border in 20% black (rgba 0,0,0,.2).
Carl Sagan asked viewers to think about consciousness relative to the cosmos. “The cosmos is within us. We are made of star-stuff," said Sagan. "We are a way for the universe to know itself.”
We are a way for the universe to know itself. Some part of our being knows this is where we came from. We long to return. And we can, because the cosmos is also within us. We're made of star stuff.
-Carl Sagan in Cosmos: A Personal Voyage, PBS, 1980
Pull Quotes
A pull quote repeats a key phrase from the main content of a document and highlights it with distinctive framing or typographic styling. The phrase may or may not be a literal quotation; it may simply quote the article it accompanies.
Pull quotes invite the content creator to implement artistic license so long as the colors and typefaces are in alignment with the official brand guidelines. The following examples are pull quote styles which align with the brand:
Supernova remnants perpetually expand at speeds of hundreds of miles per second.
“The cosmos is within us. We are made of star-stuff."
-Carl Sagan
Asides
An aside is a piece of content which is indirectly related to the main content. It indicates information that might be of interest to the visitor but is not crucial for comprehending the main content of the document.
Asides can be indicated by a 4px wide left border in Tech Gold (#b3a369), font size of .9rem (slightly smaller than the main body copy), and a subheading.