Heading Styles

Complete Typography options are available with this skin pack so you can easily stylize your text and contact with beautiful look.. So what are you waiting for?? Here are example of Standard/by-default text elements and classes

This is a sample of the 'attention' style. To use this use the folllowing html: <span class="attention">....</span>This is a sample of the 'notice' style. To use this use the folllowing html: <span class="notice">....</span>This is a sample of the 'alert' style. To use this use the folllowing html: <span class="alert">....</span>This is a sample of the 'download' style. To use this use the folllowing html: <span class="download">....</span>This is a sample of the 'approved' style. To use this use the folllowing html: <span class="approved">....</span>This is a sample of the 'media' style. To use this use the folllowing html: <span class="media">....</span>This is a sample of the 'note' style. To use this use the folllowing html: <span class="note">....</span>This is a sample of the 'cart' style. To use this use the folllowing html: <span class="cart">....</span>This is a sample of the 'doc ' style. To use this use the folllowing html: <span class="doc ">....</span>

list styles

To use this style create a list in the following format: <ul class="special-1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-4"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-5"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-6"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-7"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-8"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-9"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-9white"><li>....</li><li>....</li>...</ul>.

This Is Link Button

Button Link To use this type: <a class="action_buttonBlue"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonNavyBlue"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonRoyalBlue"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonOcean"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonAqua"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttoncorpgreen"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonGreen"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonLime"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonIndigo"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonLilac"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonRed"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonOrange"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonGrey"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonBlack"><span> Button Link</span></a>

This Is Simple Link

Heading Styles

Complete Typography options are available with this skin pack so you can easily stylize your text and contact with beautiful look.. So what are you waiting for?? Here are example of some text elements and classes

This is Simple Heading 1

This is Simple Heading 2

This is Simple Heading 3

This is Simple Heading 4

This is Simple Heading 5

This is Simple Heading 6

This is a sample of the 'attention' style. To use this use the folllowing html: <span class="attention">....</span>This is a sample of the 'notice' style. To use this use the folllowing html: <span class="notice">....</span>This is a sample of the 'alert' style. To use this use the folllowing html: <span class="alert">....</span>This is a sample of the 'download' style. To use this use the folllowing html: <span class="download">....</span>This is a sample of the 'approved' style. To use this use the folllowing html: <span class="approved">....</span>This is a sample of the 'media' style. To use this use the folllowing html: <span class="media">....</span>This is a sample of the 'note' style. To use this use the folllowing html: <span class="note">....</span>This is a sample of the 'cart' style. To use this use the folllowing html: <span class="cart">....</span>This is a sample of the 'doc ' style. To use this use the folllowing html: <span class="doc ">....</span>

list styles

To use this style create a list in the following format: <ul class="special-1"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-2"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-3"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-4"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-5"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-6"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-7"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-8"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-9"><li>....</li><li>....</li>...</ul>.

To use this style create a list in the following format: <ul class="special-9white"><li>....</li><li>....</li>...</ul>.

This Is Link Button

Button Link To use this type: <a class="action_buttonBlue"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonNavyBlue"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonRoyalBlue"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonOcean"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonAqua"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttoncorpgreen"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonGreen"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonLime"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonIndigo"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonLilac"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonRed"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonOrange"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonGrey"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonBlack"><span> Button Link</span></a>

This Is Simple Link

This is Accordion - click a heading

To setup this accordion simply Copy paste the sample html provided in a text/html module using the Edit Content feature of DNN.

Click here to copy the code. You can add as many accordion tabs as you need. The Container applied to this module is named SimpleCurveContainer. Try applying CntBlank for a more clean appearance

Accordion heading two

To setup this accordion simply Copy paste the sample html provided in a text/html module using the Edit Content feature of DNN.

Click here to copy the code. You can add as many accordion tabs as you need. The Container applied to this module is named SimpleCurveContainer. Try applying CntBlank for a more clean appearance

Clicking on one item closes the other one

To setup this accordion simply Copy paste the sample html provided in a text/html module using the Edit Content feature of DNN.

Click here to copy the code. You can add as many accordion tabs as you need. The Container applied to this module is named SimpleCurveContainer. Try applying CntBlank for a more clean appearance.

Easy Slider Setup

1. Add a Html module to BannerPane
2. Go to module settings for this module
3. Apply the Responsiveslider- demo file as container
4. Now Go to Edit Content option for this module and copy paste the code from read more link below
5. You can upload your own images and update the path in this code