Style Guide
<link rel="stylesheet" type="text/css" href="http://www.fau.edu/student/css/layeredlayout.css" />
Typography
Standard Header Tags
H1: 36px
H2: 30px
H3: 24px
H4: 20px
H5: 18px
H6: 16px
Paragraph
Page Header Example
Earth
North America
United States
Florida
Palm Beach County
Boca Raton
777 Glades Rd.
FAU Red
H1:color-red
H2:color-red
H3:color-red
H4:color-red
H5:color-red
H6:color-red
Paragraph
FAU Blue
H1:color-blue
H2:color-blue
H3:color-blue
H4:color-blue
H5:color-blue
H6:color-blue
Paragraph
FAU Silver
H1:color-silver
H2:color-silver
H3:color-silver
H4:color-silver
H5:color-silver
H6:color-silver
Paragraph
FAU Grey
H1:color-grey
H2:color-grey
H3:color-grey
H4:color-grey
H5:color-grey
H6:color-grey
Paragraph
HR
HR Color Class
hr: standard
hr: hr-blue
hr: hr-red
hr: hr-silver
hr: hr-grey
HR Size Class
hr: standard
hr: hr-lg
hr: hr-md
hr: hr-sm
hr: hr-xs
HR Style Class
hr: standard
hr: hr-dotted
hr: hr-dashed
hr: hr-solid
HR Width Class
hr: standard
hr: hr-thin
hr: hr-medium
hr: hr-thick
Buttons
Button FAU Color Class
Button Standard Color Class
SA Staff Photos Layout
In this section you will find the materials needed to impliment the SA Staff photos outline acrross the Division of Student Affairs & Enrollment Management. The code has been tested on the new websites and will help to ensure no name "cut offs" occcur.
Four Per Row
<div class="row"> <div class="col-sm-6 col-md-3"> <div class="row"> <div class="col-xs-5"><img class="staff img-responsive" src="/student/images/staff/tba.jpg" alt="tba" /></div> <div class="col-xs-7"><h4>Name</h4><p>Title<br /><a href="mailto:email@fau.edu">email@fau.edu</a></p></div> </div> </div> </div>
Three Per Row
<div class="row"> <div class="col-sm-6 col-md-4"> <div class="row"> <div class="col-xs-5"><img class="staff img-responsive" src="/student/images/staff/tba.jpg" alt="tba" /></div> <div class="col-xs-7"><h4>Name</h4><p>Title<br /><a href="mailto:email@fau.edu">email@fau.edu</a></p></div> </div> </div> </div>
Two Per Row
Name
Title
email@fau.edu
Name
Title
email@fau.edu
<div class="row"> <div class="col-sm-6"> <div class="row"> <div class="col-xs-5"><img class="staff img-responsive" src="/student/images/staff/tba.jpg" alt="tba" /></div> <div class="col-xs-7"><h4>Name</h4><p>Title<br /><a href="mailto:email@fau.edu">email@fau.edu</a></p></div> </div> </div> </div>
Background Colors
All color schemes are ADA compliant
White "whitebkgd"
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="whitebkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
Dark (Charcoal/Chalk) "darkbkgd"
color overwritten for ADA compliance
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="darkbkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
Corporate FAU Blue "corpbluebkgd"
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="corpbluebkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
Corporate FAU Red "corpredbkgd"
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="corpredbkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
Standard FAU Blue "bluebkgd"
color overwritten for ADA compliance
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="bluebkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
Standard FAU Red "redbkgd"
color overwritten for ADA compliance
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="redbkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
True FAU Blue "faubluebkgd"
color overwritten for ADA compliance
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="faubluebkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
True FAU Red "fauredbkgd"
color overwritten for ADA compliance
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="fauredbkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
True FAU Grey "faugreydbkgd"
color overwritten for ADA compliance
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="faugreydbkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->
True FAU Silver "fausilverdbkgd"
color overwritten for ADA compliance
Eveniet laboriosam rutrum dicta rerum nisi dignissim felis aliquip interdum ultrices turpis nesciunt placerat aut hymenaeos, cumque non luctus nibh litora mus debitis labore nostra adipisicing, inceptos tempus cras. Inceptos nisl excepteur curae tempor? Reiciendis diam facilisi pede, vestibulum eveniet arcu ad, magnam hendrerit blandit ipsam nesciunt neque, asperiores dignissim magnam, porta blanditiis! Mattis, illo facere eaque voluptatum viverra pellentesque? Cursus officiis elit sequi anim, officia? Anim wisi hic qui integer eiusmod? Hic, dolor aliqua ullamco provident quae aliquid excepteur cumque! Dignissim? Metus posuere sunt, turpis consequat? Tempor, accusantium corporis? Velit diam pellentesque curae, quidem cursus dignissimos consectetuer, excepteur! Aenean.
Eaque occaecat litora cursus nobis commodo excepturi? Suspendisse non conubia, labore nam odio curabitur porttitor quisque ea bibendum, recusandae fugiat. Mus, penatibus lobortis fuga reprehenderit sequi ante harum, ut doloremque vestibulum non. Fugit, maxime hic magnam, necessitatibus quisque, numquam sem volutpat mi pretium alias, fermentum auctor eget tincidunt erat curabitur eos mus? Habitant pellentesque? Reprehenderit incidunt aptent magna! Unde purus, itaque fermentum dapibus lorem maecenas ridiculus elit vel, donec blandit? Nesciunt nibh deserunt iste aliquip atque porta varius nisl temporibus, faucibus tempus, ab purus, repellendus! Diamlorem explicabo phasellus commodo! Occaecati. Alias rhoncus omnis nullam porro pharetra, torquent blanditiis aliqua eius.
<div class="fausilverdbkgd"> <div class="textbody"> Content </div><!--/textbody--> </div><!--/bkdg-->