Info Circle
These highly customizable info circles can be used to display steps in a process, relative ideas to a topic, as well as an outline to a long thesis. In addition, they can be styled to fit just about any purpose or industry wherever there is a need for a pop of color and animation.
Customization Available:
- Item Type: Icon or Image
- CTA Link: None, to icon, in description (adds a button or text CTA), both
- Individual Item Background Type: Default, Color, Image
- Action to Display Content: Hover/click
- Animation of thumbnail: None, various styles
- Thumbnail Style: Circle, square, custom
- Info Area Icon/Image: Disable, simple, custom
- Info Circle Background: None, color, image
Tool Tips - Info Circle
- Use UABB Info Circle Module
- The info circle items cannot have text in the icon/image area unless the text is included in the image, all text should go in content area for that circle.
- It is not a good idea to put too much text in an info circle because it may get cut off on smaller screen sizes.
- In the case that there is a lot of text, perhaps use the info circle as an introduction to each concept with small descriptions, and then anchorlink each icon to the full description in a section below or on another page.
Info Circle 1
- Item Type: Icon
- CTA Link: None
- Individual Item Background Type: Default
- Action to Display Content: Hover
- Animation of thumbnail: Shake
- Thumbnail Style: Circle
- Info Area Icon/Image: Simple
- Info Circle Background: Color
Logo Design
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Print Design
Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Website Layout
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Brand Identity
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Photography
Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit.
I'm Raymundo Garcia Here's what I do
Info Circle 2
- Item Type: Icon
- CTA Link: None
- Individual Item Background Type: Default
- Action to Display Content: Hover
- Animation of thumbnail: Roll in
- Thumbnail Style: Custom (rounded edges)
- Info Area Icon/Image: Disable
- Info Circle Background: Image
Brainstorm
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Outline
Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Write
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Revise
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Publish
Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit.
Distribute
Vestibulum venenatis eleifend ante at bibendum. Sed varius vitae purus sit amet sollicitudin.
Info Circle 3
- Item Type: Image
- CTA Link: Button in description
- Individual Item Background Type: Image
- Action to Display Content: Hover
- Animation of thumbnail: None
- Thumbnail Style: Circle
- Info Area Icon/Image: Disable
- Info Circle Background: None
Info Circle 4
- Item Type: Image
- CTA Link: None
- Individual Item Background Type: Image
- Action to Display Content: Click
- Animation of thumbnail: Flip In Y
- Thumbnail Style: Circle
- Info Area Icon/Image: Disable
- Info Circle Background: None
Starters
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Desserts
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Salads
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Drinks
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Main Courses
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.