CSS helper classes
Table of contents
Text color
Text color classes
Gray text
Red text
Orange text
Yellow text
Olive text
Green text
Teal text
Blue text
Violet text
Purple text
Pink text
Brown text
Muted text
Black text
White text
<p gray text>Gray text</p>
<p red text>Red text</p>
<p orange text>Orange text</p>
<p yellow text>Yellow text</p>
<p olive text>Olive text</p>
<p green text>Green text</p>
<p teal text>Teal text</p>
<p blue text>Blue text</p>
<p violet text>Violet text</p>
<p purple text>Purple text</p>
<p pink text>Pink text</p>
<p brown text>Brown text</p>
<p muted text>Muted text</p>
<p black text>Black text</p>
<segment inverted compact>
<p white text>White text</p>
</segment>
Text style
Text style classes
Bolding removed
Bolding added
Italic added
Bolding and italic added
Color, bolding and italic added
<p normal text>Bolding removed</p>
<p bold text>Bolding added</p>
<p italic text>Italic added</p>
<p bold italic text>Bolding and italic added</p>
<p red bold italic text>Color, bolding and italic added</p>
Attributes
Borderless class can remove borders.Borderless
Segment
Segment
<segment>Segment</segment>
<segment borderless>Segment</segment>
Paddingless class can remove padding.
Paddingless
Segment
Segment
<segment>Segment</segment>
<segment paddingless>Segment</segment>
Marginless class can remove margin.
Marginless
Text
Text after
Text
Text after
Text after
Text
Text after
<button>Button</button>
Text
Text after
<button marginless>Button</button>
Text
Text after
Shadowless class can remove text-shadow (useful in slides) and box-shadow.
Shadowless
Segment
Segment
<segment>Segment</segment>
<segment shadowless>Segment</segment>
Visibility
Visibility classes
Hidden text
Hidden on AMP pages only
Hidden on mobile breakpoint
Shown on mobile breakpoint
<div invisible>Hidden text</div>
<div amp-invisible>Hidden on AMP pages only</div>
<div amp-only>Shown only on AMP pages</div>
<div mobile-invisible>Hidden on mobile breakpoint</div>
<div mobile-only>Shown on mobile breakpoint</div>
Responsive visibility
Mobile
Mobile invisible
Mobile only
<segment>
<header>Mobile invisible</header>
<button mobile-invisible>Button</button>
</segment>
<segment>
<header>Mobile only</header>
<button lg-invisible sm-invisible tablet-invisible>Button</button>
</segment>
Tablet
Tablet invisible
Tablet only
<segment>
<header>Tablet invisible</header>
<button tablet-invisible>Button</button>
</segment>
<segment>
<header>Tablet only</header>
<button lg-invisible sm-invisible mobile-invisible>Button</button>
</segment>
Small screen
Small screen invisible
Small screen only
<segment>
<header>Small screen invisible</header>
<button sm-invisible>Button</button>
</segment>
<segment>
<header>Small screen only</header>
<button lg-invisible tablet-invisible mobile-invisible>Button</button>
</segment>
Large screen
Large screen invisible
Large screen only
<segment>
<header>Large screen invisible</header>
<button lg-invisible>Button</button>
</segment>
<segment>
<header>Large screen only</header>
<button sm-invisible tablet-invisible mobile-invisible>Button</button>
</segment>
Mobile alignment
Mobile text alignment
Left aligned text, mobile right aligned.
Center aligned text, mobile left aligned.
Right aligned text, mobile center aligned.
Center aligned text, mobile justified.
<grid equal width stackable>
<column left aligned mra>Left aligned text, mobile right aligned.</column>
<column center aligned mla>Center aligned text, mobile left aligned.</column>
<column right aligned mca>Right aligned text, mobile center aligned.</column>
<column center aligned mj>Center aligned text, mobile justified.</column>
</grid>
Notes
Mobile alignment classes allow to specify different alignment at mobile resolutions.Class name | Meaning |
---|---|
mla | mobile left aligned |
mca | mobile center aligned |
mra | mobile right aligned |
mj | mobile justfified |