<%= @page_title %>

If you are going to use an image as an anchor, we got you covered. All you gotta do is wrap an a.th around your image and voilà!

---

Building With Predefined HTML Class

We make it really easy to create thumbnails links out of images. Simply wrap your <img> inside a <a class="th"> and you're good to go! You may alternately choose to add a class of .radius to give it a neat little border-radius.

<%= code_example ' ', :html %>

---

Build with our Mixins

We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the extension installed or grab _abstractio-global.scss, _global.scss and _thumbs.scss from Github and throw them into a Abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/labels"; ', :css %>

Quick Mixin

You can build your labels using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. You'll also have the ability to change the font-size and padding. The rest of the defaults can be modified using the available variables. The global mixin looks like this:

<%= code_example ' /* Using the default styles */ .your-class-name { @include thumb; }', :css %>

There are also three options you can customize on the fly when writing this mixin. These controls things like: border-width and hover styles for the box-shadow.

<%= code_example ' /* Using the available options */ .your-class-name { @include thumb($border-width, $box-shadow, $box-shadow-hover); } /* Control the width of the white area around the thumbnails */ $border-width: $thumb-border-width /* Control the default box-shadow that looks like a 1px border */ $box-shadow: $thumb-box-shadow /* Change up the style of that box-shadow on hover */ $box-shadow-hover: $thumb-box-shadow-hover ', :css %>

You can also add the radius and single-transition mixin on top of this to create even more versatility!

Default SCSS Variables

<%= code_example ' /* We use these to control border styles */ $thumb-border-style: solid; $thumb-border-width: 4px; $thumb-border-color: #fff; $thumb-box-shadow: 0 0 0 1px rgba(#000,.2); $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); /* Radius and transition speed for thumbs */ $thumb-radius: $global-radius; $thumb-transition-speed: 200ms;', :css %>