Arianna Braconi
  • Home
  • Features
    • Module Positions
    • Module Variations
    • Typography
    • Sample Dropdown
      • Sample Dropdown
      • Sample Dropdown
      • Sample Dropdown
        • Sample Dropdown
        • Sample Dropdown
        • Sample Dropdown
        • Sample Dropdown
      • Sample Dropdown
  • Joomla
    • Offline Page
    • Error Page
    • Blog Layout
    • Members
    • Contact us
  • Styles
    • Style1 - Green
    • Style2 - Red
    • Style3 - Light Blue
    • Style4 - Dark Blue
    • Style5 - Purple
    • Style6 - Grey
    • Custom Style
  • Download Free »
Search
  • Home /
  • Features /
  • Typography

Typography

  • Print

The typography page will show you how to use various HTML codes with or without classes. For each of the elements below there is the code as well which you can simply paste. In case you need help using the IceTheme Typography feature please use our Forums

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. For more information about headings please visit the HTML Headings on w3schools

Example: <h1>This is Heading 1</h1>

This is Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

 

This is a Headline

This is a Subheadline that should go after the main headline

Use: <p class="ice-headline">for the headline </p> and use for <p class="ice-headline"> the subheadline </p>


Lists

There are 3 kinds of HTML lists. Unordered list which starts with <ul> and it is used to display a set of items which the order does not matter. Ordered list which starts with <ol> and as the name suggests the order is important. The third is the Definition lists which starts with <dl> and each item has a description.

Example Unordered List:
<ul>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
</ul>

Example Ordered List:
<ol>
<li> This is a ordered list </li>
<li> This is a ordered list </li>
<li> This is a ordered list </li>
</ol>

Example Definition List:
<dl>
<dt> Coffee </dt>
<dd> black hot drink </dd>
<dd> white cold drink </dd>
</dl>

 

Ordered List

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet

Unordered List

  • This is a sample Unordered List.
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Definition List

This is a sample Definition List.
Condimentum quis.
Definiton Lists are important
Congue Quisque augue elit dolor.
 

Unordered Lists with classes

You can easily make an unordered list and instated of having the HTML default bullets, you can display a nice icon before each item and enhance the usability of your lists.

Example:
<ul class="check">
<li> This is a unordered list </li>
<li> This is a unordered list </li>
<li> This is a unordered list </li>
</ul>

  • ul with class ice-check
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-arrow
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-cross
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-light
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-star
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-note
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-check2
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-info
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • ul with class ice-help
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit
 

BlockQuotes

Example: <blockquote><p> The blockquote message here </p></blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra.

Highlights

Example: <span class="highlight"> highlighted message here </span>

Lorem ipsum dolor sit amet consectetur adipiscing elit nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt.

 

Dropcaps

Example: <span class="dropcap"> L </span> . Use only the first letter of your text. Be careful not to overuse this feature.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus.

 

Code

Example: <pre> Your code goes here </pre>

#i-love-icetheme { 
    position: relative;
    float: left;
    width:960px;
}



Floated blocks

Example: <span class="IceBlockTextLeft"> Your code goes here </span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa, vitae bibendum mi libero at magna. Etiam ante mi, ornare eget consectetur vitae, bibendum eu justo. Aliquam faucibus posuere nulla non tincidunt. Nunc consequat erat vel sem scelerisque luctus. Vestibulum convallis posuere ante at fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa. Morbi eu dui lorem. Vestibulum pulvinar, neque id porta tempor, nisl elit tempus odio, ut dignissim lorem quam a augue. Quisque vehicula felis nec nisi consectetur elementum. In dui ipsum, rutrum id viverra id, ultrices sit amet dui.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi mi, egestas ut accumsan sit amet, aliquet vitae

Example: <span class="IceBlockTextRight"> Your code goes here </span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa, vitae bibendum mi libero at magna. Etiam ante mi, ornare eget consectetur vitae, bibendum eu justo. Aliquam faucibus posuere nulla non tincidunt. Nunc consequat erat vel sem scelerisque luctus. Vestibulum convallis posuere ante at fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo, velit eu posuere tempus, magna tellus pellentesque massa. Morbi eu dui lorem. Vestibulum pulvinar, neque id porta tempor, nisl elit tempus odio, ut dignissim lorem quam a augue. Quisque vehicula felis nec nisi consectetur elementum. In dui ipsum, rutrum id viverra id, ultrices sit amet dui.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mi mi, egestas ut accumsan sit amet, aliquet vitae


Blocks

In case you want to decorate a div html tag you may use the block feature.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block1">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block2">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block3">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block4">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block5">block text</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Example:
<div class="ice-block6">block text</div>




