Anatomy of an Item Tile

This article covers the basic building blocks of an Uberflip Hub Item Tile.

There are many variations to a tile, but each is made up of the same parts. Any aspect of a tile can be overridden (in terms of styling) using the Custom CSS feature.

How to read the markup and diagram:

The markup is a simplified HTML tree of a tile. The diagram illustrates the building blocks of a tile, with corresponding line numbers to the markup.

Any markup in italics denotes markup that doesn’t always exist for each tile.

Any bold tags denote that the tag isn’t always the same (i.e. sometimes the <li> tag is a <div>).

And any [variables] in square brackets denote, well you guessed it, a variable :)

Let’s go through it line by line.

1. this is the main container of a tile. Depending on where it lives within a Hub, this container can either be an <li> or a <div> but either case both look exactly the same.
   
   The variable in the class list [item-service] is what you would expect - the service type of the Item - i.e. instagram, facebook, blogpost, youtube, etc. There are other classes which may be included that will get covered later on.
   
   ​​The standard dimensions of a tile are 250 pixels wide by 330 pixels high. This varies under the following conditions:
   • when a tile is “Highlighted” (using the Lab feature “Highlight first Item”) then these dimensions roughly double to 520 pixels wide by 680 pixels high. The <li> (or <div>) will include a class “highlight” in this case.
   • on mobile, or more specifically on screens narrower than 560 pixels, the dimensions change to 100% wide by 370 pixels high.
      
2. When an Item is featured on the home of your Hub, the star icon will display, otherwise this markup will not be rendered.
    
3. If an Item has a thumbnail to display, the image container will be rendered. the <li> (or <div>) will also include a class “with-img”, otherwise a class “no-img”. The image container’s height is standardized for the most part at roughly 41% of the total height of the tile. Here are the exceptions:
   • Instagram tiles have the image set 56% since they are always square (it’s more than 50% because the image itself is scaled larger than the width of the tile to account for any Instagram borders applied)
   • Flipbooks (which confusingly have an <li> class “uberflip”) have their image height set to 88% because they’re predominantly portrait document covers. That said when a Flipbook cover is landscape the default height (41%) is used.
4. For any video services (YouTube, Vimeo, Wistia, etc.) a play button displays overtop of the image.
    
5. This is the thumbnail image itself. Uberflip uses an image proxy to resize and scale images from around the web to a standard size of 500 pixels wide by 272 pixels high. This is to ensure we don’t overload your visitors with massive images when in most cases only a 250 pixel wide area is visible. For example if one of your blog posts was an infographic, and that infographic was the image our system automatically picked us as the “thumbnail”, imagine what would happen if we squeezed that infographic into a tile - a lot of wasted bandwidth, and a bad user experience in general. That said, not all images are passed through this image proxy:
   • YouTube, Vimeo, Slideshare, Instagram: All these services provide an already standardized thumbnail image through their API
   • Uberflip Flipbooks: the cover image is already returned in a suitable size (since we’re in control over this image)
6. Much like the play button, for any video tiles the duration of the video is displayed here.
    
7. The Description container. This is always present as every tile has some form of a description.
    
8. This container holds the friendly timestamp that represents the created or published date of the Item. This element is omitted when an Item is “featured” because a featured Item may have been created long ago and should not detract a visitor from clicking on a featured item.
    
9. The friendly timestamp is displayed as either “about x hours ago”, “a day ago”, “x days ago”, “about a month ago” or “x months ago”
    
10. Social avatar. This displays for any social Item tile such as Twitter, Facebook or Instagram. For all other types of tiles this element is omitted.
     
