This style guide page contains styles and components that are to be used throughout a website.
Lineto Brown Pro
700 - Bold
Lineto Brown Pro
400 - Normal
Lineto Brown Pro
300 - Light
Lineto Brown Pro
100 - Thin
Headings
Paragraph
Size: 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph Small
Size: 10px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident. This is a link.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident. This is a link.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat.
For code blocks, it needs to be formatted as blockquote with a CODE header. e.g. For more information on how this was implemented, go to the private Github project.
-- CODE language-kotlin --
java.lang.RuntimeException: Whoops!
at com.foo.mylib.RequestInterceptor.interceptRequest(RequestInterceptor.kt:5)
at com.foo.mylib.HttpClient.doGet(HttpClient.kt:9)
at com.foo.mylib.HttpClient.makeRequest(HttpClient.kt:5)
at com.foo.mylib.DownloadManager.downloadFile(DownloadManager.kt:5)
You don't need to close a block, the end of the blockquote does that for you. It needs to be in a single block though (so no gaps in the white line down the left hand side). You have to put new lines in a blockquote using shift-enter, otherwise it separates it into 2 blockquotes. When adding the header, it doesn’t handle it very well. I add a character (e.g. a), add the header and then put in a newline. Then return and remove the character on the first line. If you don’t do that way it separates the blockquote. It is a bit picky.
Current languages that are supported: ["json", "php", "python", "properties", "kotlin", "bash", "dockerfile", "nginx", "plaintext", "objectivec", "shell", "ruby", "yaml", "swift", "coffeescript", "css", "groovy", "go", "sql", "xml", "markdown", "dart", "apache", "ini", "http", "perl", "cs", "diff", "javascript", "java", "cpp", "makefile", "html, "gradle", "protobuf", "rust"]
For inline you need to wrap the code in placeholders. [CODE language-bash]go test -bench=.[/CODE]
You can leave out the language and it will default to plaintext. e.g. [CODE]Hello World!![/CODE]
This script has been added to the body tag on the blog template to open the Drift widget. Within the blog post, you would link the text and add # in place of the link.
<script>
$(document).ready(function () {
$(".blog-rich-text.w-richtext a[href='#']").attr('onclick', 'drift.api.startInteraction({ interactionId: 294212 });');
});
</script>
Indigo
#4949E4
Midnight
#000D47
Pacific
#37C2D9
Sunflower
#FFA300
Orchid
#A15FFF
Coral
#FF5A60
Batman 90
#212121
Batman 80
#323232
Batman 70
#4A4A4A
Batman 60
#636363
Batman 50
#7C7A7C
Batman 40
#959595
Batman 30
#AEAEAE
Batman 20
#C6C6C6
Batman 10
#E9E9E9
Batman 00
#F8F8F8