Formatting content : Breezy Themes

<!DOCTYPE html>      <html class="no-js " lang="en" dir="ltr" data-date-format="non_us"> <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-89423157-14"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-89423157-14'); </script>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KTNL9KW');</script>   <title> Formatting content : Breezy Themes </title>  <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content= "" /> <meta name="author" content= "" /> <meta property="og:title" content="Formatting content " /> <meta property="og:url" content="https://breezythemes.freshdesk.com/support/solutions/articles/2100028000-formatting-content-" /> <meta property="og:description" content=" Table of content Font sizes Text styles Codes Quote Descriptions Lists Links Tables Callout blocks Images Videos Accordions Tabs Font Awesome Font sizes This is a Freshdesk Heading 1 This is a Freshdesk Heading 2 This is a F..." /> <meta property="og:image" content="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2100320151/logo/Xl3lBJNr5kNiY3syIMat0dhifFdFHNNTkA.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAS6FNSMY2XLZULJPI%2F20241118%2Fus-east-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20241118T162211Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=11e362634731c802f2044ac29eeac10fbc283f43e65da749a3eb3be5b3c56d6c" /> <meta property="og:site_name" content="Breezy Themes" /> <meta property="og:type" content="article" /> <meta name="twitter:title" content="Formatting content " /> <meta name="twitter:url" content="https://breezythemes.freshdesk.com/support/solutions/articles/2100028000-formatting-content-" /> <meta name="twitter:description" content=" Table of content Font sizes Text styles Codes Quote Descriptions Lists Links Tables Callout blocks Images Videos Accordions Tabs Font Awesome Font sizes This is a Freshdesk Heading 1 This is a Freshdesk Heading 2 This is a F..." /> <meta name="twitter:image" content="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2100320151/logo/Xl3lBJNr5kNiY3syIMat0dhifFdFHNNTkA.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAS6FNSMY2XLZULJPI%2F20241118%2Fus-east-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20241118T162211Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=11e362634731c802f2044ac29eeac10fbc283f43e65da749a3eb3be5b3c56d6c" /> <meta name="twitter:card" content="summary" /> <link rel="canonical" href="https://breezythemes.freshdesk.com/support/solutions/articles/2100028000-formatting-content-" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/v4-shims.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.10.0/styles/github.min.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" /> <link rel="stylesheet" href="https://use.typekit.net/mxg2wcp.css"> <script src="https://www.google.com/recaptcha/api.js"></script> <script> function recaptchaTimestamp() { var captchaSettings = document.getElementsByName("recaptcha_settings"); var reCaptchaResponse = document.getElementById("g-recaptcha-response"); if (((captchaSettings.length > 0)) && (reCaptchaResponse == null || reCaptchaResponse.value.trim() == "")) { var elems = JSON.parse(captchaSettings[0].value); elems["ts"] = JSON.stringify(new Date().getTime()); captchaSettings[0].value = JSON.stringify(elems); } } // setInterval(recaptchaTimestamp, 500); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>  <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="hnserMq8xKSnDA81bhrf2IObZPlIf7pdc/Vdn7itQ7Tp0Rtysuy9+wUwoYc4LDeq/Rg1hM0lqO+rvTaLrDUsAQ==" />   <link rel='shortcut icon' href='https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2100320144/fav_icon/8EX-GZqIioowCWBPgayhHDWKxiDAyEM_VA.ico' />  <link rel="stylesheet" media="print" href="https://assets8.freshdesk.com/assets/cdn/portal_print-6e04b27f27ab27faab81f917d275d593fa892ce13150854024baaf983b3f4326.css" /> <link rel="stylesheet" media="screen" href="https://assets6.freshdesk.com/assets/cdn/portal_utils-83ada44a269c552c54b626cf88f4b3f5f6141b36e5921e2061b52dfba15293b5.css" />  <link href="/support/theme.css?v=3&d=1670820879" media="screen" rel="stylesheet" type="text/css">  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>  <script src="https://assets8.freshdesk.com/assets/cdn/portal_head_v2-36ab34a3681b18368e238876f238180a275ea33aef5344965eaf6f636dc8721b.js"></script>  <script src="https://assets2.freshdesk.com/assets/cdn/prism-2276a193401841df09503806d718e88dcbf9c2117a3b5a1fc1065c2c8d0bc1bd.js"></script>  <script type="text/javascript"> var portal = {"language":"en","name":"Breezy Themes","contact_info":"","current_page_name":"article_view","current_tab":"solutions","vault_service":{"url":"https://vault-service.freshworks.com/data","max_try":2,"product_name":"fd"},"current_account_id":487679,"preferences":{"bg_color":"#efefef","header_color":"#252525","help_center_color":"#f9f9f9","footer_color":"#777777","tab_color":"#006063","tab_hover_color":"#4c4b4b","btn_background":"#ffffff","btn_primary_background":"#6c6a6a","baseFont":"Helvetica Neue","textColor":"#333333","headingsFont":"Open Sans Condensed","headingsColor":"#333333","linkColor":"#049cdb","linkColorHover":"#036690","inputFocusRingColor":"#f4af1a","nonResponsive":"true"},"image_placeholders":{"spacer":"https://assets10.freshdesk.com/assets/misc/spacer.gif","profile_thumb":"https://assets9.freshdesk.com/assets/misc/profile_blank_thumb-4a7b26415585aebbd79863bd5497100b1ea52bab8df8db7a1aecae4da879fd96.jpg","profile_medium":"https://assets4.freshdesk.com/assets/misc/profile_blank_medium-1dfbfbae68bb67de0258044a99f62e94144f1cc34efeea73e3fb85fe51bc1a2c.jpg"},"falcon_portal_theme":false,"current_object_id":2100028000}; var attachment_size = 20; var blocked_extensions = ""; </script> <meta name="robots" content="noindex, nofollow"> </head> <body>  <div class="alert alert-with-close notice" id="noticeajax" style="display:none;"></div> <div class="layout layout--anonymous" data-page="article_view"> <div class="qg">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTNL9KW" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.com/metrika/tag.js", "ym"); ym(90987785, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.com/watch/90987785" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <div class="btds-notification btds-notification-notice" data-btds-notification hidden> <div class="btds-notification-inner container-inner"> <span class="btds-notification-icon"></span> <span class="btds-notification-text">Your request was successfully submitted.</span> <a href="#" class="btds-notification-dismiss" data-btds-notification-dismiss=""> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"> <path stroke="currentColor" stroke-linecap="round" d="M3 13L13 3m0 10L3 3"></path> </svg> </a> </div> </div> <header class="topbar topbar--small" data-topbar> <div class="topbar__nav container"> <div class="container-inner kw"> <div class="kx"> <div class="lc clearfix"> <div class="hz"> <div class="ia"> <a href="/support/home"> <svg class="logo" width="170px" height="35px" viewBox="38 93 434 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="On-White-Background" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(38.000000, 93.000000)"> <g id="noun_757263_cc" fill="#fff"> <g id="Group"> <g id="Shape"> <path d="M48.6134481,18.8461187 C43.5612729,18.8461187 38.5090977,16.1673737 33.7024405,10.8118586 C27.5441048,3.95059848 20.9798224,3.18340909 16.5498624,3.74719949 C10.6485672,4.49957828 5.74352552,7.88923232 3.12082613,10.8118586 C2.53229204,11.4664874 1.58035586,11.4664874 0.991821767,10.8118586 C0.404174018,10.1572298 0.404174018,9.09580303 0.991821767,8.44117424 C8.22618215,0.383217172 23.8170176,-4.94465152 35.8314448,8.44117424 C44.3137811,17.8893535 52.9131152,17.8893535 61.3963378,8.44117424 C61.9839855,7.78555808 62.9368081,7.78555808 63.5244558,8.44117424 C64.1121036,9.09580303 64.1121036,10.1572298 63.5244558,10.8118586 C58.7160259,16.1683611 53.664737,18.8461187 48.6134481,18.8461187 Z"></path> <path d="M47.0339786,32.2911869 C42.0509384,32.2911869 36.6034527,30.1525354 31.2933506,24.2381667 C26.3643775,18.7493561 21.0072991,16.3697854 15.3639308,17.1705455 C11.0660364,17.7807424 6.6023953,20.3568005 3.11993979,24.2381667 C2.53140569,24.8918081 1.57946952,24.8918081 0.990935421,24.2381667 C0.403287671,23.5835379 0.403287671,22.5211237 0.990935421,21.8674823 C4.93872287,17.4716944 10.0387608,14.5470934 14.9836881,13.8450707 C21.5089712,12.9179268 27.8800301,15.6934343 33.4214686,21.8674823 C47.0153653,37.0078712 59.9631155,23.4611035 61.3954515,21.8674823 C61.9830992,21.2128535 62.9359217,21.2128535 63.5235695,21.8674823 C64.1112172,22.5211237 64.1112172,23.5835379 63.5235695,24.2381667 C60.0366822,28.1234823 53.9882535,32.2892121 47.0339786,32.2911869 Z"></path> <path d="M45.625574,45.7214444 C40.7692813,45.7214444 34.6215818,44.0517955 28.8860334,37.6625 C23.9783327,32.1954116 19.0334054,29.8118914 14.1842035,30.592904 C10.5297968,31.1774293 6.80625501,33.557 3.12082613,37.6625 C2.53229204,38.3181162 1.58035586,38.3181162 0.991821767,37.6625 C0.404174018,37.0068838 0.404174018,35.9464444 0.991821767,35.292803 C5.1470143,30.6610328 9.44402228,27.9625404 13.7569845,27.2743409 C19.590031,26.339298 25.4000325,29.036803 31.0150378,35.292803 C37.1272835,42.1017323 43.7358832,42.8057298 48.203956,42.190596 C54.0875243,41.3868737 58.8764546,38.0999066 61.3963378,35.292803 C61.9839855,34.6371869 62.9368081,34.6371869 63.5244558,35.292803 C64.1121036,35.9464444 64.1121036,37.0068838 63.5244558,37.6625 C60.6518067,40.8655404 55.2140708,44.610649 48.5717899,45.5190328 C47.6606256,45.6444293 46.6732356,45.7214444 45.625574,45.7214444 Z"></path> </g> </g> </g> <path d="M79.910666,41 L100.182666,41 C107.294666,41 111.046666,36.52 111.046666,30.92 C111.046666,26.216 107.854666,22.352 103.878666,21.736 C107.406666,21.008 110.318666,17.872 110.318666,13.168 C110.318666,8.184 106.678666,3.648 99.566666,3.648 L79.910666,3.648 L79.910666,41 Z M87.862666,18.6 L87.862666,10.48 L97.830666,10.48 C100.518666,10.48 102.198666,12.216 102.198666,14.568 C102.198666,16.92 100.518666,18.6 97.830666,18.6 L87.862666,18.6 Z M87.862666,34.112 L87.862666,25.432 L98.110666,25.432 C101.246666,25.432 102.926666,27.448 102.926666,29.8 C102.926666,32.488 101.134666,34.112 98.110666,34.112 L87.862666,34.112 Z M114.257333,41 L121.369333,41 L121.369333,23.136 C122.545333,21.4 125.681333,20.056 128.033333,20.056 C128.817333,20.056 129.489333,20.168 129.993333,20.28 L129.993333,13.336 C126.633333,13.336 123.273333,15.24 121.369333,17.648 L121.369333,13.952 L114.257333,13.952 L114.257333,41 Z M130.068,27.448 C130.068,36.128 136.284,41.672 144.516,41.672 C148.716,41.672 152.972,40.384 155.66,37.92 L152.524,33.328 C150.788,35.008 147.82,36.016 145.3,36.016 C140.708,36.016 137.964,33.16 137.516,29.744 L157.62,29.744 L157.62,28.176 C157.62,19.328 152.132,13.28 144.068,13.28 C135.836,13.28 130.068,19.608 130.068,27.448 Z M144.068,18.936 C148.772,18.936 150.564,22.352 150.732,24.928 L137.404,24.928 C137.74,22.24 139.644,18.936 144.068,18.936 Z M158.422666,27.448 C158.422666,36.128 164.638666,41.672 172.870666,41.672 C177.070666,41.672 181.326666,40.384 184.014666,37.92 L180.878666,33.328 C179.142666,35.008 176.174666,36.016 173.654666,36.016 C169.062666,36.016 166.318666,33.16 165.870666,29.744 L185.974666,29.744 L185.974666,28.176 C185.974666,19.328 180.486666,13.28 172.422666,13.28 C164.190666,13.28 158.422666,19.608 158.422666,27.448 Z M172.422666,18.936 C177.126666,18.936 178.918666,22.352 179.086666,24.928 L165.758666,24.928 C166.094666,22.24 167.998666,18.936 172.422666,18.936 Z M187.337333,41 L209.401333,41 L209.401333,34.784 L196.801333,34.784 L209.177333,19.104 L209.177333,13.952 L187.337333,13.952 L187.337333,20.168 L199.545333,20.168 L187.337333,35.68 L187.337333,41 Z M212.836,45.2 L211.772,51.584 C212.668,51.808 214.46,51.976 215.3,51.976 C219.948,51.864 223.532,50.52 225.548,45.424 L238.26,13.952 L230.588,13.952 L223.532,32.768 L216.476,13.952 L208.86,13.952 L219.836,41.392 L218.828,43.688 C218.156,45.144 216.924,45.648 215.076,45.648 C214.404,45.648 213.452,45.48 212.836,45.2 Z M259.353333,41 L267.361333,41 L267.361333,10.648 L278.225333,10.648 L278.225333,3.648 L248.433333,3.648 L248.433333,10.648 L259.353333,10.648 L259.353333,41 Z M298.852,41 L305.964,41 L305.964,21.792 C305.964,16.528 303.108,13.28 297.172,13.28 C292.748,13.28 289.388,15.408 287.652,17.48 L287.652,3.648 L280.54,3.648 L280.54,41 L287.652,41 L287.652,22.8 C288.884,21.176 291.068,19.608 293.812,19.608 C296.892,19.608 298.852,20.784 298.852,24.536 L298.852,41 Z M308.670667,27.448 C308.670667,36.128 314.886667,41.672 323.118667,41.672 C327.318667,41.672 331.574667,40.384 334.262667,37.92 L331.126667,33.328 C329.390667,35.008 326.422667,36.016 323.902667,36.016 C319.310667,36.016 316.566667,33.16 316.118667,29.744 L336.222667,29.744 L336.222667,28.176 C336.222667,19.328 330.734667,13.28 322.670667,13.28 C314.438667,13.28 308.670667,19.608 308.670667,27.448 Z M322.670667,18.936 C327.374667,18.936 329.166667,22.352 329.334667,24.928 L316.006667,24.928 C316.342667,22.24 318.246667,18.936 322.670667,18.936 Z M372.305334,41 L379.473334,41 L379.473334,21.456 C379.473334,15.912 376.505334,13.28 371.521334,13.28 C367.377334,13.28 363.793334,15.744 362.225334,18.208 C361.217334,15.128 358.697334,13.28 354.721334,13.28 C350.577334,13.28 346.993334,15.856 345.873334,17.48 L345.873334,13.952 L338.761334,13.952 L338.761334,41 L345.873334,41 L345.873334,22.8 C346.937334,21.288 349.009334,19.608 351.473334,19.608 C354.385334,19.608 355.505334,21.4 355.505334,23.92 L355.505334,41 L362.673334,41 L362.673334,22.744 C363.681334,21.288 365.753334,19.608 368.273334,19.608 C371.185334,19.608 372.305334,21.4 372.305334,23.92 L372.305334,41 Z M382.124,27.448 C382.124,36.128 388.34,41.672 396.572,41.672 C400.772,41.672 405.028,40.384 407.716,37.92 L404.58,33.328 C402.844,35.008 399.876,36.016 397.356,36.016 C392.764,36.016 390.02,33.16 389.572,29.744 L409.676,29.744 L409.676,28.176 C409.676,19.328 404.188,13.28 396.124,13.28 C387.892,13.28 382.124,19.608 382.124,27.448 Z M396.124,18.936 C400.828,18.936 402.62,22.352 402.788,24.928 L389.46,24.928 C389.796,22.24 391.7,18.936 396.124,18.936 Z M409.862667,37.472 C412.718667,40.104 417.254667,41.672 421.958667,41.672 C429.462667,41.672 433.662667,37.92 433.662667,32.992 C433.662667,26.216 427.446667,24.928 422.798667,24.032 C419.774667,23.416 417.646667,22.968 417.646667,21.4 C417.646667,19.888 419.326667,18.712 421.902667,18.712 C425.206667,18.712 428.286667,20.112 429.910667,21.848 L432.766667,16.976 C430.078667,14.848 426.438667,13.28 421.846667,13.28 C414.734667,13.28 410.758667,17.256 410.758667,21.792 C410.758667,28.288 416.750667,29.464 421.398667,30.36 C424.366667,30.92 426.830667,31.424 426.830667,33.272 C426.830667,34.952 425.374667,36.184 422.294667,36.184 C418.934667,36.184 414.902667,34.336 412.942667,32.488 L409.862667,37.472 Z" id="Breezy-Themes" fill="#fff"></path> </g> </svg> </a> </div> </div> <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x" data-toggle-menu> <span class="lines"></span> </button> </div> <div class="lc topbar__menu"> <div class="ld" data-menu> <div class="topbar__controls topbar__controls--anonymous"> <a class="kz" href="https://www.breezythemes.com/pages/contact-us">Contact us</a> </div> </div> </div> </div> </div> </div>  </header> </div> <div class="layout__content "> <div class="container"> <div class="container-inner"> <div class="mr"> <div class="ag clearfix"> <div class="column column--sm-8"> <ol class="ib"> <li> <a href="/support/home">Breezy Themes</a> </li> <li title="Solution home"> <a href="/support/solutions">Solution home</a> </li> <li title="Usage Guides"> <a href="/support/solutions/2100019034">Usage Guides</a> </li> <li title="Formatting Content"> <a href="/support/solutions/folders/2100029654">Formatting Content</a> </li> </ol> </div> <div class="column column--sm-4"> <div class="search-box search-box--small"> <form class="hc-search-form print--remove" autocomplete="off" action="/support/search/solutions" id="hc-search-form" data-csrf-ignore="true"> <div class="hc-search-input"> <label for="support-search-input" class="hide">Enter your search term here...</label> <input placeholder="Enter your search term here..." type="text" name="term" class="special" value="" rel="page-search" data-max-matches="10" id="support-search-input"> </div> <div class="hc-search-button"> <button class="btn btn-primary" aria-label="Search" type="submit" autocomplete="off"> <i class="mobile-icon-search hide-tablet"></i> <span class="hide-in-mobile"> Search </span> </button> </div> </form> </div> </div> </div> <div class="ag clearfix"> <div class="column column--sm-4"> <div class="side-nav"> <div class="sidenav re"> <ul class="sidenav-categories"> <li class="sidenav-category " id="sidenav-category-2100019024"> <a class="sidenav-category__link js-sidenav-category-link rf">Getting Started</a> <ul class="sidenav-sections"> <li class="sidenav-section " id="sidenav-section-2100029640"> <a class="sidenav-section__link js-sidenav-section-link rg">General information</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100027946"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027946-what-is-breezy-themes-">What is Breezy Themes? </a> </li> <li class="sidenav-article " id="sidenav-article-2100027948"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027948-products-and-services-pricing">Products and services pricing</a> </li> <li class="sidenav-article " id="sidenav-article-2100027949"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027949-products-and-services-support">Products and services support</a> </li> <li class="sidenav-article " id="sidenav-article-2100027950"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027950--information-for-non-developers"> Information for non-developers</a> </li> </ul> </li> <li class="sidenav-section " id="sidenav-section-2100029641"> <a class="sidenav-section__link js-sidenav-section-link rg">Themes</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100027951"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027951-what-can-be-changed-">What can be changed? </a> </li> <li class="sidenav-article " id="sidenav-article-2100027952"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027952-home-page-options-">Home page options </a> </li> <li class="sidenav-article " id="sidenav-article-2100027953"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027953-terms-of-service">Terms of Service</a> </li> <li class="sidenav-article " id="sidenav-article-2100027954"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027954-themes-compatibility">Themes compatibility</a> </li> <li class="sidenav-article " id="sidenav-article-2100027955"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027955-how-themes-affect-content-">How themes affect content?</a> </li> <li class="sidenav-article " id="sidenav-article-2100027956"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027956-multilingual-support">Multilingual support</a> </li> </ul> </li> <li class="sidenav-section " id="sidenav-section-2100029642"> <a class="sidenav-section__link js-sidenav-section-link rg">Services</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100027957"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027957-branding-service-faq">Branding service FAQ</a> </li> <li class="sidenav-article " id="sidenav-article-2100027958"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027958-customization-service-faq-">Customization service FAQ </a> </li> <li class="sidenav-article " id="sidenav-article-2100027959"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027959-installation-service-faq">Installation service FAQ</a> </li> </ul> </li> </ul> </li> <li class="sidenav-category " id="sidenav-category-2100019035"> <a class="sidenav-category__link js-sidenav-category-link rf">Purchasing Questions</a> <ul class="sidenav-sections"> <li class="sidenav-section " id="sidenav-section-2100029656"> <a class="sidenav-section__link js-sidenav-section-link rg">Before the purchase</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100028021"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028021-refund-policy">Refund policy</a> </li> <li class="sidenav-article " id="sidenav-article-2100028022"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028022-immediate-access-to-the-template">Immediate access to the template</a> </li> <li class="sidenav-article " id="sidenav-article-2100028023"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028023-demo-support-portals">Demo support portals</a> </li> </ul> </li> <li class="sidenav-section " id="sidenav-section-2100029657"> <a class="sidenav-section__link js-sidenav-section-link rg">Purchasing process</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100028024"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028024-payments-">Payments </a> </li> <li class="sidenav-article " id="sidenav-article-2100028025"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028025-payments-security">Payments security</a> </li> </ul> </li> </ul> </li> <li class="sidenav-category " id="sidenav-category-2100019036"> <a class="sidenav-category__link js-sidenav-category-link rf">Troubleshooting</a> <ul class="sidenav-sections"> <li class="sidenav-section " id="sidenav-section-2100029658"> <a class="sidenav-section__link js-sidenav-section-link rg">Payment & Purchase Troubleshooting</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100028026"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028026-wrong-email-address">Wrong email address</a> </li> <li class="sidenav-article " id="sidenav-article-2100028027"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028027-download-link-is-broken">Download link is broken</a> </li> <li class="sidenav-article " id="sidenav-article-2100028028"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028028-download-link-is-not-received">Download link is not received</a> </li> <li class="sidenav-article " id="sidenav-article-2100028029"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028029-card-was-overcharged">Card was overcharged</a> </li> <li class="sidenav-article " id="sidenav-article-2100028030"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028030-you-ve-purchased-the-wrong-theme">You’ve purchased the wrong theme</a> </li> </ul> </li> <li class="sidenav-section " id="sidenav-section-2100029659"> <a class="sidenav-section__link js-sidenav-section-link rg">Theme Usage Troubleshooting</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100028031"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028031-template-files-are-lost">Template files are lost</a> </li> <li class="sidenav-article " id="sidenav-article-2100028032"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028032-a-bug-is-found-">A bug is found </a> </li> </ul> </li> </ul> </li> <li class="sidenav-category is-active" id="sidenav-category-2100019034"> <a class="sidenav-category__link js-sidenav-category-link rf">Usage Guides</a> <ul class="sidenav-sections"> <li class="sidenav-section " id="sidenav-section-2100029653"> <a class="sidenav-section__link js-sidenav-section-link rg">Technical guides</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100027999"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100027999-theme-installation-">Theme installation </a> </li> <li class="sidenav-article " id="sidenav-article-2100041995"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100041995-images-and-icons-requirements">Images and icons requirements</a> </li> <li class="sidenav-article " id="sidenav-article-2100044048"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100044048-alerts-extension-how-to-add-alerts-to-a-freshdesk-theme">Alerts extension: How to add alerts to a Freshdesk theme</a> </li> <li class="sidenav-article " id="sidenav-article-2100051678"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100051678-alerts-extension-how-to-add-alerts-to-a-freshservice-theme">Alerts extension: How to add alerts to a Freshservice theme</a> </li> <li class="sidenav-article " id="sidenav-article-2100051880"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100051880-how-to-change-the-background-image-of-the-search-area">How to change the background image of the search area</a> </li> </ul> </li> <li class="sidenav-section is-active" id="sidenav-section-2100029654"> <a class="sidenav-section__link js-sidenav-section-link rg">Formatting Content</a> <ul class="sidenav-articles"> <li class="sidenav-article " id="sidenav-article-2100041997"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100041997-how-to-use-the-formatting-content">How to use the Formatting content</a> </li> <li class="sidenav-article is-active" id="sidenav-article-2100028000"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028000-formatting-content-">Formatting content </a> </li> <li class="sidenav-article " id="sidenav-article-2100028001"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028001-accordions">Accordions</a> </li> <li class="sidenav-article " id="sidenav-article-2100028002"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028002-codes">Codes</a> </li> <li class="sidenav-article " id="sidenav-article-2100028003"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028003-callout-blocks">Callout blocks</a> </li> <li class="sidenav-article " id="sidenav-article-2100028004"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028004-description-lists">Description lists</a> </li> <li class="sidenav-article " id="sidenav-article-2100028005"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028005-font-awesome-icons">Font Awesome icons</a> </li> <li class="sidenav-article " id="sidenav-article-2100028006"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028006-font-sizes">Font sizes</a> </li> <li class="sidenav-article " id="sidenav-article-2100028009"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028009-images">Images</a> </li> <li class="sidenav-article " id="sidenav-article-2100028010"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028010-links">Links</a> </li> <li class="sidenav-article " id="sidenav-article-2100028011"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028011-lists">Lists</a> </li> <li class="sidenav-article " id="sidenav-article-2100028012"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028012-tables">Tables</a> </li> <li class="sidenav-article " id="sidenav-article-2100028016"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028016-tabs">Tabs</a> </li> <li class="sidenav-article " id="sidenav-article-2100028017"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028017-text-styles">Text styles</a> </li> <li class="sidenav-article " id="sidenav-article-2100028018"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028018-quotes">Quotes</a> </li> <li class="sidenav-article " id="sidenav-article-2100028019"> <a class="sidenav-article__link js-sidenav-article-link rh" href="/support/solutions/articles/2100028019-videos">Videos</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> <a class="btn m sidebar-toggle js-sidebar-toggle" href="#"><i class="fa ri" aria-hidden="true"></i> Open navigation</a> </div> <div class="column column--sm-8"> <article class="ms clearfix" itemscope itemtype="http://schema.org/Article"> <header class="rj"> <h1 class="mt" itemprop="name"> Formatting content </h1> <div class="mu"> <div class="mv rk"> <div class="ls"> <div class="rl"> <b class="rm"> Jeffrey Davis </b> <div class="hw">Modified on: Mon, 10 Apr, 2023 at 11:14 AM</div> </div> </div> </div> </div> </header> <div class="article__body rn" itemprop="articleBody"> <h2>Table of content</h2><ul><li><a href="#fontsize" rel="noreferrer noopener">Font sizes</a></li><li><a href="#textstyle" rel="noreferrer noopener">Text styles</a></li><li><a href="#codes" rel="noreferrer noopener">Codes</a></li><li><a href="#blockquotes" rel="noreferrer noopener">Quote</a></li><li><a href="#description" rel="noreferrer noopener">Descriptions</a></li><li><a href="#lists" rel="noreferrer noopener">Lists</a></li><li><a href="#link" rel="noreferrer noopener">Links</a></li><li><a href="#tables" rel="noreferrer noopener">Tables</a></li><li><a href="#callouts" rel="noreferrer noopener">Callout blocks</a></li><li><a href="#images" rel="noreferrer noopener">Images</a></li><li><a href="#videos" rel="noreferrer noopener">Videos</a></li><li><a href="#accordions" rel="noreferrer noopener">Accordions</a></li><li><a href="#tabs" rel="noreferrer noopener">Tabs</a></li><li><a href="#fastyle" rel="noreferrer noopener">Font Awesome</a></li></ul><hr><div id="fontsize"><h2>Font sizes</h2><h1>This is a Freshdesk Heading 1</h1><h2>This is a Freshdesk Heading 2</h2><h3>This is a Freshdesk Heading 3</h3><h4>This is a Freshdesk Heading 4</h4><p>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.</p><p><a href="/support/solutions/articles/2100028006-font-sizes" rel="noreferrer noopener" target="_blank">Learn how to use font sizes.</a></p></div><hr><div id="textstyle"><h2>Text styles</h2><p><em>This is italic font-style</em></p><p><strong>This is bold font-style</strong></p><p><u>This is your underlined text</u></p><p>This text is <del>deleted</del></p><p>This is <span class="text-primary">an important marked text</span></p><p>This is <span class="text-info">an important blue text</span></p><p>This is <span class="text-warning">an important yellow text</span></p><p>This is <span class="text-danger">an important red text</span></p><p class="fr-text-gray">Gray paragraph style</p><p class="fr-text-bordered">Bordered paragraph style</p><p class="fr-text-spaced">Spaced paragraph style</p><p class="fr-text-uppercase">Uppercased paragraph style</p><p style="text-align: left;">Left aligned text</p><p style="text-align: center;">Center aligned text</p><p style="text-align: right;">Right aligned text</p><p><a href="/support/solutions/articles/2100028017-text-styles" rel="noreferrer noopener" target="_blank">Learn how to use text styles.</a></p></div><hr><div id="codes"><h2>Codes</h2><p>This is how a code looks like:</p><pre contenteditable="false" data-code-brush="html" rel="highlighter"><!DOCTYPE HTML> <html>  <head>   <meta charset="utf-8">   <title>HTML</title>  </head>  <body>   <p>Lorem ipsum dolor sit amet. </p>  </body> </html></pre><p><a href="/support/solutions/articles/2100028002-codes" rel="noreferrer noopener" target="_blank">Learn how to use code styles.</a></p></div><hr><div id="blockquotes"><h2>Quotes</h2><h3>Quote by default</h3><blockquote>"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?"</blockquote><h3>Colored quote</h3><blockquote class="is-colored">"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?"</blockquote><p><a href="/support/solutions/articles/2100028018-quotes" rel="noreferrer noopener" target="_blank">Learn how to use quotes styles.</a></p></div><hr><div id="description"><h2>Description lists</h2><h3>Default description list</h3><dl><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd></dl><h3>Horizontal description list</h3><dl class="dl-horizontal"><dt>Description lists</dt><dd>Such description list is perfect for defining terms.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd></dl><p><a href="/support/solutions/articles/2100028004-description-lists" rel="noreferrer noopener" target="_blank">Learn how to use description  lists.</a></p></div><hr><div id="lists"><h2>Lists</h2><h3>Bullet/unordered list</h3><ul><li>bullet list one</li><li>bullet list two</li><li>bullet list three</li><li>bullet list four                            <ul><li>enclosed element one</li><li>enclosed element two</li></ul></li></ul><h3>Bullet colored list</h3><ul class="list-bullet"><li>bullet list one</li><li>bullet list two</li><li>bullet list three</li><li>bullet list four</li></ul><h3>Ordered list</h3><ol><li>bullet list one</li><li>bullet list two</li><li>bullet list three</li><li>bullet list four                            <ol><li>enclosed element one</li><li>enclosed element two</li></ol></li></ol><h3>Ordered list with colored numbers</h3><p>This type of lists is a great way to display content with longer, step-by-step instructions, descriptions, etc.</p><ol class="list-colored"><li>Mix flour, cinnamon, salt and starch in a bowl.</li><li>Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little  and  increase in volume.</li><li>Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous   mass.</li><li>Peel the apples and cut them into small cubes.</li><li>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.                             <ol class="list-colored"><li>Mix flour, cinnamon, salt and starch in a bowl.</li><li>Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a  little  and increase in volume.</li><li>Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a  homogeneous  mass.</li><li>Peel the apples and cut them into small cubes.</li><li>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.</li></ol></li></ol><p><a href="/support/solutions/articles/2100028011-lists" rel="noreferrer noopener" target="_blank">Learn how to use lists.</a></p></div><hr><div id="link"><h2>Links</h2><h3>Link by default</h3><p><a href="https://www.breezythemes.com/" rel="noreferrer noopener" target="_blank">This is a simple link. Click me!</a></p><h3>Button link</h3><p><a class="btn btn--primary" href="https://www.breezythemes.com" rel="noreferrer noopener" target="_blank">Click me too!</a></p><p><a href="/support/solutions/articles/2100028010-links" rel="noreferrer noopener" target="_blank">Learn how to use links.</a></p></div><hr><div id="tables"><h2>Tables</h2><h3>Generic Table</h3><table class="table"><thead><tr><th>Month<br></th><th>Savings<br></th></tr></thead><tfoot><tr><td>Sum<br></td><td>$270<br></td></tr></tfoot><tbody><tr><td>January<br></td><td>$100<br></td></tr><tr><td>February<br></td><td>$80<br></td></tr><tr><td>March<br></td><td>$90<br></td></tr></tbody></table><h3>Color Header table</h3><table class="table-color-header"><thead><tr><th>Month<br></th><th>Savings<br></th></tr></thead><tfoot><tr><td>Sum<br></td><td>$270<br></td></tr></tfoot><tbody><tr><td>January<br></td><td>$100<br></td></tr><tr><td>February<br></td><td>$80<br></td></tr><tr><td>March<br></td><td>$90<br></td></tr></tbody></table><h3>Dashed table</h3><table class="fr-dashed-borders"><thead><tr><th>Month<br></th><th>Savings<br></th></tr></thead><tbody><tr><td>January<br></td><td>$100<br></td></tr><tr><td>February<br></td><td>$80<br></td></tr><tr><td>March<br></td><td>$90<br></td></tr><tr><td>Sum<br></td><td>$270<br></td></tr></tbody></table><h3>Striped table</h3><table class="fr-alternate-rows"><thead><tr><th>Month<br></th><th>Savings<br></th></tr></thead><tbody><tr><td>January<br></td><td>$100<br></td></tr><tr><td>February<br></td><td>$80<br></td></tr><tr><td>March<br></td><td>$90<br></td></tr><tr><td>Sum<br></td><td>$270<br></td></tr></tbody></table><h3>No bordered table</h3><table class="fr-no-borders"><thead><tr><th>Month<br></th><th>Savings<br></th></tr></thead><tbody><tr><td>January<br></td><td>$100<br></td></tr><tr><td>February<br></td><td>$80<br></td></tr><tr><td>March<br></td><td>$90<br></td></tr><tr><td>Sum<br></td><td>$270<br></td></tr></tbody></table><h3>Hover-colored table</h3><table class="table-hover"><thead><tr><th>Month<br></th><th>Savings<br></th></tr></thead><tbody><tr><td>January<br></td><td>$100<br></td></tr><tr><td>February<br></td><td>$80<br></td></tr><tr><td>March<br></td><td>$90<br></td></tr><tr><td>Sum<br></td><td>$270<br></td></tr></tbody></table><p><a href="/support/solutions/articles/2100028012-tables" rel="noreferrer noopener" target="_blank">Learn how to use tables.</a></p></div><hr><div id="callouts"><h2>Callout blocks</h2><h3>Simple notes</h3><div class="note note--default"><h4 class="note-title">Default</h4><p>This is a default block</p></div><div class="note note--info"><h4 class="note-title">Info</h4><p>This is an info block</p></div><div class="note note--warning"><h4 class="note-title">Warning</h4><p>This is a warning block</p></div><div class="note note--success"><h4 class="note-title">Success</h4><p>This is a success block</p></div><div class="note note--danger"><h4 class="note-title">Danger</h4><p>This is a danger block</p></div><h3>Callout block by default</h3><div class="callout"><h4 class="callout__title">This is a callout</h4><p>I'm a gray callout!</p></div><p><em> With dashed border:</em></p><div class="callout callout--dashed"><h4 class="callout__title">This is a callout</h4><p>I'm a gray callout!</p></div><h3>Transparent callout</h3><div class="callout callout--transparent"><h4 class="callout__title">This is a transparent callout</h4><p>I'm a transparent callout!</p></div><p><em> With dashed border:</em></p><div class="callout callout--transparent callout--dashed"><h4 class="callout__title">This is a callout</h4><p>I'm a transparent callout!</p></div><h3>Success callout</h3><div class="callout callout--success"><h4 class="callout__title">This is a success callout</h4><p>I'm a success callout!</p></div><p><em> With dashed border:</em></p><div class="callout callout--success callout--dashed"><h4 class="callout__title">This is a success callout</h4><p>I'm a success callout!</p></div><h3>Info callout</h3><div class="callout callout--info"><h4 class="callout__title">This is an info callout</h4><p>I'm a neutral info callout!</p></div><p><em> With dashed border:</em></p><div class="callout callout--info callout--dashed"><h4 class="callout__title">This is an info callout</h4><p>I'm a neutral info callout!</p></div><h3>Warning-callout</h3><div class="callout callout--warning"><h4 class="callout__title">This is a warning callout</h4><p>And now I'm going to tell you something very important! Pay attention to me!</p></div><p><em> With dashed border:</em></p><div class="callout callout--warning callout--dashed"><h4 class="callout__title">This is a warning callout</h4><p>I'm a warning callout with a dashed border!</p></div><h3>Caution callout</h3><div class="callout callout--danger"><h4 class="callout__title">This is a caution callout</h4><p>And here there's some critical information you have to know!</p></div><p><em> With dashed border:</em></p><div class="callout callout--danger callout--dashed"><h4 class="callout__title">This is a caution callout</h4><p>I'm a caution callout with a dashed border!</p></div><h3>The callout in the primary color</h3><div class="callout callout--primary"><h4 class="callout__title">This is a callout</h4><p>I'm a callout in the primary color</p></div><p><em> With dashed border:</em></p><div class="callout callout--primary callout--dashed"><h4 class="callout__title">This is a callout</h4><p>I'm a callout in primary color with a dashed border!</p></div><h3>Callout blocks with the Font Awesome icons</h3><p>It is possible to combine your callouts with Font Awesome icons:</p><div class="callout"><h4 class="callout__title"><em class="fa fa-send-o"> </em> Subscribe icon</h4><p>This is callout with the icon</p></div><div class="callout"><h4 class="callout__title"><em class="fa fa-lock"> </em> Lock icon</h4><p>This is callout with the icon</p></div><div class="callout"><h4 class="callout__title"><em class="fa fa-phone"> </em> Phone icon</h4><p>This is callout with the icon</p></div><div class="callout"><h4 class="callout__title"><em class="fa fa-clock-o"> </em> Clock icon</h4><p>This is callout with the icon</p></div><div class="callout"><h4 class="callout__title"><em class="fa fa-file"> </em> File icon</h4><p>This is callout with the icon</p></div><div class="callout"><h4 class="callout__title"><em class="fa fa-smile-o"> </em> Smile icon</h4><p>This is callout with the icon</p></div><div class="callout"><h4 class="callout__title"><em class="fa fa-magic"> </em> Magic icon</h4><p>This is callout with the icon</p></div><h3>Combine colors and icons!</h3><div class="callout callout--success"><h4 class="callout__title"><em class="fa fa-smile-o"> </em> Smile icon</h4><p>This is callout with the icon</p></div><div class="callout callout--warning"><h4 class="callout__title"><em class="fa fa-magic"> </em> Magic icon</h4><p>This is callout with the icon</p></div><p><a href="/support/solutions/articles/2100028003-Callout-blocks" rel="noreferrer noopener" target="_blank">Learn how to use callouts.</a></p></div><hr><div id="images"><h2>Images</h2><p>By default, images don't have any borders:</p><p><img src="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097" class="fr-dii" data-filelink="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097" data-fileid="2103729394" data-uniquekey="1516728082374"></p><p>But if you want they can be framed:</p><p><img class="image-with-border fr-dii fr-bordered" src="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097" data-attachment_id="2103729394" data-title="5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg" data-image="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097"></p><p>Or they can have a shadow:</p><p><img class="image-with-shadow fr-dii" src="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097" data-attachment_id="2103729394" data-title="5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg" data-image="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097"></p><p>Or they can even have overlay:</p><p class="image-overlay"><img src="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097" class="fr-dii" data-attachment_id="2103729394" data-title="5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg" data-image="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103729394/original/5aaatc0Q8X6jHwtinKvHdzb_Htvi969W3Q.jpg?1516728097"></p><h3><br></h3><h3>Border-radius</h3><h3><br></h3><img class="fr-dib fr-rounded" src="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2101803470/original/4fi3AGdDcMHU11bbFGRwd4mrbEMq3q8Dpg.jpg?1499772464" data-fileid="2101599199" data-attachment_id="2101803470" data-title="4fi3AGdDcMHU11bbFGRwd4mrbEMq3q8Dpg.jpg" data-image="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2101803470/original/4fi3AGdDcMHU11bbFGRwd4mrbEMq3q8Dpg.jpg?1499772464" style="width: 200px; height: 200px;"><h3> </h3></div><hr><div id="videos"><h2>Videos</h2><div class="embed"><span class="fr-video fr-fvc fr-dvi fr-draggable"><iframe src="https://player.vimeo.com/video/206627186?badge=0" allowfullscreen="" sandbox="allow-scripts allow-forms allow-same-origin allow-presentation" class="fr-draggable" width="640" height="274" frameborder="0"></iframe></span></div><h3>Video in a lightbox:</h3><p><a class="image-with-video-icon" href="https://www.youtube.com/watch?v=KtsAGqo-V18" rel="noreferrer noopener"><img src="https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/2103720622/original/cmwQywbEqVZzno7bXWbRl-ObdvZlNiBaeA.png" class="fr-dii"></a></p><p><a href="/support/solutions/articles/2100028019-videos" rel="noreferrer noopener" target="_blank">Learn how to use videos.</a></p></div><hr><div id="accordions"><h2>Accordions</h2><p>Accordions are useful when you need to toggle between hiding and showing a large amount of content:</p><div class="accordion accordion--default"><div class="accordion__item"><div class="accordion__item-title"><strong>Accordion item</strong></div><div class="accordion__item-content"><p>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.</p></div></div><div class="accordion__item"><div class="accordion__item-title"><strong>Accordion item</strong></div><div class="accordion__item-content">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.</div></div><div class="accordion__item"><div class="accordion__item-title"><strong>Accordion item</strong></div><div class="accordion__item-content">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.</div></div></div><h4>One more accordion type:</h4><div class="accordion accordion--colored"><div class="accordion__item"><div class="accordion__item-title"><strong>Accordion item</strong></div><div class="accordion__item-content">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.</div></div><div class="accordion__item"><div class="accordion__item-title"><strong>Accordion item</strong></div><div class="accordion__item-content">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.</div></div><div class="accordion__item"><div class="accordion__item-title"><strong>Accordion item</strong></div><div class="accordion__item-content">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.</div></div></div><p><a href="/support/solutions/articles/2100028001-accordions" rel="noreferrer noopener" target="_blank">Learn how to use accordions.</a></p></div><hr><div id="tabs"><h2>Tabs</h2><p>Tabs are perfect for displaying different subjects in your article!</p><h3>Tabs style by default:</h3><div class="tabs"><div class="tabs-menu"><span class="tabs-link is-active">Tab 1</span> <span class="tabs-link">Tab 2</span></div><div class="tab">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.</div><div class="tab is-hidden">Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed  lectus.  Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa  mattis sem, at interdum  magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae;  Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In  vel mi sit amet augue congue elementum. Morbi  in ipsum sit amet pede facilisis laoreet. Donec lacus  nunc, viverra nec, blandit vel, egestas et, augue.  Vestibulum tincidunt malesuada tellus.</div></div><h3>Colored style:</h3><div class="tabs tabs--colored-1"><div class="tabs-menu"><span class="tabs-link is-active">Tab 1</span> <span class="tabs-link">Tab 2</span> <span class="tabs-link">Tab 3</span></div><div class="tab">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.</div><div class="tab is-hidden">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque   laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae  vitae dicta  sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut  fugit, sed quia consequuntur  magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro  quisquam est, qui dolorem ipsum quia dolor  sit amet, consectetur, adipisci velit, sed quia non numquam  eius modi tempora incidunt ut labore et dolore magnam  aliquam quaerat voluptatem. Ut enim ad minima  veniam, quis nostrum exercitationem ullam corporis suscipit  laboriosam, nisi ut aliquid ex ea commodi  consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate  velit esse quam nihil molestiae  consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div><div class="tab is-hidden">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.</div></div><div class="tabs tabs--colored-2"><div class="tabs-menu"><span class="tabs-link is-active">Tab 1</span> <span class="tabs-link">Tab 2</span> <span class="tabs-link">Tab 3</span><span class="tabs-link">Tab 4</span></div><div class="tab">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.</div><div class="tab is-hidden">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque   laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae  vitae dicta  sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut  fugit, sed quia consequuntur  magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro  quisquam est, qui dolorem ipsum quia dolor  sit amet, consectetur, adipisci velit, sed quia non numquam  eius modi tempora incidunt ut labore et dolore magnam  aliquam quaerat voluptatem. Ut enim ad minima  veniam, quis nostrum exercitationem ullam corporis suscipit  laboriosam, nisi ut aliquid ex ea commodi  consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate  velit esse quam nihil molestiae  consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div><div class="tab is-hidden">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.</div><div class="tab is-hidden">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque   laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae  vitae dicta  sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut  fugit, sed quia consequuntur  magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro  quisquam est, qui dolorem ipsum quia dolor  sit amet, consectetur, adipisci velit, sed quia non numquam  eius modi tempora incidunt ut labore et dolore magnam  aliquam quaerat voluptatem. Ut enim ad minima  veniam, quis nostrum exercitationem ullam corporis suscipit  laboriosam, nisi ut aliquid ex ea commodi  consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate  velit esse quam nihil molestiae  consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div><p><a href="/support/solutions/articles/2100028016-tabs" rel="noreferrer noopener" target="_blank">Learn how to use tabs.</a></p></div><hr><div id="fastyle"><h2>Font Awesome icons</h2><p>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.</p><p>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 <a href="http://fontawesome.io/icons/" rel="noreferrer noopener" target="_blank">page</a>.</p><h3>Font Awesome inside the text</h3><p>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.</p><h3>Font Awesome titles</h3><p>Additionally, you can use any icons from Font Awesome library to make your titles more eye-catching.</p><h4><em class="fa fa-2x fa-motorcycle"> </em> Title with a motorcycle</h4><h4 class="wysiwyg-color-green120"><em class="fa fa-2x fa-calculator"> </em> Title with a calculator</h4><h4 class="wysiwyg-color-pink"><em class="fa fa-2x fa-binoculars"> </em> Title with binoculars</h4><h4 class="wysiwyg-color-red"><em class="fa fa-2x fa-heartbeat"> </em> Title with a heartbeat</h4><h4>And not only your titles:</h4><div class="fa fa-quote-left fa-3x fa-pull-left fa-border"><br></div><p>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.</p><p><br></p><h3>Animate them!</h3><div class="fa fa-spinner fa-spin fa-3x fa-fw"><br></div><div class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"><br></div><div class="fa fa-refresh fa-spin fa-3x fa-fw"><br></div><div class="fa fa-cog fa-spin fa-3x fa-fw"><br></div><div class="fa fa-venus fa-spin fa-3x fa-fw"><br></div><div class="fa fa-mars fa-spin fa-3x fa-fw"><br></div><div class="fa fa-firefox fa-spin fa-3x fa-fw"><br></div><div class="fa fa-opera fa-spin fa-3x fa-fw"><br></div><div class="fa fa-chrome fa-spin fa-3x fa-fw"><br></div><p><br></p><h3>And mix them:</h3><div style="text-align: center;"><div style="display: inline-block; margin-right: 20px;"><div class="fa-stack fa-lg"><div class="fa fa-square-o fa-stack-2x"><br></div><div class="fa fa-twitter fa-stack-1x"><br></div></div><p>fa-twitter and fa-square-o</p></div><div style="display: inline-block; margin-right: 20px;"><div class="fa-stack fa-lg"><div class="fa fa-circle fa-stack-2x"><br></div><div class="fa fa-flag fa-stack-1x fa-inverse"><br></div></div><p>fa-flag and fa-circle</p></div><div style="display: inline-block;"><div class="fa-stack fa-lg"><div class="fa fa-square fa-stack-2x"><br></div><div class="fa fa-terminal fa-stack-1x fa-inverse"><br></div></div><p>fa-terminal and fa-square</p></div></div><div style="text-align: left;"><a href="/support/solutions/articles/2100028005-font-awesome-icons" rel="noreferrer noopener" target="_blank">Learn how to use Font  Awesome.</a></div></div> </div> </article> <footer class="ro clearfix"> <p class="article-vote" id="voting-container" data-user-id="" data-article-id="2100028000" data-language="en"> Did you find it helpful?<span data-href="/support/solutions/articles/2100028000/thumbs_up" class="vote-up a-link" id="article_thumbs_up" data-remote="true" data-method="put" data-update="#voting-container" data-user-id="" data-article-id="2100028000" data-language="en" data-update-with-message="Glad we could be helpful. Thanks for the feedback."> Yes</span><span class="vote-down-container"><span data-href="/support/solutions/articles/2100028000/thumbs_down" class="vote-down a-link" id="article_thumbs_down" data-remote="true" data-method="put" data-update="#vote-feedback-form" data-user-id="" data-article-id="2100028000" data-language="en" data-hide-dom="#voting-container" data-show-dom="#vote-feedback-container"> No</span></span></p><a class="hide a-link" id="vote-feedback-form-link" data-hide-dom="#vote-feedback-form-link" data-show-dom="#vote-feedback-container">Send feedback</a><div id="vote-feedback-container"class="hide"> <div class="lead">Sorry we couldn't be helpful. Help us improve this article with your feedback.</div> <div id="vote-feedback-form"> <div class="sloading loading-small loading-block"></div> </div></div> </footer> <div class="prevnext"></div> </div> </div> </div> </div> </div> </div> <div class="ku"> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-md-2 copyright"> <p>© 2014—<script type="text/javascript"> document.write(new Date().getFullYear()); </script> Breezy Themes</p> <div class="partner-banner partner-banner--footer"> <img src="//cdn.shopify.com/s/files/1/1670/2687/t/13/assets/partner.png?5899297117823095619" alt=""> </div> <p><br>Freshworks is a trademark or registered trademark of Freshworks, Inc. in the United States and/or other countries. Breezy Themes for Freshdesk is not affiliated with Freshworks, Inc. or its subsidiaries.</p> </div> <div class="col-sm-2"> <h6 class="footer-menu__title">Services</h6> <ul class="list-unstyled footer-menu"> <li><a href="https://www.breezythemes.com/collections/freshdesk-themes" title="Themes collection" class="footer-menu__link ">Themes collection</a></li> <li><a href="https://www.breezythemes.com/products/freshdesk-themes-installation" title="Free installation" class="footer-menu__link ">Free installation</a></li> <li><a href="https://www.breezythemes.com/products/freshdesk-branding" title="Branding" class="footer-menu__link ">Branding</a></li> <li><a href="https://www.breezythemes.com/products/freshdesk-branding-and-customization" title="Customization" class="footer-menu__link ">Customization</a></li> <li><a href="https://www.breezythemes.com/products/default-template-customization" title="Default template customization" class="footer-menu__link ">Default template customization</a></li> <li><a href="https://www.breezythemes.com/products/multibrand-license" title="Multibrand License" class="footer-menu__link ">Multibrand License</a></li> <li><a href="https://www.breezythemes.com/collections/extensions" title="Extensions" class="footer-menu__link ">Extensions</a></li> </ul> </div> <div class="col-sm-2"> <h6 class="footer-menu__title">About</h6> <ul class="list-unstyled footer-menu"> <li><a href="https://www.breezythemes.com/pages/risk-free-buying" title="No risks" class="footer-menu__link ">No risks</a></li> <li><a href="https://www.breezythemes.com/pages/code-quality" title="Code quality" class="footer-menu__link ">Code quality</a></li> <li><a href="https://www.breezythemes.com/pages/a-support-service-you-will-like" title="Support service" class="footer-menu__link ">Support service</a></li> <li><a href="https://www.breezythemes.com/pages/a-brilliant-new-generation-service-made-for-you" title="How does it work?" class="footer-menu__link ">How does it work?</a></li> <li><a href="https://www.breezythemes.com/pages/what-makes-us-stand-out" title="What makes us stand out" class="footer-menu__link ">What makes us stand out</a></li> <li><a target="_blank" href="https://checkout.shopify.com/16702687/policies/30377995.html" title="Privacy Policy" class="footer-menu__link ">Privacy Policy</a></li> <li><a target="_blank" href="https://checkout.shopify.com/16702687/policies/30377931.html" title="Refund Policy" class="footer-menu__link ">Refund Policy</a></li> </ul> </div> <div class="col-sm-2"> <h6 class="footer-menu__title">Top Features</h6> <ul class="list-unstyled footer-menu"> <li><a href="https://www.breezythemes.com/pages/breezy-standard" title="Our Theme vs Standard" class="footer-menu__link " target="_blank">Our Theme vs Standard</a></li> <li><a href="https://www.breezythemes.com/pages/retina-ready-and-responsive" title="Retina-ready and Responsive " class="footer-menu__link " target="_blank">Retina-ready and Responsive </a></li> <li><a href="https://www.breezythemes.com/pages/brilliant-icons" title="Brilliant icons" class="footer-menu__link " target="_blank">Brilliant icons</a></li> <li><a href="https://www.breezythemes.com/pages/absolutely-any-font" title="Absolutely any font" class="footer-menu__link " target="_blank">Absolutely any font</a></li> <li><a href="https://www.breezythemes.com/pages/freshdesk-compatibility" title="Freshdesk compatibility" class="footer-menu__link " target="_blank">Freshdesk compatibility</a></li> <li><a href="https://www.breezythemes.com/pages/additional-formatting-components" title="Formatting components" class="footer-menu__link " target="_blank">Formatting components</a></li> <li><a href="https://www.breezythemes.com/pages/compatibility-with-every-browser" title="Cross browser compatibility" class="footer-menu__link " target="_blank">Cross browser compatibility</a></li> </ul> </div> <div class="col-sm-2"> <h6 class="footer-menu__title">Useful things</h6> <ul class="list-unstyled footer-menu"> <li><a href="https://www.breezythemes.com/blogs/blog" title="Blog" class="footer-menu__link " target="_blank">Blog</a></li> <li><a href="https://www.breezythemes.com/pages/case-studies" title="Case Studies" class="footer-menu__link " target="_blank">Case Studies</a></li> <li><a href="https://www.breezythemes.com/pages/popular-freshdesk-customizations" title="Popular customizations" class="footer-menu__link " target="_blank">Popular customizations</a></li> </ul> </div> <div class="col-sm-2 footer-menu"> <h6 class="footer-menu__title">Contacts</h6> <ul class="list-unstyled footer-menu"> <li><a target="_blank" href="https://breezythemes.freshdesk.com/support/home" title="Support Portal" class="footer-menu__link ">Support Portal</a></li> <li><a class="footer-menu__link" href="mailto:hello@breezythemes.com" data-ga-track-link="" data-ga-params="{"category": "Contact Form Button", "label": "Mailto" }">hello@breezythemes.com</a></li> <li><a href="https://www.breezythemes.com/pages/contact-us" title="Contact us" class="footer-menu__link ">Contact us</a></li> </ul> </div> </div> <div class="row"> <div class="col-xs-12"> <p class="payment-methods"><img src="https://cdn.shopify.com/s/files/1/1670/2687/t/47/assets/payment-methods@2x_1200x.png?v=13511694602051639502" data-retina="https://cdn.shopify.com/s/files/1/1670/2687/t/47/assets/payment-methods@2x_1200x.png?v=13511694602051639502" alt="Payment methods"></p> </div> </div> </div> </footer> </div> </div> <script src="//cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/jquery.magnific-popup.min.js"></script> <script src="//cdn.jsdelivr.net/highlight.js/9.10.0/highlight.min.js"></script> <script> (function($) { var BT_SETTINGS = { css: { activeClass: "is-active", hiddenClass: "is-hidden", visibleClass: "is-visible" } }; var Utils = { isHomepage: function() { return $("[data-home-page]").length > 0; } }; var $topbar = $("[data-topbar]"); var $heroUnit = $("[data-hero-unit]"); var $topSearchBar = $(".topbar__search .hc-search-form"); var $topSearchBarQuery = $topSearchBar.find("input.special"); var $topSearchBarBtn = $(".topbar__btn-search"); $topbar.removeClass(BT_SETTINGS.css.hiddenClass); $("[data-toggle-menu]").click(function() { $(this).toggleClass(BT_SETTINGS.css.activeClass); $("[data-menu]").toggle(); $('.topbar__nav').toggleClass('topbar__nav--filled'); }); $(".image-with-lightbox").magnificPopup({ type: "image", closeOnContentClick: true, closeBtnInside: false, fixedContentPos: true, mainClass: "mfp-with-zoom", // class to remove default margin from left and right side image: { verticalFit: true }, zoom: { enabled: true, duration: 300 // don't foget to change the duration also in CSS } }); $(".image-with-video-icon").magnificPopup({ disableOn: 700, type: "iframe", mainClass: "mfp-fade", removalDelay: 160, preloader: false, fixedContentPos: false }); $(".accordion__item-title").on("click", function() { var $title = $(this); $title.toggleClass("accordion__item-title--active"); $title .parents(".accordion__item") .find(".accordion__item-content") .slideToggle(); }); $(".tabs-link").click(function(e) { e.preventDefault(); var $link = $(this); var tabIndex = $link.index(); var $tab = $link.parents(".tabs").find(".tab").eq(tabIndex); $link .addClass(BT_SETTINGS.css.activeClass) .siblings() .removeClass(BT_SETTINGS.css.activeClass); $tab .removeClass(BT_SETTINGS.css.hiddenClass) .siblings(".tab") .addClass(BT_SETTINGS.css.hiddenClass); }); $topSearchBarBtn.click(function() { $(this).addClass(BT_SETTINGS.css.hiddenClass); $topSearchBar.addClass(BT_SETTINGS.css.visibleClass); $topSearchBarQuery.focus(); }); $(document).mouseup(function(e) { if (!$topSearchBarQuery.is(e.target)) { $topSearchBar.removeClass(BT_SETTINGS.css.visibleClass); $topSearchBarBtn.removeClass(BT_SETTINGS.css.hiddenClass); } }); // Fix animated icons $(".fa-spin").empty(); $(window).on('scroll resize', function() { var scrolled = $(window).scrollTop(); var $topbarNav = $('.topbar__nav'); if (scrolled > $topbarNav.outerHeight()) { $topbarNav.addClass('topbar__nav--white'); } else { $topbarNav.removeClass('topbar__nav--white'); } }); $('.topbar__search input.special').attr('placeholder', 'Search'); $('<div />', { class:'sidebar-overlay' }).appendTo('body'); $(document).on('click', '.js-sidenav-category-link', function (e) { e.preventDefault(); var $categoryItem = $(this).parents('.sidenav-category'); $categoryItem.toggleClass('is-active').siblings().removeClass('is-active'); }); $(document).on('click', '.js-sidenav-section-link', function (e) { e.preventDefault(); var $categoryItem = $(this).parents('.sidenav-section'); $categoryItem.toggleClass('is-active').siblings().removeClass('is-active'); }); var $sidebarToggle = $(".js-sidebar-toggle, .sidebar-overlay"); $sidebarToggle.on("click", function() { $("body").toggleClass("sidenav-open"); $(".side-nav").toggleClass("show"); $(".sidebar-overlay").toggleClass("active"); }); var $currentArticle = $('.sidenav-article.is-active'); var $currentArticlePrev = $currentArticle.prev(); var $currentArticleNext = $currentArticle.next(); var $prevNextWrapper = $('.prevnext'); if($currentArticlePrev.length > 0) { var $prevLink = $currentArticlePrev.find('a'); var prevLinkURL = $prevLink.attr('href'); var prevLinkTitle = $prevLink.text(); var prevEl = "<div class=\"prevnext__block prevnext__block--prev\">"; prevEl += "<a href=\"" + prevLinkURL + "\" class=\"btn btn--primary prevnext__link\">"; prevEl += "<i class=\"prevnext__arrow-left fa fa-angle-left\" aria-hidden=\"true\"></i>Prev</a>"; prevEl += "<span class=\"prevnext__title\">" + prevLinkTitle + "</span>"; prevEl += '</div>'; $prevNextWrapper.prepend(prevEl); } if($currentArticleNext.length > 0) { var $nextLink = $currentArticleNext.find('a'); var nextLinkURL = $nextLink.attr('href'); var nextLinkTitle = $nextLink.text(); var nextEl = "<div class=\"prevnext__block prevnext__block--next\">"; nextEl += "<span class=\"prevnext__title\">" + nextLinkTitle + "</span>"; nextEl += "<a href=\"" + nextLinkURL + "\" class=\"btn btn--primary prevnext__link\">Next"; nextEl += "<i class=\"prevnext__arrow-right fa fa-angle-right\" aria-hidden=\"true\"></i></a>"; nextEl += '</div>'; $prevNextWrapper.append(nextEl); } hljs.initHighlightingOnLoad(); })(jQuery); </script> <script src="https://breezythemes.s3-us-west-2.amazonaws.com/case-form.js?v=4"></script> <script src="https://assets7.freshdesk.com/assets/cdn/portal_bottom-34a98e1f6e4a2d6122e54625f7eba21c503bf0939cb4dc65326f10aa37467e4f.js"></script> <script src="https://assets5.freshdesk.com/assets/cdn/redactor-10a54c9b6ce9a442c8a2e6a131947e0d106a4af7c5b98360494520fc5245be28.js"></script> <script src="https://assets9.freshdesk.com/assets/cdn/lang/en-4a75f878b88f0e355c2d9c4c8856e16e0e8e74807c9787aaba7ef13f18c8d691.js"></script>  <script src="https://assets3.freshdesk.com/assets/cdn/i18n/portal/en-89d70c1cfc14e8bfd1100be59d517490352cdbdeb82858862f30e630a2a10c2a.js"></script>  <script> //<![CDATA[ jQuery(document).ready(function() { // Setting the locale for moment js moment.lang('en'); var validation_meassages = {"required":"This field is required.","remote":"Please fix this field.","email":"Please enter a valid email address.","url":"Please enter a valid URL.","date":"Please enter a valid date.","dateISO":"Please enter a valid date ( ISO ).","number":"Please enter a valid number.","digits":"Please enter only digits.","creditcard":"Please enter a valid credit card number.","equalTo":"Please enter the same value again.","two_decimal_place_warning":"Value cannot have more than 2 decimal digits","select2_minimum_limit":"Please type %{char_count} or more letters","select2_maximum_limit":"You can only select %{limit} %{container}","maxlength":"Please enter no more than {0} characters.","minlength":"Please enter at least {0} characters.","rangelength":"Please enter a value between {0} and {1} characters long.","range":"Please enter a value between {0} and {1}.","max":"Please enter a value less than or equal to {0}.","min":"Please enter a value greater than or equal to {0}.","select2_maximum_limit_jq":"You can only select {0} {1}","facebook_limit_exceed":"Your Facebook reply was over 8000 characters. You'll have to be more clever.","messenger_limit_exceeded":"Oops! You have exceeded Messenger Platform's character limit. Please modify your response.","not_equal_to":"This element should not be equal to","email_address_invalid":"One or more email addresses are invalid.","twitter_limit_exceed":"Oops! You have exceeded Twitter's character limit. You'll have to modify your response.","password_does_not_match":"The passwords don't match. Please try again.","valid_hours":"Please enter a valid hours.","reply_limit_exceed":"Your reply was over 2000 characters. You'll have to be more clever.","url_format":"Invalid URL format","url_without_slash":"Please enter a valid URL without '/'","link_back_url":"Please enter a valid linkback URL","requester_validation":"Please enter a valid requester details or <a href=\"#\" id=\"add_requester_btn_proxy\">add new requester.</a>","agent_validation":"Please enter valid agent details","email_or_phone":"Please enter a Email or Phone Number","upload_mb_limit":"Upload exceeds the available 15MB limit","invalid_image":"Invalid image format","atleast_one_role":"At least one role is required for the agent","invalid_time":"Invalid time.","remote_fail":"Remote validation failed","trim_spaces":"Auto trim of leading & trailing whitespace","hex_color_invalid":"Please enter a valid hex color value.","name_duplication":"The name already exists.","invalid_value":"Invalid value","invalid_regex":"Invalid Regular Expression","same_folder":"Cannot move to the same folder.","maxlength_255":"Please enter less than 255 characters","decimal_digit_valid":"Value cannot have more than 2 decimal digits","atleast_one_field":"Please fill at least {0} of these fields.","atleast_one_portal":"Select atleast one portal.","custom_header":"Please type custom header in the format - header : value","same_password":"Should be same as Password","select2_no_match":"No matching %{container} found","integration_no_match":"no matching data...","time":"Please enter a valid time","valid_contact":"Please add a valid contact","field_invalid":"This field is invalid","select_atleast_one":"Select at least one option."} jQuery.extend(jQuery.validator.messages, validation_meassages ); jQuery(".call_duration").each(function () { var format,time; if (jQuery(this).data("time") === undefined) { return; } if(jQuery(this).hasClass('freshcaller')){ return; } time = jQuery(this).data("time"); if (time>=3600) { format = "hh:mm:ss"; } else { format = "mm:ss"; } jQuery(this).html(time.toTime(format)); }); }); // Shortcuts variables var Shortcuts = {"global":{"help":"?","save":"mod+return","cancel":"esc","search":"/","status_dialog":"mod+alt+return","save_cuctomization":"mod+shift+s"},"app_nav":{"dashboard":"g d","tickets":"g t","social":"g e","solutions":"g s","forums":"g f","customers":"g c","reports":"g r","admin":"g a","ticket_new":"g n","compose_email":"g m"},"pagination":{"previous":"alt+left","next":"alt+right","alt_previous":"j","alt_next":"k"},"ticket_list":{"ticket_show":"return","select":"x","select_all":"shift+x","search_view":"v","show_description":"space","unwatch":"w","delete":"#","pickup":"@","spam":"!","close":"~","silent_close":"alt+shift+`","undo":"z","reply":"r","forward":"f","add_note":"n","scenario":"s"},"ticket_detail":{"toggle_watcher":"w","reply":"r","forward":"f","add_note":"n","close":"~","silent_close":"alt+shift+`","add_time":"m","spam":"!","delete":"#","show_activities_toggle":"}","properties":"p","expand":"]","undo":"z","select_watcher":"shift+w","go_to_next":["j","down"],"go_to_previous":["k","up"],"scenario":"s","pickup":"@","collaboration":"d"},"social_stream":{"search":"s","go_to_next":["j","down"],"go_to_previous":["k","up"],"open_stream":["space","return"],"close":"esc","reply":"r","retweet":"shift+r"},"portal_customizations":{"preview":"mod+shift+p"},"discussions":{"toggle_following":"w","add_follower":"shift+w","reply_topic":"r"}}; // Date formats var DATE_FORMATS = {"non_us":{"moment_date_with_week":"ddd, D MMM, YYYY","datepicker":"d M, yy","datepicker_escaped":"d M yy","datepicker_full_date":"D, d M, yy","mediumDate":"d MMM, yyyy"},"us":{"moment_date_with_week":"ddd, MMM D, YYYY","datepicker":"M d, yy","datepicker_escaped":"M d yy","datepicker_full_date":"D, M d, yy","mediumDate":"MMM d, yyyy"}}; var lang = { loadingText: "Please Wait...", viewAllTickets: "View all tickets" }; //]]> </script> <img src='/support/solutions/articles/2100028000-formatting-content-/hit' alt='Article views count' aria-hidden='true'/> <script type="text/javascript"> I18n.defaultLocale = "en"; I18n.locale = "en"; </script> </body> </html>

CINXE.COM

Formatting content : Breezy Themes