The University of Texas at Dallas

Callisto Template - Color update

Callisto Style Guide

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <p class="lead"></p>

Lorem ipsum dolor sit amet, consectetur adipiscing 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. 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.

Blockquote: Doggo ipsum clouds boof pats vvv shoober doggo very taste wow wow such tempt aqua doggo, stop it fren length boy bork borkf very hand that feed shibe floofs you are doin me a concern. Corgo woofer very taste wow corgo long bois, very taste wow thicc. Puggo borking doggo very hand that feed shibe long water shoob noodle horse doing me a frighten, I am bekom fat you are doing me the shock super.<blockquote></blockquote>

Heading <h1></h1>

Heading <h2></h2>

Heading with link <h2></h2>

Heading <h3></h3>

Heading with link <h3></h3>

Heading <h4></h4>

Paragraph – Paragraphs use Din 2014 as the font. Default text size is 15px with line-height at 1.5. Font color is set to ##212529 on a white background.

Bold | Italics

Bullet List <ul>

  • Default padding at 10px 0px 10px 40px
  • Default bullets are discs
  • With a link

Numbered List <ol>

  1. Default padding at 10px 0px 10px 40px
  2. List item two
  3. With a link

List of links with no bullets or bottom-border

Use <ul> with class="no-bull"

Links in body text

Links in body text are secondary orange (#c95100) with a gray border-bottom. On hover they are magnolia green (#154734).

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Buttons

Use on a button or text link, for example: <button class="btn btn-primary">

 

 

Images

Images are made responsive with .img-responsive. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.


 

200x200

To float an image to the left use the class "float-left"

For rounded corners, use the class "rounded"

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

200x200

To float an image to the left use the class "float-right"

For a circle, use the class "circle"

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Please contact a Web Developer for help with setting up a curtain effect.

Orbit: Keeping New Comets on Course

Flash Cards

Carousel

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ante Integer sagittis tellus quis felis faucibus, nec accumsan lectus consequat. Ut bibendum nisi sollicitudin leo varius pretium. Praesent eget ultrices elit. Quisque malesuada mauris ac libero tincidunt.

Forms

Please contact a Web Developer for help with setting up a form.

Radios
Checkbox

 

Modals

Tables

Regular Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with "table-dark" class

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with "thead-dark" class

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with "thead-light" class

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with "table-striped" class

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6