Font Icons

Line Icons Example

icon-mobile
icon-phone
icon-tablet
icon-laptop
icon-desktop
icon-document
icon-documents
icon-clipboard
icon-newspaper
icon-notebook
icon-book-open
icon-calendar
icon-presentation
icon-picture
icon-pictures
icon-camera
icon-video
icon-printer
icon-toolbox
icon-briefcase
icon-wallet
icon-gift
icon-bargraph
icon-grid

Elegant Icons Example

icon_menu
icon_ul
icon_ol
icon_pencil
icon_info
icon_error-triangle
icon_question
icon_lightbulb
icon_map
icon_calendar
icon_film
icon_pin_alt

How to use it

Write icon tag like the following:

<i class="icon icon-medium icon-mobile"><i>

Or use shortcode like this: (example: )

[icon type=icon-camera][/icon]

Typography

Typography in Foundation 5 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.


Headers

Foundation includes styles for all of the header elements that are balanced and based on a modular scale (though modular-scale is not a dependency of Foundation).

HTML

<h1>h1. This is a very large header.</h1> <h2>h2. This is a large header.</h2> <h3>h3. This is a medium header.</h3> <h4>h4. This is a moderate header.</h4> <h5>h5. This is a small header.</h5> <h6>h6. This is a tiny header.</h6>

Rendered HTML

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

List

Disc

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Circle

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Square

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Definition List

Definition Title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

Blockquote

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Elements

Joomla! is all about allowing you to create a site that matches your vision. The possibilities are limitless; this sample site will get you started.

There are a few things you should know to get you started.

Every Joomla! Web site has two parts: the Site (which is what your site visitors see) and the Administrator (which is where you will do a lot of the site management). You need to log in to the Administrator separately with the same username and password. There is a link to the administrator on the top menu that you will see when you log in.

You can edit articles in the Site by clicking on the edit icon. You can create a new article by clicking on the Create Article link in the top menu.

To do basic changes to the appearance your site click Home, Site Settings and Home, Template Settings. 

To do  more advanced things, like edit the contact form, manage users, or install a new template or extension, login to the Administrator.

Some quick tips for working in the Administrator

  • To change the image on all the pages: Go to the Module Manager and click on Image Module.
  • To edit the Side Module: Go to Extensions, Module Manager and click on Side Module.
  • To edit the Contact Form: Go to Components, Contacts. Click on Your Name.

Once you have your basic site you may want to install your own template (that controls the overall design of your site) and then, perhaps additional extensions.

There is a lot of help available for Joomla!. You can visit the Joomla! forums and the Joomla! documentation site to get started.

Restaurant Menu Styles

entrees & starters

main dishes

desserts

 

Another Menu Style


entrees & starters

main dishes

desserts

hero image