skip to main content

What would a user type into Google to find this page? Use that term or phrase here.

This page is here to test our css against a variety of html elements in different situations.

Our typographical system is based on a modular scale. It started with Zurb foundation 3 but has branched off from there considerably over the years. Zurb based their modular scale on some stellar work by Tim Brown , the idea of a modular scale is that the size and spacing of all of the typography in the framework is derived from an initial value, another arbitrary "important" value, and a particular ratio. We chose to use the golden ratio, but there are others available.

Example content. The Texas A&M University Health Science Center (TAMHSC) is transforming health through innovative research, education and service in dentistry, medicine, nursing, pharmacy, public health and medical sciences. Founded in 1999, the health science center was established as an independent state agency of The Texas A&M University System to organize all health-related entities across the System into one comprehensive health-related institution. Founding academic units included the College of Medicine, College of Dentistry, Institute of Biosciences and Technology and the then-proposed School of Rural Public Health. Following creation of the Irma Lerma Rangel College of Pharmacy in 2006 and a College of Nursing in 2008, the institution transitioned in 2013 into an academic unit of Texas A&M University while still maintaining its state agency status.

Content panel heading

Example content. The Texas A&M University Health Science Center (TAMHSC) is transforming health through innovative research, education and service in dentistry, medicine, nursing, pharmacy, public health and medical sciences.

 

Test content panel

Test content. Following creation of the Irma Lerma Rangel College of Pharmacy in 2006 and a College of Nursing in 2008, the institution transitioned in 2013 into an academic unit of Texas A&M University while still maintaining its state agency status.

 

Panel heading

Test content. Founded in 1999, the health science center was established as an independent state agency of The Texas A&M University System to organize all health-related entities across the System into one comprehensive health-related institution. Founding academic units included the College of Medicine, College of Dentistry, Institute of Biosciences and Technology and the then-proposed School of Rural Public Health.

 

50% width panel

  • Ranked in the Top 25 “Best Grad Schools for Public Health” by U.S. News & World Report.
  • Ranked in the Top 40 “Best Grad Schools for Healthcare Management” by U.S. News & World Report.

50% width panel

  • Ranked in the Top 50 “Best Grad Schools for Pharmacy” by U.S. News & World Report.
  • Implemented state’s most diverse clinical preceptor program to provide optimum experiential learning for students.
First tab
Test second tab
Third tab
    • Comprehensive health promotion center focused on improving health in South Texas by serving nearly 5,000 community members with the Diabetes Education Program.
    • The Medication Assistance Program impacts the lives of nearly 800 patients—more than $2.3 million saved on prescriptions.
    • Provides care through more than 100,000 patient visits annually, directly impacting underserved populations in North Texas and benefiting the entire state through outreach programs.
    • Highest percent of under-represented minority students in the nation.
  • Following creation of the Irma Lerma Rangel College of Pharmacy in 2006 and a College of Nursing in 2008, the institution transitioned in 2013 into an academic unit of Texas A&M University while still maintaining its state agency status.

Accordion test

  • First panel

    Following creation of the Irma Lerma Rangel College of Pharmacy in 2006 and a College of Nursing in 2008, the institution transitioned in 2013 into an academic unit of Texas A&M University while still maintaining its state agency status.

  • A longer panel title with more information that just goes on and on

    Test content. As the most comprehensive health science center in Texas, TAMHSC is dedicated to addressing today’s health care needs through forward-thinking medical research, service and health professions education. Impacting nearly every county in the State of Texas with education, research and outreach programs, the health science center operates eight campuses located in Bryan-College Station, Corpus Christi, Dallas, Houston, Kingsville, McAllen, Round Rock and Temple. This geographically dispersed, multi-disciplinary model allows for innovative team training that supports the common goal of transforming health.

  • Another accordion panel label

    College of Medicine

    • Innovative “flipped classroom” curriculum allowing for earlier, more effective clinical training.
    • Exceeds the national benchmark with a 97% pass rate on the national medical licensing exam.

    College of Nursing

    • Graduates consistently rank among the highest in the nation on the NCLEX-RN pass rate. In, 2016 the first-time pass rate for the NCLEX-RN was 99%.
    • Named a National League of Nursing Center of Excellence in Nursing Education (2016-2020).
    • 95% of graduates find jobs within three months of graduation.
    • Holds Special Commendation status from the Texas Higher Education Coordinating Board for a pass rate of 98% in 2014.

Header Styles

Foundation 3 includes a number of different styles and treatments for typographic elements, such as subheaders or small header segments.

Basic Headers

h1 header

h2 header

h3 header

h4 header

h5 header
h6 header

Heading 1 with a link

