Formatting content

Jeffrey Davis
Modified on: Mon, 10 Apr, 2023 at 11:14 AM

Table of content


Font sizes

This is a Freshdesk Heading 1

This is a Freshdesk Heading 2

This is a Freshdesk Heading 3

This is a Freshdesk Heading 4

This is normal text. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasize design elements over content. It's also called placeholder (or filler) text.

Learn how to use font sizes.


Text styles

This is italic font-style

This is bold font-style

This is your underlined text

This text is deleted

This is an important marked text

This is an important blue text

This is an important yellow text

This is an important red text

Gray paragraph style

Bordered paragraph style

Spaced paragraph style

Uppercased paragraph style

Left aligned text

Center aligned text

Right aligned text

Learn how to use text styles.


Codes

This is how a code looks like:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>HTML</title>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet. </p>
 </body>
</html>

Learn how to use code styles.


Quotes

Quote by default

"Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote.   Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say  this about  us?"

Colored quote

"Here's a really fancy quote. Can you believe what they say this about us? Here's a   really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you  believe what  they say this about us?"

Learn how to use quotes styles.


Description lists

Default description list

Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal description list

Description lists
Such description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Learn how to use description  lists.


Lists

Bullet/unordered list

  • bullet list one
  • bullet list two
  • bullet list three
  • bullet list four                            
    • enclosed element one
    • enclosed element two

Bullet colored list

  • bullet list one
  • bullet list two
  • bullet list three
  • bullet list four

Ordered list

  1. bullet list one
  2. bullet list two
  3. bullet list three
  4. bullet list four                            
    1. enclosed element one
    2. enclosed element two

Ordered list with colored numbers

This type of lists is a great way to display content with longer, step-by-step instructions, descriptions, etc.

  1. Mix flour, cinnamon, salt and starch in a bowl.
  2. Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little  and  increase in volume.
  3. Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous   mass.
  4. Peel the apples and cut them into small cubes.
  5. Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your  oven. As  soon as the apple pie is covered with golden crust, check the readiness of the dishes with a  toothpick.                             
    1. Mix flour, cinnamon, salt and starch in a bowl.
    2. Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a  little  and increase in volume.
    3. Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a  homogeneous  mass.
    4. Peel the apples and cut them into small cubes.
    5. Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of  your  oven. As soon as the apple pie is covered with golden crust, check the readiness of the  dishes with a  toothpick.

Learn how to use lists.



Tables

Generic Table

Month
Savings
Sum
$270
January
$100
February
$80
March
$90

Color Header table

Month
Savings
Sum
$270
January
$100
February
$80
March
$90

Dashed table

Month
Savings
January
$100
February
$80
March
$90
Sum
$270

Striped table

Month
Savings
January
$100
February
$80
March
$90
Sum
$270

No bordered table

Month
Savings
January
$100
February
$80
March
$90
Sum
$270

Hover-colored table

Month
Savings
January
$100
February
$80
March
$90
Sum
$270

Learn how to use tables.


Callout blocks

Simple notes

Default

This is a default block

Info

This is an info block

Warning

This is a warning block

Success

This is a success block

Danger

This is a danger block

Callout block by default

This is a callout

I'm a gray callout!

 With dashed border:

This is a callout

I'm a gray callout!

Transparent callout

This is a transparent callout

I'm a transparent callout!

 With dashed border:

This is a callout

I'm a transparent callout!

Success callout

This is a success callout

I'm a success callout!

 With dashed border:

This is a success callout

I'm a success callout!

Info callout

This is an info callout

I'm a neutral info callout!

 With dashed border:

This is an info callout

I'm a neutral info callout!

Warning-callout

This is a warning callout

And now I'm going to tell you something very important! Pay attention to me!

 With dashed border:

This is a warning callout

I'm a warning callout with a dashed border!

Caution callout

This is a caution callout

And here there's some critical information you have to know!

 With dashed border:

This is a caution callout

I'm a caution callout with a dashed border!

The callout in the primary color

This is a callout

I'm a callout in the primary color

 With dashed border:

This is a callout

I'm a callout in primary color with a dashed border!

Callout blocks with the Font Awesome icons

It is possible to combine your callouts with Font Awesome icons:

  Subscribe icon

This is callout with the icon

  Lock icon

This is callout with the icon

  Phone icon

This is callout with the icon

  Clock icon

This is callout with the icon

  File icon

This is callout with the icon

  Smile icon

This is callout with the icon

  Magic icon

This is callout with the icon

Combine colors and icons!

  Smile icon

This is callout with the icon

  Magic icon

This is callout with the icon

Learn how to use callouts.


Images

By default, images don't have any borders:

But if you want they can be framed:

Or they can have a shadow:

Or they can even have overlay:


Border-radius


 


Videos

Video in a lightbox:

Learn how to use videos.


Accordions

Accordions are useful when you need to toggle between hiding and showing a large amount of content:

Accordion item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore  et dolore  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  nisi ut aliquip ex ea commodo  consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla  pariatur. Excepteur sint occaecat cupidatat non  proident, sunt in culpa qui officia deserunt mollit anim id  est laborum.

Accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  exercitation ullamco  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui  officia deserunt mollit anim id est laborum.
Accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  exercitation ullamco  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui  officia deserunt mollit anim id est laborum.

One more accordion type:

Accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  exercitation ullamco  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui  officia deserunt mollit anim id est laborum.
Accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  exercitation ullamco  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui  officia deserunt mollit anim id est laborum.
Accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  exercitation ullamco  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui  officia deserunt mollit anim id est laborum.

Learn how to use accordions.


Tabs

Tabs are perfect for displaying different subjects in your article!

Tabs style by default:

Tab 1 Tab 2
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque  volutpat  condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos himenaeos. Nam  nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing  diam, a cursus ipsum ante quis turpis.

Colored style:

Tab 1 Tab 2 Tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut  labore  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi  ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa  qui officia deserunt mollit anim id est  laborum.
Tab 1 Tab 2 Tab 3Tab 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut  labore  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi  ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa  qui officia deserunt mollit anim id est  laborum.

Learn how to use tabs.


Font Awesome icons

Font Awesome is a variety of scalable vector icons that can instantly be customized — size, color, shadow, and   other changes that can be done with the power of CSS.

You can use any of 650+ icons free of charge anywhere in your support portal (layout, articles, etc.). They are   already included in all our themes. Find all Font Awesome icons and their codes on this page.

Font Awesome inside the text

It is rather easy to insert a Font Awesome icon to any text of your support portal. Font Awesome is entirely free for commercial use. These are vector icons, which means they're gorgeous on high-resolution displays. It is very easy to make your design by changing the icons' color, size, shadow, and anything that's possible with CSS.

Font Awesome titles

Additionally, you can use any icons from Font Awesome library to make your titles more eye-catching.

  Title with a motorcycle

  Title with a calculator

  Title with binoculars

  Title with a heartbeat

And not only your titles:


Tomorrow we will run faster, stretch out our arms further... And then one fine morning So we beat on, boats  against  the current, borne back ceaselessly into the past.


Animate them!











And mix them:



fa-twitter and fa-square-o



fa-flag and fa-circle



fa-terminal and fa-square

J
Jeffrey is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.
Theme options
This widget is for demo purposes only