You are here

Web development

CourseLeaf Style Reference Page

Issues

  1. The active search has white text and as a result, you cannot read what is typed into the search. Please make the active text black.
  2. The screen reader text for the HC logo refers to us as "Haverford University" instead of college.
  3. The tabbed interface should connect the content to the tab navigation, as is the case on haverford.edu. You can see the preferred usage of tabs in action on this page.
  4. Footers on haverford.edu are pinned to the bottom of the browser window regardless of content height. Using the Faculty Tab on your demo page as an example, we see the footer move up the page due to content height.
  5. While the header and footer should be the slim versions currently in place, everything else should follow the design of the main haverford.edu site link previously provided (https://www.haverford.edu/admission), not fords.haverford.edu. If you need examples of grandchild navigation in the wild, please see https://www.haverford.edu/hcah/center/programs-and-grants/faculty-fundin...

Hopes

  1. We'd love if the Font Awesome implementation could be the most recent version (5.0.9 as of this page's creation).
  2. Is it possible for the Toggled Headings to use "angle-right" instead of left? Whenever possible, we have arrows point toward the content option.
  3. The Print Options link feels out of place in the header beneath the search. Could this be moved out of the header and into the site title element instead?
  4. For what its worth, our tabs switch to accordions on small screens. We see on the demo page you provided that additional tabs are displayed in a dropdown menu. We weren't sure if there was any wiggle room on how those behave. 
Overview

Haverford Styles

Paragraph lead text, lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

This is a normal paragraph. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

Various List Types

Basic Unordered List

  • Unordered list test
  • Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Yet another element in the list
  • Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Nested Unordered List

  • Unordered list
  • Here's a nested unordered list
    • Nested Unordered list
      • Nested Unordered list
      • Nested Unordered list
    • Nested Unordered list
  • List item

Basic Ordered List

  1. Ordered list test
  2. Another list element
  3. Yet another element in the list

Nested Ordered List

  1. Expanded Nested Ordered List
    1. A list element
    2. Another list element
      1. A third level list element
      2. Another third level list element
      3. A longer third level list elementt
      4. Another list element
    3. Another longer list element
    4. Another list element
  2. Another list item
  3. A final list item

List .no-bullet

  • Unordered list test
  • Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Yet another element in the list
  • Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Misc Paragraph Treatments

<a> anchor
<a> a + href
<em> emphasis and italics
<small> small print
<strong> strong and bold
<sup> Superscript1
<sub> Subscript1
Inline course COURSE 0000

Blockquote

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Two Column Format

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut labore et magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Unordered list test
  • Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Yet another element in the list
  • Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut labore et magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut labore et magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Permalink
Tables

Table

Our basic table implementation, provided for reference. The sorting component allows you to quickly and easily sort all rows in a table using a specific column to determine the resulting order.

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Permalink
Special Content

Kitchen Sink Content

We're including some of our "special content" for reference. Panels might work well for the "Archive Message" or "Shared Message" that appears on the Style Guide's special content tab.

Panels

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a radius callout panel.

It's a little ostentatious, but useful for important content.

Buttons

.tiny.button
.small.button
.button
.button.dark
.expand
.tiny.secondary
.small.success.radius
.round.disabled

Button Groups

Pagination

Permalink
  • Accordion Title 1

    Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs. This has been set to be expanded by default.

    Permalink
  • Accordion Title 2

    Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Permalink
  • Accordion Title 3

    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Permalink