Pattern Library

Below is a basic collection of user interface design patterns used throughout the ZSR Library website. More coming soon.

Forms

Form Fieldset Heading

Headings

Note: <h1> is reserved for page titles and should not be used in page content, and while <h5> and <h6> exist, their use is rare.

Page Heading

Content Heading

Section Heading

Division Heading

Component Heading
Supplement Heading

Images

Embedded images are sized according to their height and width attributes. For images that exceed the column width, they will resized to fit in the column.

5659657838_6214e38f78_1500x1068

Atrium Decorations, Spring 2011. Our semi-annual atrium decorations have arrived!

Lists

Definition List

Use a definition list when organizing terms and definitions or similar constructs.

Term
Definition
Object
Description

Unordered List

Use an unordered list for regular bulleted lists of items.

  • List item
  • List item
  • List item

Ordered List

Use an ordered list for items where order is important, for example numerical or alphabetical items.

  1. List item
    1. Nested list item
    2. Nested list item
  2. List item
  3. List item

Paragraphs

Below is a default paragraph:

Nam sit amet dui convallis, venenatis ex egestas, vestibulum nunc. Praesent diam velit, pharetra et augue ac, imperdiet pharetra leo. Donec vitae tincidunt justo, at imperdiet magna. Ut nec ipsum vel elit maximus porttitor ut sit amet urna. Nam magna nisi, lacinia vel ex eu, varius condimentum orci. Nulla tristique ipsum nibh. Nam ante tellus, fermentum et dictum rutrum, finibus a velit. Pellentesque eu lacus auctor, venenatis leo in, luctus orci.

Below is a blockquote:

Quisque lacinia, arcu vel tincidunt porttitor, sem lacus tempus sem, interdum lacinia leo turpis nec massa. Nam facilisis, odio sit amet auctor posuere, risus nisi suscipit magna, sed congue felis velit ac lacus. Integer mattis tempor pretium. Sed tempus libero id est vestibulum, laoreet maximus neque luctus. Donec a ante finibus, tempus nunc sed, congue arcu. Donec tempus risus felis, consectetur fringilla turpis egestas molestie. Nullam sed accumsan neque. Cras metus nisi, volutpat ac tincidunt a, varius et enim. In viverra libero a purus dapibus, vitae rhoncus nibh gravida. Vestibulum interdum quam vulputate diam facilisis vestibulum. Cras auctor velit id massa luctus faucibus. Maecenas vehicula dictum volutpat. Etiam sed ex a turpis semper posuere.