Your new content management system comes with 77+ Typographic additions to make your web pages stand out and draw attention to the areas you wish. The Article Index above displays the individual categories. Click on the category you wish to review for a listing and instructions in the use of those specific styles. These styles require a small amount of HTML knowledge and coding. Berry Web Designs will be happy to show you how to use them.

List Styles - Bullets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

List Styles - Number

Below is a list with numbers. To use this style create a list in the following format: <ul class="number"><li class="number-1">....</li><li class="number-9>....</li>...</ul>

• Lorem ipsum dolor sit amet, bibendum natoque lacus, velit dictum lorem, dolor vitae. Leo vivamus non vitae, hac porttitor a, arcu vestibulum, ac tincidunt litora varius dictum mollis, vehicula tincidunt donec eaque ante nunc. Sollicitudin metus tristique. Sem et tempus tincidunt.

• Lectus nisl, erat integer metus, bibendum convallis leo enim eu morbi arcu, non dictum eligendi velit malesuada nisl. Ornare risus praesent nulla nibh nisl, unde et mauris lacus vestibulum at porttitor.

• Wisi integer nunc aliquet, aliquet sed aliquam consectetuer in, ac ut eget massa duis porttitor hac, non sagittis sit nunc tincidunt neque.

• Morbi luctus porta ultricies, in sodales erat cras sed feugiat, aptent nec, placerat vitae ullamcorper, dignissim eget pede diam vestibulum sit. Ut per dolor.

• Turpis turpis neque natoque, at pretium aliquam, tortor auctor irure quam sit nibh, mauris dis. Massa eget, risus est porttitor doloremque condimentum donec, lacus tellus at placerat donec at in, in suscipit auctor quis est tortor et.

• A accumsan facilisi. Consectetuer ligula, diam diam nec quam placerat feugiat, aliquam aliquam nulla sed urna tellus, lacinia id venenatis ridiculus. Pellentesque sed litora sem ligula non, non dolor sed, auctor felis praesent in.

• Aliquam tincidunt accumsan vel dictumst nibh, aenean id mauris lobortis congue iusto lectus. Dui eros lorem quam, in laoreet ipsum nulla.

• Adipiscing vivamus metus ullamcorper eu sed, in in a nibh hic nunc id. Pellentesque diam felis eu molestie a, arcu eget dolor, et magna metus, mollis cursus veniam in, pharetra nullam.

• Ullamcorper quam et, dolor id ac, diam vestibulum dolor odio et elit integer, vestibulum in.

Below is a list with Roman Numerals. To use this style create a list in the following format: <ul class="rnumber"><li class="rnumber-1">....</li><li class="rnumber-9>....</li>...</ul>

• Lorem ipsum dolor sit amet, bibendum natoque lacus, velit dictum lorem, dolor vitae. Leo vivamus non vitae, hac porttitor a, arcu vestibulum, ac tincidunt litora varius dictum mollis, vehicula tincidunt donec eaque ante nunc. Sollicitudin metus tristique. Sem et tempus tincidunt.

• Lectus nisl, erat integer metus, bibendum convallis leo enim eu morbi arcu, non dictum eligendi velit malesuada nisl. Ornare risus praesent nulla nibh nisl, unde et mauris lacus vestibulum at porttitor.

• Wisi integer nunc aliquet, aliquet sed aliquam consectetuer in, ac ut eget massa duis porttitor hac, non sagittis sit nunc tincidunt neque.

• Morbi luctus porta ultricies, in sodales erat cras sed feugiat, aptent nec, placerat vitae ullamcorper, dignissim eget pede diam vestibulum sit. Ut per dolor.

• Turpis turpis neque natoque, at pretium aliquam, tortor auctor irure quam sit nibh, mauris dis. Massa eget, risus est porttitor doloremque condimentum donec, lacus tellus at placerat donec at in, in suscipit auctor quis est tortor et.

• A accumsan facilisi. Consectetuer ligula, diam diam nec quam placerat feugiat, aliquam aliquam nulla sed urna tellus, lacinia id venenatis ridiculus. Pellentesque sed litora sem ligula non, non dolor sed, auctor felis praesent in.

• Aliquam tincidunt accumsan vel dictumst nibh, aenean id mauris lobortis congue iusto lectus. Dui eros lorem quam, in laoreet ipsum nulla.

• Adipiscing vivamus metus ullamcorper eu sed, in in a nibh hic nunc id. Pellentesque diam felis eu molestie a, arcu eget dolor, et magna metus, mollis cursus veniam in, pharetra nullam.

• Ullamcorper quam et, dolor id ac, diam vestibulum dolor odio et elit integer, vestibulum in.

Alert and Status Messages