Department of Classical Studies

Sample Page with Example HTML Styles

This page has examples of different, commonly needed styles you can use. Edit this page and click the <> Source button to see the underlying HTML. Use the SLA drupal training document with additional styles in tandom with this page.

Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim.

place holder image
Image left style

Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

Zebra Table

<# Column 1 #> <# Column 2 #> <# Column 3 #>
<# R1C1 #> <# R1C2 #> <# R1C3 #>
<# R2C1 #> <# R2C2 #> <# R2C3 #>
<# R3C1 #> <# R3C2 #> <# R3C3 #>

Buttons can be made from any text link by adding the button style to an a tag e.g.<a class=“button” href=“http://tulane.edu/”>Text Link</a>, displays as Text Link

Accordion

Always Visible Title that toggles child content 1

enter any content in here.

Always Visible Title that toggles child content 2

more content in here.

Lists

  1. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.
  4. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
  • Donec rutrum congue leo eget malesuada.
  • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
  • Quisque velit nisi, pretium ut lacinia in, elementum id enim.
  • Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat.

  1. Vivamus suscipit tortor eget

    1. Vivamus suscipit tortor eget
    2. felis porttitor volutpat.
    3. Vivamus magna justo, lacinia
      1. Vivamus suscipit tortor eget
      2. felis porttitor volutpat.
      3. Vivamus magna justo, lacinia

      4. eget consectetur sed

        1. Vivamus suscipit tortor eget
        2. felis porttitor volutpat.
        3. Vivamus magna justo, lacinia
        4. eget consectetur sed,
        5. convallis at tellus.
        6. Nulla quis lorem ut libero
        7. malesuada feugiat.
        8. Vestibulum ac diam sit amet quam
        9. vehicula elementum sed sit amet dui.
        10. Quisque velit nisi, pretium
        11. ut lacinia in, elementum id enim.
      5. convallis at tellus.
      6. Nulla quis lorem ut libero
      7. malesuada feugiat.
      8. Vestibulum ac diam sit amet quam
      9. vehicula elementum sed sit amet dui.
      10. Quisque velit nisi, pretium
      11. ut lacinia in, elementum id enim.
    4. eget consectetur sed,
    5. convallis at tellus.
    6. Nulla quis lorem ut libero
    7. malesuada feugiat.
    8. Vestibulum ac diam sit amet quam
    9. vehicula elementum sed sit amet dui.
    10. Quisque velit nisi, pretium
    11. ut lacinia in, elementum id enim.
  2. felis porttitor volutpat.
  3. Vivamus magna justo, lacinia
  4. eget consectetur sed,
  5. convallis at tellus.
  6. Nulla quis lorem ut libero
  7. malesuada feugiat.
  8. Vestibulum ac diam sit amet quam
  9. vehicula elementum sed sit amet dui.
  10. Quisque velit nisi, pretium
  11. ut lacinia in, elementum id enim.
  1. Vivamus suscipit tortor eget
  2. felis porttitor volutpat.
  3. Vivamus magna justo, lacinia
  4. eget consectetur sed,
  5. convallis at tellus.
  6. Nulla quis lorem ut libero
  7. malesuada feugiat.
  8. Vestibulum ac diam sit amet quam
  9. vehicula elementum sed sit amet dui.
  10. Quisque velit nisi, pretium
  11. ut lacinia in, elementum id enim.
  1. Vivamus suscipit tortor eget
  2. felis porttitor volutpat.
  3. Vivamus magna justo, lacinia
  4. eget consectetur sed,
  5. convallis at tellus.
  6. Nulla quis lorem ut libero
  7. malesuada feugiat.
  8. Vestibulum ac diam sit amet quam
  9. vehicula elementum sed sit amet dui.
  10. Quisque velit nisi, pretium
  11. ut lacinia in, elementum id enim.
  • Vivamus suscipit tortor eget
  • felis porttitor volutpat.
  • Vivamus magna justo, lacinia
  • eget consectetur sed,
  • convallis at tellus.
  • Nulla quis lorem ut libero
  • malesuada feugiat.
  • Vestibulum ac diam sit amet quam
  • vehicula elementum sed sit amet dui.
  • Quisque velit nisi, pretium
  • ut lacinia in, elementum id enim.
  • Vivamus suscipit tortor eget
  • felis porttitor volutpat.
  • Vivamus magna justo, lacinia
  • eget consectetur sed,
  • convallis at tellus.
  • Nulla quis lorem ut libero
  • malesuada feugiat.
  • Vestibulum ac diam sit amet quam
  • vehicula elementum sed sit amet dui.
  • Quisque velit nisi, pretium
  • ut lacinia in, elementum id enim.
  • Vivamus suscipit tortor eget
  • felis porttitor volutpat.
  • Vivamus magna justo, lacinia
  • eget consectetur sed,
  • convallis at tellus.
  • Nulla quis lorem ut libero
  • malesuada feugiat.
  • Vestibulum ac diam sit amet quam
  • vehicula elementum sed sit amet dui.
  • Quisque velit nisi, pretium
  • ut lacinia in, elementum id enim.
  • Vivamus suscipit tortor eget
  • felis porttitor volutpat.
  • Vivamus magna justo, lacinia
  • eget consectetur sed,
  • convallis at tellus.
  • Nulla quis lorem ut libero
  • malesuada feugiat.
  • Vestibulum ac diam sit amet quam
  • vehicula elementum sed sit amet dui.
  • Quisque velit nisi, pretium
  • ut lacinia in, elementum id enim.