CSS Test

This page provides examples of all styles used in Caplin's Developer subsite. This first paragraph is in the 'lead-in' style, which is 2px larger than standard body text. This is a legacy style used to format the introductory paragraph to the page. We stopped using it after repeatedly getting feedback that there was something 'wrong' with the font size in the first paragraph.

Subsequent paragraphs beneath the title and before the first level-2 heading are in standard body text style (16px).

Contents:

Example pages

While this page displays examples of all styles used on the Caplin website, it cannot provide examples of every permutation in which those styles are used. In reality, content does not conform to a neat model of identically sized paragraphs of Lorem Ipsum. Content is choppy: short paragraphs and lists, broken up by frequent headings.

The pages below provide good examples of real-world content:

Headings

This section demonstrates different uses of headings. Examples are shown of headings that precede both single and double paragraphs, and headings that precede other headings with no intervening paragraph.

Bold formatting has been used in the paragraphs below to provide a comparison with heading styling. Headings should always be more prominent than the text inside paragraphs.

Heading level 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac.

Heading level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac.

Heading level 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac.

Heading level 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Heading level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Heading level 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Heading level 2

Heading level 3

Heading level 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Simple lists

In a simple list, each list item comprises one block of content.

Simple lists are often short, and benefit from styling the list elements closer together (e.g. half-paragraph spacing). This helps present the list as a single unit, rather like a paragraph, but still maintains a distinction between items in the list.

Simple list:

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Simple list with a sublist:

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Simple list with longer text:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.

Complex lists

Complex lists contain multiple block elements in each list item, such as paragraphs, images, and code blocks.

Complex list items are commonly longer than in simple lists, and benefit from a different styling to simple lists. List items in complex lists should be styled with normal paragraph spacing between items, and half-paragraph spacing between the block elements in each list item. This helps distinguish list items from each other, while maintaining enough distance between blocks to distinguish them from each other.

Complex list:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis

    Nunc augue diam, imperdiet et augue eleifend, auctor tincidunt libero. Sed at fermentum odio. Nam mollis enim mollis, eleifend dui vel, condimentum metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

    Vestibulum bibendum, ipsum vitae auctor dictum, mi neque tempor magna, a volutpat felis nisl at orci. Quisque tristique vitae metus vel ultrices. Aenean vehicula maximus rhoncus. Quisque lacinia, libero quis auctor semper, nisi massa pretium purus, sit amet viverra nibh tortor ut risus.

  • Pellentesque luctus quam in sapien fringilla volutpat. Sed lacinia pharetra lacus eget imperdiet. In hac habitasse platea dictumst. Aliquam erat volutpat.

    SELECT
        exp_channels.`channel_id`,
        exp_channels.`channel_name`,
        exp_channels.`channel_title`,
        exp_channel_fields.`field_id`,
        exp_channel_fields.`field_name`
    FROM
        exp_channels INNER JOIN exp_channel_fields
            ON exp_channel_fields.`group_id` = exp_channels.`field_group`
    WHERE
        exp_channels.`channel_id`
    ORDER BY
        channel_id, field_id;
    

    Ut ac metus magna. Phasellus elementum tristique viverra. Maecenas aliquet arcu sagittis porttitor pretium. Maecenas nec lorem consequat, sodales ante varius, mollis augue. Nam eu eros ipsum. Quisque pretium dolor accumsan elit egestas, id ultricies velit cursus. Integer non magna porttitor, pellentesque lorem id, lacinia sapien.

  • Mauris molestie quam molestie, malesuada ipsum in, rutrum elit. Mauris laoreet lectus non purus venenatis venenatis. Aenean vitae orci id lacus lacinia pellentesque. Sed at aliquam risus. Nullam faucibus eleifend turpis sed malesuada. Donec tristique nisi eleifend placerat maximus. Vestibulum bibendum, ipsum vitae auctor dictum, mi neque tempor magna, a volutpat felis nisl at orci. Quisque tristique vitae metus vel ultrices. Aenean vehicula maximus rhoncus. 

    Sed egestas sodales purus porta pulvinar. In lacinia neque vitae gravida feugiat. Suspendisse accumsan purus et nibh ultricies lacinia. Ut tempor vehicula felis rutrum eleifend. Curabitur vel dolor in erat luctus cursus. Fusce vulputate velit augue, at elementum mi gravida in. Proin sit amet porta justo. Nunc suscipit dolor lorem, sed consequat quam sagittis at.

