Components Demo / Styleguide

Components Demo / Styleguide

This is a hero with some text, lorem ipsum, etc

Simon Furze Concerto

Cards in Three Column Layout

Karen Stanish with students

Dolor fusce finibus odio taciti auctor justo malesuada. Ipsum lorem odor amet, consectetuer adipiscing elit. Quisque erat felis mollis sed, fringilla malesuada metus maecenas.

Psychology at Keene State

Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Ipsum odor amet, consectetuer adipiscing elit. Dolor fusce finibus odio taciti auctor justo malesuada. 

James Slipp '25

Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

Text Component with Title

Content Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium at tellus massa netus commodo erat aenean. Dictum himenaeos praesent ornare sagittis inceptos. Commodo aliquam pharetra montes dapibus sapien. Pharetra luctus volutpat parturient mattis dignissim lobortis curae turpis. Et eu curae, torquent eros egestas conubia.

Call to Action

Text Component with Title Two

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium at tellus massa netus commodo erat aenean. Dictum himenaeos praesent ornare sagittis inceptos. Commodo aliquam pharetra montes dapibus sapien. Pharetra luctus volutpat parturient mattis dignissim lobortis curae turpis. Et eu curae, torquent eros egestas conubia.

Another CTA

Text Component Box Style

Content Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium at tellus massa netus commodo erat aenean. Dictum himenaeos praesent ornare sagittis inceptos. Commodo aliquam pharetra montes dapibus sapien. Pharetra luctus volutpat parturient mattis dignissim lobortis curae turpis. Et eu curae, torquent eros egestas conubia.

Call to Action

Text Component Box Style

Lorem ipsum amet, consectetuer adipiscing elit. Pretium at tellus massa netus commodo erat aenean. Dictum himenaeos praesent ornare sagittis inceptos. Commodo aliquam pharetra montes dapibus sapien. Pharetra luctus volutpat parturient mattis dignissim lobortis curae turpis. Et eu curae, torquent eros egestas conubia.

Another CTA

Text Component with Background Image

Text component with the background image. Pretium at tellus.

Call to Action

Another Text Component with Background Image

Text component with the background image.

Call to Action

Text Component with Background Image

Text component with the background image.

Call to Action

Spotlight Block

  • James Slipp '25
    James Slipp ’25 Has a Song to Share And A Conversation That He’s Happy To Start
    "I was nervous when I had to audition as a vocal major. I was worried about not being accepted. But I found just the opposite here … professors and students who were so accommodating, who were there cheering me on and wanting to lift me up.”
    Learn More
  • Simon Furze Concerto
    Music Major Simon Furze’s Movement Earns Place In Premiere Collaborative Student Concerto
    Simon Furze ’24 is one of four Keene State students who wrote and submitted short excerpts – 60 to 90 seconds long – for full orchestra and had them workshopped and recorded by SNH last October. Simon’s work, Mountain, is one of four overall selected movements that comprise the finished concerto.
    Learn More

Text Block with Video

Find Your Brightest Future

At Keene State, you'll find a community of ideas, interests, and opportunities that spark curiosity and make learning fun. Here, what you bring to the table is just as important as what we offer. Our #1 goal is to help you design a future that lights you up.

Get More Information

Image Rollover Panel

Person reading

Image Rollover Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

More content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Geoff Edwards '18, Music

Another Image Rollover Panel 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. 

Learn more

More content on hover: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Learn more

Image Gallery

Image and Text Block

Geoff Edwards '18, Music

Geoff Edwards '18

Find Your Brightest Future

At Keene State, you'll find a community of ideas, interests, and opportunities that spark curiosity and make learning fun. Here, what you bring to the table is just as important as what we offer. Our #1 goal is to help you design a future that lights you up.

Get More Information

Accordions

Find Your Brightest Future

At Keene State, you'll find a community of ideas, interests, and opportunities that spark curiosity and make learning fun. Here, what you bring to the table is just as important as what we offer. Our #1 goal is to help you design a future that lights you up.

Get More Information

Find Your Brightest Future

At Keene State, you'll find a community of ideas, interests, and opportunities that spark curiosity and make learning fun. Here, what you bring to the table is just as important as what we offer. Our #1 goal is to help you design a future that lights you up.

Get More Information

