Design Elements

Design Elements

The theme includes a wide range of content elements for building visually appealing pages. Below are some samples of the different elements you can use to show visitors a powerful and informative website. These elements include info graphics, image galleries, slideshows, videos, rotating content, icons, tabs, toggles, progress bars, charts, maps and more.

Message Boxes

Success message box with your content.

Information message box with your content.

Warning message box with your content.

Error message box with your content.

Icon Boxes

Icons Left

[icon_box title=”Icon Boxes with Titles” icon=”fa-flag” button_text=”Learn More” button_link=”http://”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]
[icon_box title=”Icon Boxes with Titles” icon=”fa-cloud” button_text=”Learn More” button_link=”http://”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]
[icon_box title=”Icon Boxes with Titles” icon=”fa-flask” button_text=”Learn More” button_link=”http://”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]

Icons Above (Big Icon)

[icon_box title=”Icon Boxes with Titles” icon=”fa-eye” big_icon=”true” button_text=”Learn More” button_link=”http://”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]
[icon_box title=”Icon Boxes with Titles” icon=”fa-star-o” big_icon=”true” button_text=”Learn More” button_link=”http://”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]
[icon_box title=”Icon Boxes with Titles” icon=”fa-map-marker” big_icon=”true” button_text=”Learn More” button_link=”http://”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]

Icon Boxes with Buttons

[icon_box title=”Icon Boxes with Titles” icon=”fa-camera” button_text=”Learn More” button_link=”javascript:void(0)” show_button=”true”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]
[icon_box title=”Icon Boxes with Titles” icon=”fa-comments” button_text=”Learn More” button_link=”javascript:void(0)” show_button=”true”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]
[icon_box title=”Icon Boxes with Titles” icon=”fa-trophy” button_text=”Learn More” button_link=”javascript:void(0)” show_button=”true”]Add your own custom icon box using any icon from the Font Awesome library and your own custom text. Include images, buttons, forms or any other content you need. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.[/icon_box]

Tabs and Toggles

Default Tabs and Accordions

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor.

Section 1

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Section 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Section 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Section 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Alternate Tabs and Accordions (class "light")

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Section 1

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Section 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Section 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Section 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

FAQs

Question and answer toggles?

Ut wisi enim ad minim veniam, quis nost rud exerci tation ullam corper sus cip it lobtis nisl ut ali quip ex ea com odo con sequ at. Sanctus sea sed taki mata ut vero vol uptua. Lorem ipsum dolor sit amet, con set etur sad ip scing elitr, sed diam non umy eirm odte map invid unt ut labore et dolore magna aliqu yam erat, sed diam volu ptua. Ut wisi enim ad minim.

Question and answer toggles?

Ut wisi enim ad minim veniam, quis nost rud exerci tation ullam corper sus cip it lobtis nisl ut ali quip ex ea com odo con sequ at. Sanctus sea sed taki mata ut vero vol uptua. Lorem ipsum dolor sit amet, con set etur sad ip scing elitr, sed diam non umy eirm odte map invid unt ut labore et dolore magna aliqu yam erat, sed diam volu ptua. Ut wisi enim ad minim.

Question and answer toggles?

Ut wisi enim ad minim veniam, quis nost rud exerci tation ullam corper sus cip it lobtis nisl ut ali quip ex ea com odo con sequ at. Sanctus sea sed taki mata ut vero vol uptua. Lorem ipsum dolor sit amet, con set etur sad ip scing elitr, sed diam non umy eirm odte map invid unt ut labore et dolore magna aliqu yam erat, sed diam volu ptua. Ut wisi enim ad minim.

Question and answer toggles?

Ut wisi enim ad minim veniam, quis nost rud exerci tation ullam corper sus cip it lobtis nisl ut ali quip ex ea com odo con sequ at. Sanctus sea sed taki mata ut vero vol uptua. Lorem ipsum dolor sit amet, con set etur sad ip scing elitr, sed diam non umy eirm odte map invid unt ut labore et dolore magna aliqu yam erat, sed diam volu ptua. Ut wisi enim ad minim.

Question and answer toggles?

Ut wisi enim ad minim veniam, quis nost rud exerci tation ullam corper sus cip it lobtis nisl ut ali quip ex ea com odo con sequ at. Sanctus sea sed taki mata ut vero vol uptua. Lorem ipsum dolor sit amet, con set etur sad ip scing elitr, sed diam non umy eirm odte map invid unt ut labore et dolore magna aliqu yam erat, sed diam volu ptua. Ut wisi enim ad minim.

Question and answer toggles?

Ut wisi enim ad minim veniam, quis nost rud exerci tation ullam corper sus cip it lobtis nisl ut ali quip ex ea com odo con sequ at. Sanctus sea sed taki mata ut vero vol uptua. Lorem ipsum dolor sit amet, con set etur sad ip scing elitr, sed diam non umy eirm odte map invid unt ut labore et dolore magna aliqu yam erat, sed diam volu ptua. Ut wisi enim ad minim.

Features Tour

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et.

Previous tab Next tab

Headlines

Call to Action

Focus Attention on the Message to Get Visitors Involved!

Let's Get Started!

Headline with Sub-title

[headline_subtitle title=”Custom Headline” subtitle=”Creates a stylish headline with a nifty sub-title below.”]

Headline Box

[headline_box text=”A Headline with Emphasis Added to Specific Words.” align=”Center”]

Content with Images

Image Left

Image Above

Buttons

Button Sizes

Mini Button
Small Button
Medium Button
Large Button

Button Styles

Accent Color Default Color Button in Grey Button in Blue Turquoise Button in Green Button in Orange Button in Red Button in Black
Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button
Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button Icon Button

Progress Bars

Pie Charts

Progress Bars

Progress Bar

Development 90%
Design 80%
Marketing 70%

Animated Progress Bar

Development 90%
Design 80%
Marketing 70%

Galleries and Sliders

Icons

Font Awesome

Just a small sample of the icons included in the Font Awesome library. See all the icons and details on how to include them on your site at the Font Awesome website.

  • Create bulleted lists
  • Add icons to buttons
  • Animate icons with rotation
  • Specify colors
  • And a lot more!

Even more icons  

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Entypo

Entypo is an icon font including over 250 carefully crafted pictograms. For details on the font characters visit the Entypo website.

Even more icons  

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Videos

YouTube

Vimeo

Hulu

http://www.hulu.com/watch/581604

Flickr

DailyMotion

blip.tv

http://blip.tv/toonwerks/episode-3-shanghai-dune-6217273

WordPress.tv

Revision3

http://revision3.com/diytryin/diy-hollow-book-tablet-case

Maps

Terrain View

Satellite View

Full Width Map