The variety of possible changes is really amazing, you will be surprised how many of them we have for you. Just take a look! This article contains visual components samples that are included in our themes with explanations how you can use it to extend your Help Center 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 Zendesk huge size or Header 2
This is a Zendesk large size or Header 3
This is a Zendesk medium size or Header 4
This is a header 5
Small size
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.
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
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>
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
- bullet list one
- bullet list two
- bullet list three
- bullet list four
- enclosed element one
- enclosed element two
Links
Link by default
This is a simple link. Click me!
Button link
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 |
Bordered table
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
Striped table
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
Hover-colored table
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
Callout blocks
Callout block by default
This is a success callout
I'm a success callout!
This is a success callout
I'm a success callout!
This is a success callout
I'm a success callout!
This is a callout
I'm a gray callout!
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 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 dashed border!
Callout in primary color
This is a callout
I'm a callout in primary color
With dashed border:
This is a callout
I'm a callout in primary color with 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
Images
By default, images don't have any borders:
But if you want they can be framed:
Or they can have shadow:
Or they can even have overlay:
Image Lightbox
It's possible to open a larger version of the image in the lightbox:
Videos
Video in a lightbox:
Accordions
Accordions are useful when you need to toggle between hiding and showing large amount of 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.
One more accordion type:
Tabs
Tabs are perfect for displaying different subjects in your article!
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 Help Center (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 Help Center . Font Awesome is completely free for commercial use . The icons are vector, which means they're gorgeous on high-resolution displays . It is very easy to make your own design by changing 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
Learn how to use Font Awesome.
Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe Here's a really fancy quote. Can you believe what they say this about us?
OLD Tables
| Month | Savings |
|---|---|
| Sum | $270 |
| January | $100 |
| February | $80 |
| March | $90 |
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
HOVER
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
STRIPED
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
BORDER
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
COLORED
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
- Lorem ipsum dolor sit amet consectetur?
- Lorem ipsum
underline
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
- Lorem ipsum dolor sit amet consectetur?
- Lorem ipsum
background
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
- Lorem ipsum dolor sit amet consectetur?
RTE
- m ipsum dolor sit amet consectetur adipisicing elit. Libero, illo
- m ipsum dolor sit amet consectetur adipisicing elit
- m ipsum dolor sit amet consectetur adipisicing elit. Libero, illom ipsum dolor sit amet consectetur adipisicing elit. Libero, illo
- m ipsum dolor sit amet consectetur adipisicing elit. Libero, illo
Â
task list
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.Â
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.Â
Â
File lists
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.Â
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
Anchor lists
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.Â
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
Dashed lists
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
- Lorem ipsum dolor sit amet consectetur adipisicing elit.Â
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, illo.
Slider
Â
Â
Copy to clip board
Here comes the inline code block
Â
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet. </p> </body> </html>
Â
# The Greeter class
class Greeter
def initialize(name)
@name = name.capitalize
end
def salute
puts "Hello #{@name}!"
end
end
g = Greeter.new("world")
g.saluteLorem ipsum dolor sit amet.
Â
Magnifier
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
JS-ACCORDIONS DEFAULT
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
- Lorem ipsum dolor sit amet consectetur?
- Lorem ipsum
NEUTRAL
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
- Lorem ipsum dolor sit amet consectetur?
- 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.
STROKE
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
- Lorem ipsum dolor sit amet consectetur?
- 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.
MIX
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, deleniti?
- Lorem ipsum dolor sit amet consectetur?
- 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.
Â
Comments
Please sign in to leave a comment.