Typography

Черкаський художньо-технічний коледж — Typography

  • Typography

    This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience!

    Preformatted text

    Headings

    This is a sample Heading 1. Lorem ipsum.

    This is a sample Heading 2. Lorem ipsum.

    This is a sample Heading 3. Lorem ipsum.

    This is a sample Heading 4. Lorem ipsum.

    This is a sample Heading 5. Lorem ipsum.

    Special Content

    Below is a sample of pre tag or code class:

    #ja-rightcol {
      width: 180px;
      float: right;
      color: #EEEEEE;
    }
    

    This is a highlight phrase. Use class="highlight".

    Blockquote

    This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    Someone famous in Source Title

    This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.!

    Someone famous in Source Title

    Dropcaps

    This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Templates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class.

    Lists Style

    Ordered List

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

    Un-Ordered List

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

    Definition List

    This is a sample Definition List.
    Condimentum quis.
    Congue Quisque augue elit dolor.
    Congue Quisque augue elit dolor.

    Special Unordered Lists

    •  This is a sample Arrow list.
    •  Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.
    •  This is a sample Arrowlist.
    •  This is a sample Star list.
    •  Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.
    •  This is a sample Starlist.
    •  This is a sample Check list.
    •  Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.
    •  This is a sample Checklist.

    Block Number

    01Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    02Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    03Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    ILorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    IILorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    IIILorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    iLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    iiLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    iiiLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    Icons Style

    Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

     Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    Message Boxes & Legend Styles

    Message Boxes with Icons

    This is a confirmation box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a error message box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a warning box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a information. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a sticky. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a download box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a system message box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    Rounded Message Boxes with Icons

    This is a confirmation box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a error message box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a warning box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a information. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a sticky. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a download box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    This is a system message box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

    Legends

    Legend - Style 1

    Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.

    Rounded Legends

    Rounded Legend - Style 1

    Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.

    Buttons & Tags

    Squared Tags

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    Rounded Tags

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    This is a sample Inline Tag. Use this to provide useful information.

    Forms

    Form Fieldset

    Templates Fieldset 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.
    Special Fieldset - Style 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.

    Form Elements