Formatting guide

On this page

Headings

Heading 1

The H1 heading size is equivalent to a title. Please don’t use it in a page. Use the title: frontmatter instead.

Heading 2

H2s are programmatically recorded to form the table of contents in the right-nav.

Heading 3

H3 is a nice, friendly heading without anything special.

Heading 4

H4 is good for making FAQs when you want the text a little bigger than its surrounding prose.

Heading 5

H5 is good for making FAQs when you want the text about the same size as the surrounding prose.

Text underline

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading with underline

Lists

  1. Item lorem ipsum dolor sit amet
  2. Item lorem ipsum dolor sit amet
    1. Item nested lorem ipsum dolor sit amet
    2. Item nested lorem ipsum dolor sit amet
  3. Item lorem ipsum dolor sit amet
    1. Item nested lorem ipsum dolor sit amet
    2. Item nested lorem ipsum dolor sit amet
    3. Item nested lorem ipsum dolor sit amet
  4. Item lorem ipsum dolor sit amet
  • Unordered list item
  • Unordered list item
  • Unordered list item
    • Subitem
    • Subitem
  • Unordered list item

Two columns list

Add {: .columns} before a list you want to divide into two columns.

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
1
Totally new here?

Not sure what to track or why? Check out Segment’s Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks.

2
Totally new here?

Not sure what to track or why? Check out Segment’s Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks.

3
Totally new here?

Not sure what to track or why? Check out Segment’s Analytics Academy to learn more about the wide world of analytics, including the what and why and some stories about beautiful stacks.

Table

Field Type Description
traits optional Object Free-form dictionary of traits of the user, like email or name. See the Traits field docs for a list of reserved trait names
userId optional/required String Unique identifier for the user in your database A userId or an anonymousId is required,See the Identities docs for more detail

Buttons

Primary button

Secondary button

Minimal Button

Error button

Link button

Button Modifiers

Expanded filled button

Reference Buttons

  • Regular - links to any external resource
  • Related - links to an internal docs page (note the variant="related" which adds the https://segment.com/docs path in the final build)
  • Double - side by side buttons (you can use both related and not)
  • Back/Next buttons
  • Three columns layout - created with flex utility

Code Blocks

Analytics.js, our Javascript library, is the most powerful way to track customer data from your website. If you’re just starting out, we recommend it over server-side libraries as the simplest installation for any website.

analytics.identify('user_123', {
  email: 'jane.kim@example.com',
  name: 'Jane Kim'
  }, {
  integrations: {
    'All': false,
    'Intercom': true,
    'Google Analytics': true,
  }
});

Code Blocks with tabs

JavaScript
HTML
CSS 
console.log('example');

<div id="example"></div>

#example { color: red; }

Notes

NOTE: Our browser and mobile libraries automatically use Anonymous IDs under the covers to keep track of users as they navigate around your website or app, so you don’t need to worry about them when using those libraries.

Server-side tracking

Server-side data management is when tag sends data into your web server, then your web server passes that data to the destination system/server. Find out more

Alerts

Info message.

This is a paragraph showing an information box with a blue information icon. Use this when providing useful details that help a reader understand what’s going on, but don’t require any immediate action.

This is a paragraph showing an information box with a green checkmark icon. Use this when providing helpful information to a reader that could make their lives better, but that isn’t required.

Warning message.

This is a paragraph showing an information box with an orange warning icon. Use these when you want to caution a reader about something that could have unintended, but not destructive, consequences.

Error message.

This is a paragraph showing an information box with a red hazard icon. Use this when warning a reader about destructive or non-reversible actions, like deleting a workspace or overwriting data. Don’t use this too frequently, or else it makes the readers worry!

FAQ

Server

Should I track client or server-side?

One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!

Should I track client or?

One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!

Read more
Should I track client?

One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!

Read more

Cloud Sources

What are cloud sources??

One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!

Read more
Should I track client?

One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!

Read more

This page was last modified: 08 Jan 2022

Further reading

Get started with Segment

Segment is the easiest way to integrate your websites & mobile apps data to over 300 analytics and growth tools.
or
Create free account

Was this page helpful?