At Keene State, you'll find a community of ideas, interests, and opportunities that spark curiosity and make learning fun. Here, what you bring to the table is just as important as what we offer. Our #1 goal is to help you design a future that lights you up.

Get More Information

Slideshow

  • Person reading
  • hockey player

    In 2023, KSC won the New England Collegiate Hockey Association Patriots Conference title as a club program.

  • Simon Furze Concerto

    Simon '24 is a Composition and Music Technology double major.

  • Geoff Edwards '18, Music

    Geoff Edwards '18

  • James Slipp '25

Text in Two Columns on Keene Medium Red Background

Text Component. Pretium at tellus massa netus commodo erat aenean. Dictum himenaeos praesent ornare sagittis inceptos. Commodo aliquam pharetra montes dapibus sapien. Pharetra luctus volutpat parturient mattis dignissim lobortis curae turpis. Et eu curae, torquent eros egestas conubia.

Call to Action

 

Text Component, consectetuer adipiscing elit. Pretium at tellus massa netus commodo erat aenean. Dictum himenaeos praesent ornare sagittis inceptos sapien. Pharetra luctus volutpat parturient mattis dignissim lobortis curae turpis. Et eu curae, torquent eros egestas conubia.

Another CTA

 

Horizontal Rule


Cards on Keene Red Background

Neuroscience Lab

Ipsum lorem odor amet, consectetuer adipiscing elit. Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

James Slipp '25

lorem ipsum odor amet, consectetuer adipiscing elit. Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

Karen Stanish with students

Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

Content Slider

James Slipp '25

Card 1 lorem odor amet, consectetuer adipiscing elit. Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

Psychology at Keene State

Card 2 ipsum odor amet, consectetuer adipiscing elit. Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

Neuroscience Lab

Card 3 odor amet, consectetuer adipiscing elit. Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

Keene State College Nursing Program

Card 4 lorem odor amet, consectetuer adipiscing elit. Quisque erat felis mollis sed, fringilla malesuada metus maecenas. Dolor fusce finibus odio taciti auctor justo malesuada. 

Text and WYSIWYG Styles


Heading H2

<h2> or element with class="h2"


Heading H3

<h3> or element with class="h3"


Heading H4

<h4> or element with class="h4"


Heading H5

<h5> or element with class="h5"


Heading H6

<h6> or element with class="h6"


Demo Lead Text


Demo Lead Large Text


Demo Uppercase

Demo Uppercase Large

Font Family - Quinsy


Font Akzidenz Grotesk Bold


Font Family - Caecilia


Font - Caecilia Bold


Font - Caecilia Black


Red Color Text


Dark Red Color Text


 

Blockquote Example

"When I came to Keene State, I chose to study both Spanish and graphic design to develop my skills in creating visual works that tell stories. With the help of my classes in modern languages and graphic design, I don’t think there is any limit to how far the stories I want to tell can travel."

– Feride

List Styles

Short List

  • An eum discere
  • Falli igitur possumus
  • Tum ille
  • Eodem modo

Chevron Style List

  • An eum discere
  • Falli igitur possumus
  • Tum ille
  • Eodem modo

Nested List

  • An eum discere
    • Lorem Ipsum
    • Falli igitur
    • Tum ille
  • Falli igitur possumus
  • Eodem modo

Long List

  • Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus.
  • Non enim, si malum est dolor, carere eo malo satis est ad bene vivendum.
  • Videamus igitur sententias eorum, tum ad verba redeamus.
  • An me, inquam, nisi te audire vellem, censes haec dicturum fuisse.
  • Sunt autem, qui dicant foedus esse quoddam sapientium, ut ne minus amicos quam se ipsos diligant.

Ordered Lists

  1. Est, ut dicis, inquit
  2. Ita relinquet duas
  3. Quis enim redargueret.
  4. Quod dicit Epicurus etiam
  5. Non modo carum sibi quemque
  6. Quod ea non occurrentia

Outline Style List

  • An eum discere
  • Falli igitur possumus
  • Tum ille
  • Eodem modo

Table Styles

Table Bordered

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

 

Table Stripped

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Stats Component (on gradient background)

icon

# 1

Undergraduate Teaching

icon

95%

of students receive financial aid

icon

15:1

student-faculty ratio