Introducing the <span> tag
An Inline Element
The span tag is an inline element. This means that a new line is not forced when wrapping content with this tag. In contrary, tags like <div>, <p>, <h1>, <h2> and others are block tags and they force the content onto another line. For that reason, when your objective is to style text mid paragraph, the <span> tag is your friend.
Adding Classes
Adding a class is as simnple as declaring the class name inside a declaration: class="name-of-class"
Code
<span class="bold">This text is bold.</span>Output
This text is bold.Multiple Classes
You can even declare multiple classes to combine effects. Simply separate them with spaces: class="name-of-class another-class"
Code
<span class="bold italic">This text is bold and italic.</span>Output
This text is bold and italic.Custom Classes
We have provided a number of custom classes for customizing text. Below are the class names, what they do, and examples:
Font Size Classes
Font size classes range from 10px - 50px (even numbers only) and follow a similar pattern: font-size-#
font-size-10
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="font-size-10">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.font-size-26
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="font-size-26">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.font-size-38
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="font-size-38">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.Font Color Classes
Sets the text color to the associated color. See the styleguide for color references
color-primary
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="color-primary">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.color-secondary
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="color-secondary">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.color-tertiary
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="color-tertiary">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.Text Decoration Classes
Sets the text color to the associated color. See the styleguide for color references
bold
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="bold">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.italic
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="italic">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.underline
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="underline">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.Font Family Classes
Sets the text color to the associated color. See the styleguide for color references
font-primary
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="font-primary">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.font-secondary
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="font-secondary">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Output
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.Combining Classes
Classes can be combined to create dramatic effects