Dimmer

Dimmers can be used to display content on top of elements on hover.

[dimmer] shortcode arguments
image:
The url to the image.
alt:
Image alt.
dimmer:
Dimmer classes.
Dimmer
Dimmer content
Dimmer image
Dimmer content
Dimmer image
<dimmer image="/avatars/1s.png">Dimmer content</dimmer>
<dimmer image="/avatars/2s.png" dimmer="inverted">Dimmer content</dimmer>
Circular inverted dimmer
Dimmer image
<dimmer small circular image="/avatars/3s.png" dimmer="inverted">
  <icon large twitter url="//twitter.com">
  <icon large facebook url="//facebook.com">
</dimmer>
Rounded corners dimmer
Lorem ipsum dolor

Lorem ipsum dolor sit amet.

Dimmer image
<dimmer medium rounded image="/avatars/4.png">
  <header inverted>Lorem ipsum dolor</header>
  <p>Lorem ipsum dolor sit amet.</p>
  <button>Click here</button>
</dimmer>
Blurring dimmer
Dimmer image
<dimmer blurring medium image="/avatars/5.png"></dimmer>
Segment dimmer
Title

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex. Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<segment dimmable>
  <dimmer>
    <header inverted>Title</header>
    <button primary>Add</button>
    <button>View</button>
  </dimmer>
  <lorem>
</segment>
Blurring segment inverted dimmer

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<segment small raised blue blurring dimmable>
  <dimmer inverted>
    <button primary>Read more</button>
  </dimmer>
  <lorem short>
</segment>

Leave a comment

Your email address will not be published. Required fields are marked *