Typography

[epsilon_heading1 title=”Typograpgy Features” full_width=”0″ bgstyle=”bg-red-dark” bgcolor=”” tcolor=”” icon=”fa-bold” icolor=”” ]

[epsilon_rparagraph tcolor=”” position=”left” ]We’ve taken into account all possible typograpgy features you may require and made them as easy and pleasent to use as humanly possible![/epsilon_rparagraph]

[epsilon_hr]

[epsilon_heading2 title=”Columns” stitle=”Static and Responsive Columns” tcolor=”” tcolor2=”” full_width=”1″ url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4.jpg” ocolor=”1″ ]

[epsilon_rparagraph tcolor=”” position=”left” ]Columns that always stay the same even if you’re using a mobile or a tablet. Scroll below to see columns that adapt to different resolutions [/epsilon_rparagraph]

[epsilon_container fullscreen=”no”]

[epsilon_one_half]1/2
[epsilon_imagep url=”https://www.mir-family.fr/wp-content/uploads/2016/10/1w.jpg” pad=”half-bottom”][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_half]
[epsilon_one_half_last]1/2
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/2w.jpg” pad=”half-bottom”][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_half_last]
[epsilon_one_third]1/3
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3w.jpg” pad=”half-bottom”][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_third][epsilon_one_third]1/3
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4w.jpg” pad=”half-bottom”][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_third][epsilon_one_third_last]1/3
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/5w.jpg” pad=”half-bottom”][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_third_last]
[/epsilon_container]

[epsilon_hr]

These columns will adapt, on mobile devices they will show as rows, but on tablets they will change into columns

[epsilon_container fullscreen=”no”]

[epsilon_one_halft]1/2
[epsilon_imagep url=”https://www.mir-family.fr/wp-content/uploads/2016/10/1ww.jpg” pad=”half-bottom” ][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_halft]
[epsilon_one_halft_last]1/2
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/2ww.jpg” pad=”half-bottom” ][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_halft_last]
[epsilon_one_thirdt]1/3
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3ww.jpg” pad=”half-bottom” ][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_thirdt]
[epsilon_one_thirdt]1/3
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4ww.jpg” pad=”half-bottom” ][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_thirdt]
[epsilon_one_thirdt_last]1/3
[epsilon_imagep url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/5ww.jpg” pad=”half-bottom” ][epsilon_rparagraph tcolor=”” position=”left” ]This column is half the size of the screen, and will stay this way on mobile and tablets.[/epsilon_rparagraph][/epsilon_one_thirdt_last]

[/epsilon_container]

[epsilon_heading2 title=”Dropcaps” stitle=”Simple way of showing off paragraphs” tcolor=”” tcolor2=”” full_width=”1″ url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3.jpg” ocolor=”1″ ]

