---
tags: typography
title: Trix content styles
description: "Rich text content styling for Trix editor output with proper formatting and spacing."
---

%p.mb-md All RTF styles are scoped to the .trix-content prefix.
.trix-content
  %h1 This is a heading level 1
  %h2 This is a heading level 2
  %h3 This is a heading level 3
  %h4 This is a heading level 4
  %h5 Heading level 5
  %h6 Heading level 6
  %hr
  %h3 Emphasis
  %strong This is bold text
  %p
    %strong This is bold text wrapped in an paragraph
  %p
    %em This is emphasized text
  %p
    %s Strikethrough
  %hr
  %h3 Links
  %a{href:"http://test.io"} Text of link
  %br
  %a{href:"http://test.io"}
    Link with 
    %em em
    inside
  %br
  %em
    em with 
    %a{href:"http://test.io"} www.link.com
    inside
  %hr
  %h3 Blockquotes
  %blockquote
    %p Here's a block quote by a famous Test IO employee
  %blockquote
    %p Blockquotes can also be nested
    %blockquote
      %p Blockquotes can also be nested
      %blockquote
        %p Blockquotes can also be nested
  %h3 Lists
  %h4 Unordered
  %ul
    %li Unordered list item
    %li Unordered list item with much more text and some serious lorem ipsum
    %li Another unordered list item
  %ul
    %li Unordered list item
    %li Unordered list item with much more text and some serious lorem ipsum
    %li
      %p Nesting lists is never a good idea, but should look nice anyway.  
      %ul
        %li Unordered nested list item
        %li Unordered nested list item with much more text and some serious lorem ipsum
        %li
          %p Another level of nesting because why be constrained by reason? 
          %ul
            %li Unordered nested list item
            %li Unordered nested list item with much more text and some serious lorem ipsum
            %li Another nested unordered list item
    %li
      %p Let's nest an ordered OL just for fun
      %ol
        %li Ordered nested list item
        %li Ordered nested list item with much more text and some serious lorem ipsum
        %li Another ordered list item
  %h4 Ordered
  %ol
    %li Ordered list item
    %li Ordered list item with much more text and some serious lorem ipsum
    %li Another ordered list item
  %ol
    %li Ordered list item
    %li Ordered list item with much more text and some serious lorem ipsum
    %li
      %p Nobody is save from nesting lists!
      %ol
        %li Ordered nested list item
        %li Ordered nested list item with much more text and some serious lorem ipsum
        %li
          %p Won't ever stop nesting!
          %ol
            %li Ordered nested list item
            %li Ordered nested list item with much more text and some serious lorem ipsum
            %li Another nested Ordered list item
    %li
      %p Nesting is fun, so let's ignore reason and put in more sublists
      %ul
        %li Unordered nested list item
        %li Unordered nested list item with much more text and some serious lorem ipsum
        %li
          %p Multiverse nesting fun!
          %ul
            %li Unordered nested list item
            %li Unordered nested list item with much more text and some serious lorem ipsum
            %li Another nested unordered list item
  %hr
  %h3 Code
  %p
    Inline
    %code code
  %p Block code
  %pre
    %code
      :plain
        Sample text here...
  %p Syntax highlighting
  %pre
    %code.language-js
      :plain
        var foo = function (bar) {
          return bar++;
        };
        console.log(foo(5));
  %h3 Horizontal Rules
  %hr
  %h3 Tables
  %table
    %thead
      %tr
        %th Option
        %th Description
    %tbody
      %tr
        %td data
        %td path to data files to supply the data that will be passed into templates.
      %tr
        %td engine
        %td engine to be used for processing templates. Handlebars is the default.
      %tr
        %td ext
        %td extension to be used for dest files.