Heading 2 with a link

Heading 3 with a link

Heading 4 with a link

Heading 5 with a link
Heading 6 with a link

Subheaders

h1.subheader header

h2.subheader header

h3.subheader header

h4.subheader header

h5.subheader header
h6.subheader header

Paragraphs

In Foundation, paragraphs fall within the modular scale. This includes their line-height, giving the page a feeling of harmony as you scroll.

It's really easy to add emphasis to copy in Foundation. We've implemented some standards like bold and italics , as well as, our own nifty styles, such as <code> , <kbd> and <small>

Blockquote content

This is a Normal paragraph of text created with lorem ipsum text. 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. This is a link in paragraph text 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."

This is a long paragraph: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Here's a few paragraphs of content of varying length out of Herman Melville's Moby Dick:

By this time their destined victim appeared from his cabin. He was a small and dark, but rather delicate looking man for a sea-captain, with large whiskers and moustache, however; and wore a red cotton velvet vest with watch-seals at his side. To this gentleman, Stubb was now politely introduced by the Guernsey-man, who at once ostentatiously put on the aspect of interpreting between them.

"What shall I say to him first?" said he.

"Why," said Stubb, eyeing the velvet vest and the watch and seals, "you may as well begin by telling him that he looks a sort of babyish to me, though I don't pretend to be a judge."

"He says, Monsieur," said the Guernsey-man, in French, turning to his captain, "that only yesterday his ship spoke a vessel, whose captain and chief-mate, with six sailors, had all died of a fever caught from a blasted whale they had brought alongside."

Upon this the captain started, and eagerly desired to know more.

"What now?" said the Guernsey-man to Stubb.

"Why, since he takes it so easy, tell him that now I have eyed him carefully, I'm quite certain that he's no more fit to command a whale-ship than a St. Jago monkey. In fact, tell him from me he's a baboon."

"He vows and declares, Monsieur, that the other whale, the dried one, is far more deadly than the blasted one; in fine, Monsieur, he conjures us, as we value our lives, to cut loose from these fish."

Instantly the captain ran forward, and in a loud voice commanded his crew to desist from hoisting the cutting-tackles, and at once cast loose the cables and chains confining the whales to the ship.


Links

This is a standard inline paragraph link.


Lists

Unordered Lists

  • List item with a much longer description or more content. Also this list item has a link.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

Ordered Lists

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3
  4. Ordered List Item 4
    1. List item with a much longer description or more content. Also this list item has a link.
    2. Ordered List Item
    3. Ordered List Item
  5. Ordered List Item 5
  6. Ordered List Item 6

Definition Lists

Definition Title A
Definition text, you can add as many of these as you need. The line-height matches paragraphs.
Definition Title B
Definition text, you can add as many of these as you need. The line-height matches paragraphs.
Definition Title C
Definition text, you can add as many of these as you need. The line-height matches paragraphs.

Blockquotes

Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.

I do not fear computers. I fear the lack of them. Isaac Asimov


Image alt text 1
Figcaption content
Image alt text 2

Figure Title

Figcaption content

Buttons

Buttons

 

 

 

 

 

 

 

 


Tables

Default Table

Table Caption
thead th thead th thead th
tbody td sample content tbody td, here's some sample content tbody td
tbody td tbody td here's some sample content here's some sample content tbody td here's some sample content
tbody td tbody td here's some sample content here's some sample content tbody td here's some sample content here's some sample content
Table Head Column One Table Head Column Two Table Head Column Three
Table Footer Column One Table Footer Column Two Table Footer Column Three
Table Row Column One Short Text Testing a table cell with a longer amount of text to see what happens, you're not using tables for site layouts are you?
Table Row Column One Table Row Column Two Table Row Column Three
Table Row Column One Table Row Column Two Table Row Column Three
Table Row Column One Table Row Column Two Table Row Column Three
Table Row Column One Table Row Column Two Table Row Column Three

Table with side headings

Table Caption
thead th thead th thead th
tbody th tbody td here's some sample content tbody td here's some sample content
tbody th tbody td
here's some sample content
and some more content
tbody td here's some sample content here's some sample content

All Text Elements

The a element example

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The em element example

The del element example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

Thesamp elementexample

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The u element example

The var element example


Print Styles

Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:

  • Clearing out backgrounds, box shadows, and text shadows
  • Appending link URLs after the anchor text
  • Bordering blockquotes and pre elements
  • Page cleanup and window minimization

On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attached .print-only on an element to only show when printing, and .hide-on-print to hide something when printing.


The example markup and content above was borrowed from http://brettjankord.com/projects/style-guide-boilerplate/ and Zurb's documentation