30 #Visibility Visibility

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Hide classes

-sf-hidden, -sf-invisible, -sf-transparent

.-sf-hidden
.-sf-invisible
.-sf-transparent
Html
    <div class="-sf-hidden">.-sf-hidden</div>
    <div class="-sf-invisible">.-sf-invisible</div>
    <div class="-sf-transparent">.-sf-transparent</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-img-fit-cover

Html
    <div style="width: 200px; height: 300px"><img src="https://d117h1jjiq768j.cloudfront.net/images/default-source/company-section/yogesh_gupta-11-16-16.png"  alt="" class="-sf-img-fit-cover"></div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-absolute, -sf-relative

Absolute position
Relative position
Static position
Html
    <div class="-sf-absolute">Absolute position</div>
    <div class="-sf-relative">Relative position</div>
    <div class="-sf-static">Static position</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-rotate-90, sf-rotate--90, sf-rotate-180

Rotate 90deg
Rotate -90deg
Rotate 180deg
Html
    <div class="-sf-rotate-90">Rotate 90deg</div>
    <div class="-sf-rotate--90">Rotate -90deg</div>
    <div class="-sf-rotate-180">Rotate 180deg</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-visually-hidden

This text is visually hidden but accessible to screen readers
Html
    <div class="-sf-visually-hidden">This text is visually hidden but accessible to screen readers</div>