Cargo 3 Docs
Basics
Site Building
Domains
Text Styles
Text is styled using Text Styles. Most Design Lab sites come with four predefined styles: Bodycopy, Heading 1, Heading 2, and Caption, but there is no limit to how many text styles can be added.
By default, text on a page is styled according to the Bodycopy text style. To use a different style, select the text and click on the Text Style name in the top menu bar. To edit or add Text Styles, open the Text Style menu (the “Aa” icon in the right menu bar): here you can change font properties as well as edit, duplicate, and delete styles. To add or edit properties that are not part of the interface, click on the "</>" icon at the bottom.
Text Options
It’s possible to change certain text properties locally without making changes to the text style itself: select some text and open the Text Options menu (the “Tt” icon in the top menu bar). Here you can specify basic formatting like Bold, Italic, etc., as well as color, font scale, and line height.
Lists
To format text as a Bulleted List, a Numbered List, or Lineated, select the text and open the Lists menu (the bulleted list icon in the top menu bar). The Lineated option indents a line of text when it soft-breaks, as is often seen in poetry. To change the properties of these list options, open the CSS menu (the “</>” icon at the bottom of Site Settings) and search for ol, ul, or ul.lineated.
Effects
The Text Styles menu also offers a number of “Effects” that can be applied, like Border and Drop Shadow. Find these in the More Options menu when editing a text style (it is not possible to apply these to Bodycopy). Additional Effects can be applied locally: select some text and open the Effects menu (in the top menu bar) — Rotation, Border, Drop Shadow, Blink, Eyeroll, Draggable. Learn about these Effects here.
Buttons
Cargo comes with a variety of pre-made button styles: open the “Add...” menu, go to More..., and choose Button... These Button styles function as a kind of shortcut for what can be done manually as well, by adding Borders, Background, Color, etc. to text. When making a button with text already selected, the button style will copy the Text Style that the selected text is part of. If a button is added without text selected, the Bodycopy Text Style is copied for the new button style.
Adding fonts
To learn how to add new fonts to Cargo, see this page.
Samples & Specimens
The Design Lab contains a section called Samples & Specimens, where you can find many different font styles and text layout ideas which you can copy-paste directly into your site for use as inspiration and/or starting points.
Mobile Settings
It’s possible to change the font size and color of the different Text Styles on mobile: go into Mobile Preview (the phone icon in the top menu bar) and choose the Text Style you want to change (the keyboard shortcut for toggling Mobile Preview is ⇧⌘X).