Links
Content Links
Whenever possible, links directing to another site should have a title attribute.
Call to Action Links
When a little more attention needs to be drawn to a link, such as where it appears alone outside of other content elements.
Small Components
Sajabé Design System Components which might fit into the "molecules" category of atomic design.
Dividers
Solid Divider Dotted Divider
Tags
Tags denote categories where multiple categories might be listed. Tags are unlimited.
Tag Category 1 Tag Category 2 Tag Category 3 Tag Category 4 Tag Category 5Labels
Labels give extra information about the content, such as status (work in progress, inactive, new, etc.)
New Work
Under Active Development
No Longer Supported
Badges
Dot Badges
Dot badges denote a number or qualifier such as number of comments, order of operations, grades for quality or level, or a type of interaction. They may exist within or as buttons.
9
A
Text Badges
Text badges denote a single primary category or general subject matter. Only one text badge may be used per element being labeled.
Text Badge
Icons
Icons are primarily sourced from FontAwesome. They are used to clarify or label a single line of content where a label element is not appropriate.
Contact
Email
Phone Number
Location
Socials
Instagram
Youtube
LinkedIn
Github
Codepen
Twitter
Dribbble
Code
HTML
CSS
Javascript
PHP
Media
Audio
Video
Fun
Magic
Uno Magic
Star
Text Components
Titles
The flag style main title as seen above will most often be an H2 (heading level 2). It is meant to help the eye navigate the main topics of the page. It features a left gradient flag which is offset outside the left alignment of the content.
Each title has a top margin which is absent from the first title of the page so that it will align with the sidebar.
Title with Flag
Pullquote
A pullquote is a small piece of text which is pulled directly from the main content in which it floats. A pullquote should not contain content from any other source. It may be a direct quotation of a person who is quoted in the content, in which case it should have quotation marks.
A key idea which creates an entry point into the content.
A pullquote can be a quotation of a person, in which case it may have quotation marks.
Block Quote
A block quote is an excerpt from an outside source. It should always be a direct quote of the source material, using ellipsis (...) wherever content has been omitted. Blockquotes may contain a cite referencing their source.
A direct quotation of content which comes from a source outside the current content. The source of this content should be introduced in the text which preceeds it.
Figure
A figure is a visual which illustrates or clarifies the content. Figures should always be accompanied by text which describes what the figure is meant to represent. Figure images can be rectangular or circular.
Dropcap
This is lead copy with a dropcap applied. Astonishment galaxies Flatland vanquish the impossible Drake Equation tesseract.
This is normal copy with a dropcap applied. Astonishment galaxies Flatland vanquish the impossible Drake Equation tesseract. Intelligent beings two ghostly white figures in coveralls and helmets are softly dancing permanence of the stars concept of the number one cosmic ocean muse about.
Byline
Category Tags
Category NameCategory Name
Aside
Callout
A callout draws attention to a detail or a link.
Author Info
