Spot

Content guide

This page documents the text styling and components available to use in the Biteable X Design System site.

This is the outline for this page. We’ll rarely use this block as we like to keep pages short.

We use markdown to render the pages in this documentation. Please refer to the markdown file under /docs/guide/README.md in the code repo for this site to see the syntax that created this page.

Text

Headings

Level 1 headings (aka <h1>) are reserved for the page title. H2s will be most used in the body of the document.

As a general rule if your document has more than 3 levels of headings it’s time to rethink your content design. That’s why H3, H4, H5, and H6 are all styled to look the same.

Styling

Emphasis (aka italics) is done with single asterisks or underscores. Strong emphasis (aka bold) uses double asterisks or underscores. Strikethrough uses two tildes like this.

This is an external link, here is an internal link, and here are some links as buttons:

This is a small button

This is a large button

Images

We created custom markdown for responsive images that takes multiple sources to cover the various screen sizes.

It needs work but if you resize your browser window you’ll see the below image swap out at various breakpoints.

This is the (required) image caption

Large image alt tag Medium image alt tag Small image alt tag

Please note:

  • You’ll need to create images for all three sizes
  • Append the correct classes to the image markdown
  • Image files should be exactly the width in the table below
  • The maxiumum image height is 960px
  • All files should be output at 2x
  • Please compress your files

Here’s a handy table for image dimensions:

Small Medium Large
Display width 320 640 960
File width 640 1280 1920
Class small medium large

You can also add browser chrome to your image by adding the chrome class.

This is the (required) image caption

Large image alt tag Medium image alt tag Small image alt tag

Tables

We use tables to present data. Avoid using large tables as they break on mobile (perhaps reformat the data).

Colons can be used to align columns.

Left aligned Center aligned Center aligned Right aligned
Left Row is number 1
Linke Zeile ist nummer 2
Vänster rad är nummer 3

Lists

Here’s an ordered list:

  1. First ordered list item
  2. Another item
  3. And another item

And now an unordered list:

  • Unordered list use dashes
  • Another item
  • And another item

Quotes

Prefix a blockquote with a greater-than sign (ie. >). This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Code

You can render code with our a Biteable-themed syntax highlighter.

<!-- HTML -->
<a class="link" href="/">
  <span>Home</span>
</a>
/* CSS */
.selector {
  property: value;
}
// Javascript
function SyntaxHighlights () {
  const s = "syntax highlighting";
  console.log(s);
  return `I love ${s}`
}
# Ruby
class Greeter
  def initialize(name)
    @name = name.capitalize
  end
end

The syntax highlighter supports Javascript, HTML, CSS and Ruby. More languages can be added.

Inline code has back-ticks around it. Inline code is only available in paragraphs and list items.

Rules

Create rules using three hyphens. Rules should be rare in our docs.


Call outs

Look at me

Take notice of me

Beware

I am dangerous

My title

This is a tip. It can be used to contain any kind of relevant content.

Custom tags

We can develop custom HTML tags that can be used to add advanced functionality. Here are some swatches:

Brigadier Blue
HEX 000A47
RGB 0,10,71
CMYK 100,100,0,60
Pantone 2765 C
Baron Von Teal
HEX 1DE9B6
RGB 29,233,182
CMYK 65,0,50,0
Pantone 333 C
Agent Cyan
HEX 18FFFF
RGB 24,255,255
CMYK 54,0,6,0
Pantone 305 C
Madam Yellow
HEX FFF500
RGB 255,245,0
CMYK 0,0,95,0
Pantone 102 C
Dame Tangerine
HEX FF5000
RGB 255,80,0
CMYK 0,65,100,0
Pantone 21 C
Pastor Pink
HEX FF96B4
RGB 255,150,180
CMYK 0,45,4,0
Pantone 210 C

Document updated time

The timestamp you see below was automatically generated from the git file update time.