11. The title or heading of the Item is always displayed, however it served different purposes in different cases. For social tiles, where there is an avatar, this element is given the class “avatar” and is populated with the service’s user name. For example a Twitter account name (not the @handle). For non-social tiles, such as Blog Articles (blogpost), Videos (youtube, vimeo, wistiar, vidyard, etc.) or Docs (uberflip, slideshare) this is the title of the Item. The size in which it displays, both for social and non-social, depends on whether or not there’s an image for this tile (which as we learned from line 3, the <li> (or <div>) main container will include a class “no-img”.
    
    You should also note that this element is not always a <h3> - it may be a <div>. This is for SEO purposes depending on where tiles are displayed in a Hub.  Regardless, this element will always have the class “h3like” so that it can share styling.
     
12. The subtitle (Item description or social update) element, <h4>, is not always displayed. For social tiles, this represents the tweet, facebook update or first comment on an instagram photo. In those cases this element always displays. But like the title, its size is determined by whether or not an image exists for the tile. For non-social items, the subtitle or description may not display for the following reasons:
    • there is no description! Most Flipbooks (unless given a description manually) will not have a description.
    • The tile includes an image, and the title is longer than 30 characters. In this case the element renders, but is hidden by default. The <h4> will include a class “long-h3” in this case. With custom CSS you can easily override this behaviour and show the element.
       
13. The share icons that display over top of the tile on hover (when the share option is enabled) is a set of elements that we won't dive deeply into here. The styling of these share buttons can however be altered just like any other element of a Tile.
     
14. The footer of each tile, and also its main call-to-action, always displays. It is the container in which the Item’s service Icon, actionable label and arrow display, and is the main link to the content of this Item. The service icon is set as a background on this element, and is targeted by the main container <li> (or <div>) having the service name as a class value (i.e. <li class=”tile ... twitter”>)
     
15. Using CSS magic, this element creates a fading effect for the description should it bleed below the start of the footer.
     
16. This element holds the Verb and Noun for this title (i.e. “Read Article”). Each of these can be customized in the application under Appearance > Custom Labels.
     
17. This is how the arrow or chevron on the right of each tile’s footer is rendered.
     
18. You may notice that more than just the tile’s footer is a link. This additional link element is positioned over the entire tile, making the whole area of a tile actionable.

Examples and notes

Okay. Now that you've got the basic knowledge of how an Item Tile is created, let's see how you can modify its appearance with a set of examples. These examples will not focus on best CSS practices - you know those already!

Example 1: Round the corners of your tiles

li.tile.single, div.tile.single{
   border-radius:5px;
}

This will round the corners of ALL tiles. Notice we covered our bases by include by <li> and <div> declarations. While you can get away with just ".tile.single" you're better off being as specific as possible. That said, for future examples we'll omit this to simplify the example.

And, of course you'll want to add the -moz and -webkit variants for border-radius. You should note that this will also round the corners of your CTAs. If for any reason you didn't want that, you can do this:

.tile.single:not(.cta){
   border-radius:5px;
}

Now let's say you wanted to round the corners of your Twitter tiles even more (i.e. 25px)

.tile.single.twitter{
   border-radius:25px;
}

Example 2: Hide the footer of all tiles

Not everyone loves the bottom of the tiles that read "Read Article" or "View Tweet" - you can get rid of the footer easily:

.tile.single > a.item-link.view{
   display:none;
}

Note this will also hide the fading effect for when the description bleeds since it lives within this element.

Example 3: Change the footer service icon

Not loving the little icons at the left of the footer for each service? Maybe you want your standard video icon instead of Wistia's logo. Easy fix:

.tile.single.wistiar > a.item-link.view{
  background:transparent url(http://yoursite.com/your-icon.png) 3px 5px no-repeat;
}

That may need some tweaking based on the size of your icon and the desired look, but you should get the idea. 
A special note about Wistia's service tag. For reasons not worth explaining, the service tag for Wistia is wistiar with an "r" on the end. 

About the Author

Yoav's the CEO and Founder at Uberflip. When not busy driving the vision and mission behind the world's most marketer-friendly content management platform, he's busy tinkering with front-end code...

Follow on Twitter More Content by Yoav Schwartz