Tooltips

Example: <ul class="tooltip-example"> Text goes here <span> Tooltip goes here </span></span>

  • Tooltip on left
  • Tooltip on top
  • Tooltip on right
  • Tooltip on bottom

Tables

Use the class "custom" to decorate your tables , Also the table with class "category" below is used by Joomla to output some of the tables into the the Joomla core components

Example:
<table class="table">
...
</table>

Table with Decoration
Column 1Column 2Column 3Column 4
Footer Col 1Footer Col 2Footer Col 3Footer Col 4
Row 1 / TD 1 Row 1 / TD 2 Row 1 / TD 3 Row 1 / TD 4
Row 2 / TD 1 Row 2 / TD 2 Row 2 / TD 3 Row 2 / TD 4
Row 3 / TD 1 Row 3 / TD 2 Row 3 / TD 3 Row 3 / TD 4
Row 4 / TD 1 Row 4 / TD 2 Row 4 / TD 3 Row 4 / TD 4
Row 5 / TD 1 Row 5 / TD 2 Row 5 / TD 3 Row 5 / TD 4
Row 6 / TD 1 Row 6 / TD 2 Row 6 / TD 3 Row 6 / TD 4
Row 7 / TD 1 Row 7 / TD 2 Row 7 / TD 3 Row 7 / TD 4

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

This is a sample of the 'notice' style. Use this style to give your users a message that require a note

This is a sample of the 'success' style. Use this style to give your users a message when a successful task was completed

This is a sample of the 'error' style. Use this style to give your users a message when a task was wrongly completed

Sample Legend


Features Menu

  • Module Positions
  • Module Variations
  • Typography
  • Sample Dropdown

Who's Online

We have 99 guests and no members online

VISITO IN QUESTI AMBULATORI:

MODENA - Studio Medico Specialistico
MODENA - Casa di Cura Fogliani (per la chirurgia ginecologica)
SASSUOLO - Centro Fisioterapico Città di Sassuolo
CARPI - Poliambulatorio Nubra Medica
FANANO - Studio Medico Fanano
VIGNOLA - Poliambulatorio Cromaton 
FINALE EMILIA - NOI CON TE Poliambulatorio Sanitario

 

 

PRENOTAZIONI ON-LINE:

Prenota la tua visita on-line, scegli l'ambulatorio e gli orari che sono più comodi per te.

Arianna Braconi - MioDottore.it

Puoi sempre contattarmi via SMS o WhatsApp al numero +39 338 604 5800

Photo Gallery


© 2021 Arianna Braconi

In order to provide you with the best online experience this website uses cookies. Delete cookies

In order to provide you with the best online experience this website uses cookies.

By using our website, you agree to our use of cookies. Learn more

I agree

Information cookies

Cookies are short reports that are sent and stored on the hard drive of the user's computer through your browser when it connects to a web. Cookies can be used to collect and store user data while connected to provide you the requested services and sometimes tend not to keep. Cookies can be themselves or others.

There are several types of cookies:

  • Technical cookies that facilitate user navigation and use of the various options or services offered by the web as identify the session, allow access to certain areas, facilitate orders, purchases, filling out forms, registration, security, facilitating functionalities (videos, social networks, etc..).
  • Customization cookies that allow users to access services according to their preferences (language, browser, configuration, etc..).
  • Analytical cookies which allow anonymous analysis of the behavior of web users and allow to measure user activity and develop navigation profiles in order to improve the websites.

So when you access our website, in compliance with Article 22 of Law 34/2002 of the Information Society Services, in the analytical cookies treatment, we have requested your consent to their use. All of this is to improve our services. We use Google Analytics to collect anonymous statistical information such as the number of visitors to our site. Cookies added by Google Analytics are governed by the privacy policies of Google Analytics. If you want you can disable cookies from Google Analytics.

However, please note that you can enable or disable cookies by following the instructions of your browser.

  • privacy policy
  • credits: nevent.it
Arianna Braconi
  • Home
  • Features
    • Module Positions
    • Module Variations
    • Typography
    • Sample Dropdown
      • Sample Dropdown
      • Sample Dropdown
      • Sample Dropdown
        • Sample Dropdown
        • Sample Dropdown
        • Sample Dropdown
        • Sample Dropdown
      • Sample Dropdown
  • Joomla
    • Offline Page
    • Error Page
    • Blog Layout
    • Members
    • Contact us
  • Styles
    • Style1 - Green
    • Style2 - Red
    • Style3 - Light Blue
    • Style4 - Dark Blue
    • Style5 - Purple
    • Style6 - Grey
    • Custom Style
  • Download Free »
Go Top

Search our website