Mixed lists

Mixing list styles causes problems. As a rule, if any level of a list contains complex content, the whole list should be styled as a complex list.

Simple list with an complex sublist:

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet

      Lorem ipsum dolor sit amet

      Lorem ipsum dolor sit amet

    • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Complex list with a simple sublist:

  • Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Definition lists

Term one
Mauris molestie quam molestie, malesuada ipsum in, rutrum elit. Mauris laoreet lectus non purus venenatis venenatis. Aenean vitae orci id lacus lacinia pellentesque.
Term two
Mauris molestie quam molestie, malesuada ipsum in, rutrum elit. Mauris laoreet lectus non purus venenatis venenatis. Aenean vitae orci id lacus lacinia pellentesque.
Mauris molestie quam molestie, malesuada ipsum in, rutrum elit. Mauris laoreet lectus non purus venenatis venenatis. Aenean vitae orci id lacus lacinia pellentesque.
Term 3

Para 1

Para 2

Lists: bullets and numbering styles

Bullets and numbering styles for lists:

Bullets:

  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet

Numbers:

  1. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
      1. Lorem ipsum dolor sit amet

Media

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Admonitions (information boxes)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis.

This admonition does not have a prefix. It's rendered as a quotation on the static site, and is converted into a note on the current site (because many notes on the current site do not begin 'Note:').

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis.

Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis.

Tip: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis.

Important: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. 

Caution: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. 

Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis.

Preformatted blocks

There are two types of preformatted blocks in Caplin's website:

  • Standard: program output and configuration examples
  • Pretty-Printed: source code

Standard preformatted block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

# Single FX  Pricing source

add-peer
   remote-name  fxpriceadapter
   remote-label fxpriceadapter
   remote-type active
end-peer

add-data-service
   service-name fx-prices
   include-pattern ^/FX
   add-source-group
      required
      add-priority
         remote-label fxpriceadapter
      end-priority
   end-source-group
end-data-service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Pretty-printed preformatted block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

// Extend LoggerHandler
function MyLoggerHandler() {}
MyLoggerHandler.prototype = Object.create(caplinps.logging.activity.LoggerHandler.prototype);

// Override LoggerHandler.getLogMessage
MyLoggerHandler.prototype.getLogMessage = function(data) {
        return 'Action ' + data.action + ' performed'.
    };

// Instantiate MyLoggerHandler
var loggerHandler = new MyLoggerHandler();

// Register loggerHandler as the handler for the 'my-emitr-event-name' event
activityLog.register('my-emitr-event-name', loggerHandler);

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Tables

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Test caption
Column 1 Column 2 Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis ante eu mauris lacinia volutpat. Ut consectetur at arcu eget rhoncus. Quisque faucibus scelerisque lobortis. Aenean convallis egestas lobortis. Etiam at purus mauris. Curabitur eget lorem in arcu iaculis interdum sit amet vitae velit. Mauris lacinia fringilla nisi, sed vehicula nisi efficitur ac. Nam finibus odio et nulla molestie, ut varius nunc porttitor. Nam sed nisl orci. Etiam ut lorem at metus condimentum fringilla vitae a tellus.

Table with complex content
Heading Heading
One

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • One
  • Two
  • Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • One

    One.one

  • Two
  • Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

var a = 1;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Character styles

Bold: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Italic: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Bold + Italic: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Italic + Bold: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Strikeout: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Small text: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Code: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Code-emphasis: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Dialog-text: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Document-name: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Emphasis: Lorem ipsum dolor sit amet, consectetur adipiscing elit

File-name: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Small-text: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Term: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Term-as-link: Lorem ipsum dolor sit amet, consectetur adipiscing elit

To-do: Lorem ipsum dolor sit amet, consectetur adipiscing elit

User-input: Lorem ipsum dolor sit amet, consectetur adipiscing elit

Mixing styles

$ ./dfw deploy bladename

And link back to Tables for more information

Here is some code ./dfw deploy bladename to look at.

Links inside code

Lorem ipsum Links inside code dolor sit amet

Caplin

Caplin

Lots of formatting in a link