[epsilon_container fullscreen=”no”][epsilon_one_halft][epsilon_dropcap style=”dropcaps-1″ tcolor=”” bgcolor=”” ]Aorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_dropcap style=”dropcaps-2″ tcolor=”” bgcolor=”” ]Borem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft_last]
[epsilon_one_halft][epsilon_dropcap style=”dropcaps-3″ tcolor=”#fff” bgcolor=”#000″ ]Aorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_dropcap style=”dropcaps-4″ tcolor=”#fff” bgcolor=”#000″ ]Borem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius dui et erat aliquet rutrum. Nunc vitae tincidunt magna. In vitae efficitur enim. Fusce a augue mi. Vivamus a nunc in ante semper iaculis[/epsilon_dropcap][/epsilon_one_halft_last][/epsilon_container]

[epsilon_heading2 title=”Highlights” stitle=”Highlighting your text in style!” tcolor=”” tcolor2=”” full_width=”1″ url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4.jpg” ocolor=”1″ ]

[epsilon_container fullscreen=”no”][epsilon_hr]Text highlights are an extremly easy way to show something off or to make your text stand out when bold just isn’t enough![epsilon_space size=”10″ ]
[epsilon_one_halft][epsilon_highlight tcolor=”#ffffff” bgcolor=”#dd3333″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size=”10″ classes=”” ][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_highlight tcolor=”#ffffff” bgcolor=”#2980b9″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size=”10″ classes=”” ][/epsilon_one_halft_last]
[epsilon_one_halft][epsilon_highlight tcolor=”#ffffff” bgcolor=”#8e44ad” ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size=”10″ classes=”” ][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_highlight tcolor=”#ffffff” bgcolor=”#2abb67″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size=”10″ classes=”” ][/epsilon_one_halft_last]
[epsilon_one_halft][epsilon_highlight tcolor=”#ffffff” bgcolor=”#2c3e50″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size=”10″ classes=”” ][/epsilon_one_halft]
[epsilon_one_halft_last][epsilon_highlight tcolor=”#ffffff” bgcolor=”#d35400″ ]Highlighting text[/epsilon_highlight] is really easy to use![epsilon_space size=”10″ classes=”” ][/epsilon_one_halft_last]
[/epsilon_container]

[epsilon_heading2 title=”List Styles” stitle=”Ordered, unordered, nested styles” tcolor=”” tcolor2=”” full_width=”1″ url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3.jpg” ocolor=”1″ ]

[epsilon_container fullscreen=”no”]

Text highlights are an extremly easy way to show something off or to make your text stand out when bold just isn’t enough!

[epsilon_one_halft]

Unordered List

With 3 level nested elements

  • List Item 1
  • List Item 2
    • List Nested 1
    • List Nested 2
      • List Nested Nested 1
      • List Nested Nested 2
      • List Nested Nested 3
    • List Nested 3
  • List Item 3

[/epsilon_one_halft]
[epsilon_one_halft_last]

Ordered List

With 3 level nested elements

  1. List Item
  2. List Item
    1. List Nested 1
    2. List Nested 2
      1. List Nested Nested 1
      2. List Nested Nested 2
      3. List Nested Nested 3
    3. List Nested 3
  3. List Item

[/epsilon_one_halft_last]
[/epsilon_container]

[epsilon_heading2 title=”Tables” stitle=”Classic tables” tcolor=”” tcolor2=”” full_width=”1″ url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/6.jpg” ocolor=”1″ ]

And it’s pure CSS3! That means just fill in the data, and the table expands to fit the size you need!

[epsilon_table cols=”#,First Name, Last Name, Username” data=”1, Filip, Stefansson, filipstefansson, 2, Victor, Meyer, Pudge, 3, Mans, Ketola-Backe, mossboll” ][/epsilon_table]

[epsilon_heading2 title=”Blockquotes” stitle=”User reviews done with style” tcolor=”” tcolor2=”” full_width=”1″ url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/4.jpg” ocolor=”1″ ]

We’ve included a few variations of blockquotes to aid you with whatever you require in your future project. Check them out below!

[epsilon_qtslider exclude=”” auto=”true” auto_time=”5000″ loop=”true” hover=”true” nav=”true” orderby=”ID” order=”asc” ]

[epsilon_space size=”25″ ]

[epsilon_heading2 title=”Heading Variations” stitle=”This is heading style too!” tcolor=”” tcolor2=”” full_width=”1″ url=”http://mobile.webbudesign.com/circlemobile/wp-content/uploads/sites/14/2016/10/3.jpg” ocolor=”1″ ]

[epsilon_container fullscreen=”no”]

[epsilon_one_thirdt][epsilon_heading1 title=”Demo 1″ full_width=”0″ bgstyle=”bg-red-dark” bgcolor=”” tcolor=”” icon=”fa-cogs” icolor=”” ][epsilon_rparagraph tcolor=”” position=”left” ]Headings with clickable top columns and differnent colors for lines and icon backgrounds.[/epsilon_rparagraph][/epsilon_one_thirdt]
[epsilon_one_thirdt][epsilon_heading4 title=”Demo 2″ stitle=”Larger center headings for even more information can be added as well!” full_width=”0″ bgstyle=”bg-magenta-light” bgcolor=”” tcolor=”” ][/epsilon_one_thirdt]
[epsilon_one_thirdt_last][epsilon_heading5 title=”Demo 3″ stitle=”Maybe incorporate an icon as well? Makes it even better!” full_width=”0″ bgstyle=”bg-green-dark” bgcolor=”” tcolor=”” icon=”fa-cogs” icolor=”” ][/epsilon_one_thirdt_last]

[/epsilon_container]

 

Envoi
User Review
0 (0 votes)