Text Styles
For information on usage and functionality, please see the Text Styles post in Slab.
Headings
H1
First in importance on the page.
H2
Second in importance on the page.
H3
Third in importance on the page.
H4
Fourth in importance on the page.
Body Text
Style Name | Appearance | Usage Notes |
---|---|---|
text-bold-caps | Sample text using text-bold-caps | Use for uppercase bold lettering. |
text-small | Sample text using text-small | Use for text that is 80% smaller than the default font. |
text-small-fancy | Sample text using text-small-fancy | Use for text that is 80% smaller, serif, and italic. |
text-fancy | Sample text using text-fancy | Use for text that is serif, and italic. |
text-large | Sample text using text-large | Use for text that is 118% larger than the default font. |
text-large-fancy | Sample text using text-large-fancy | Use for text that is 118% larger, serif, and italic. |
text-xl | Sample text using text-xl | Use for text that is 145% larger than the default font. |
text-xl-fancy | Sample text using text-xl-fancy | Use for text that is 145% larger, serif, and italic. |
Div Styles
div-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
div-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
Pull Quotes
Pull Quote Full
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
This is my testimonial in a full width pull quote. Here is another line of text.
Pull Quote Right Half / Pull Quote Right Third
This is my testimonial in a right-aligned pull quote that takes up half the width of the copy/text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
This is my testimonial in a right-aligned pull quote that takes up a third of the width of the copy/text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis\ ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
Pull Quote Left Half / Pull Quote Left Third
This is my testimonial in a left-aligned pull quote that takes up half the width of the copy/text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
This is my testimonial in a left-aligned pull quote that takes up a third of the width of the copy/text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ac turpis vel consectetur. Ut vitae iaculis\ ligula. Etiam vehicula, justo ac tincidunt varius, magna ligula ultrices metus, eu lacinia diam metus sit amet nisi. Aliquam id suscipit nunc, nec placerat ipsum. Sed quis arcu nec risus pharetra tempor.
Pull quote highlight
This testimonial has a highlighted line. After adding the proper pull quote style, select the text to be highlighted and add the span.quoteHighlight option from the Styles dropdown.