• Support
  • Community Site
  • Login
617.471.4440
PaperThin Inc.
Web Content & Experience Management
  • Solutions

    Solutions That Drive Value

    Solutions By Category

    Solutions By Topic

    Solutions By Industry

    All Solutions

    Solutions That Drive Value

    • Web Content Management
    • Experience & Content Marketing
    • Website Optimization
    • Mobile & Responsive Design
    • IT Excellence
    • System Management & Development

    Solutions By Industry

    • Higher Education
    • Government
    • Healthcare
    • Associations
    • Legal
    • All Solutions
    • Solutions List
  • Product

    Product Offerings

    Features

    CommonSpot Cloud

    Cloud or On Premises

    Widget Gallery

    Product Offerings

    • CommonSpot CMS
    • Digital Marketing Engine
    • Marketing Optimization Tools
    • IT & Developer Tools
    • Cloud or On Premises
    • CommonSpot Cloud
    • Deployment Options
    • Widget Gallery

    Features For:

    • Marketers
    • Designers & Developers
    • Administrators
    • Content Contributors
    • All Features
    • Feature List
  • Services

    Services Overview

    CommonSpot Training

    Customer Support

    Professional Services

    World Class Services

    • CommonSpot Training
    • Customer Support
    • Professional Services
  • Customers

    Spotlight Customers

    Testimonials

    Our Customers

    • Spotlight Customers
    • Testimonials
  • Company

    About PaperThin

    Contact Us

    Directions

    Blog

    Videos & Webinars

    PaperThin Community

    About PaperThin

    • About Us
    • News
    • Employment
    • Contact Us
    • Directions

    PaperThin Resources

    • Blog
    • Videos & Webinars
    • PaperThin Community
  • Blog
  • Subscribe
  • Search
  • Login
Get Demo Subscribe

Icon Textblock Widget

Get Demo
  • Home
  •  Widget Gallery
  •  Icon Textblock Widget
Renders simple constructs with icon, title, text, and a link. Offering three icon layout variations: top, right or left. This widget uses the Font Awesome icon set.
Icon Textblock Screenshot

Icon Textblock on Background Image

Icon Texblock 2
Icon Texblock 3
Icon Textblock 4
Icon Textblock 5
Icon Counter Textblock 6
  • Overview
  • General Properties
  • Element Properties
  • Installation
  • Docs

This CommonSpot Widget, Icon Textblock, displays the Icon on top, then the title, an optional underline, and description text with an optional link rendered at the bottom. Using this widget on your homepage or landing pages will allow you to select and highlight your sites deeper content with a modern responsive style.

Bind this widget’s Generic Render Handler and Metadata Form to your own Custom Element content object or use the optional Example Global Custom Element. With many options, like selecting the number of Grid Columns for Large, Medium, Small and X-Small devices, and setting Color and/or Alignment for the Title and Description text, this widget can be configured to display your content with many different looks.

For developers, the element fields, Generic Render Handler file and included Cascading Style Sheet file can all be modified to fit your specific content’s custom display scenario.

The Icon Textblock Widget offers the following configurable properties via the Custom Metadata Form bound to the Generic Render Handler.

Layout & Card Properties (tab)

Icon Textblock Layout options: stacked, icon & title on same line, icon next to title and text or two column wrap (with icons in the middle)

Click here for details of the Card Properties tab that is shared by the Icon Textblock, Icon Textblock Counter and Image Textblock.

General Properties (tab)

   

  • Element
    • Background Color - select not set, plus the standard named colors. If browser supports it, the options display in the color identified.
    • Padding: top, right, bottom and left in pixels from 0 to 99 when choosing units option other than none.
  • Background Image - Option to select an image to use as a background.
  • Background Image Focal Point - (pick one of 9 options)
    •  top left, top middle, top right
    • center left, center middle, center right
    • bottom left, bottom center, bottom right
  • Columns:
    • Small Phone - 1 to 4 columns
    • Phone - 1 to 4 columns
    • Tablet - 1 to 4 columns
    • Desktop - 1 to 4 columns
    • Large Desktop - 1 to 4 columns
  • Gutter Margin - none, 15px, 30px, 45px, 60px

Icon Properties (tab)

  • Icon Style - plain option depicted above
  • Icon
    • Size - 12 sizes to choose from
    • Color - many colors to choose from

  • Icon Style - circle, rounded corners or square options have additional fields
  • Border Size - 1 to 5 pixels
  • Background Color - many colors to choose from
  • Border Color - many colors to choose from
  • Icon Inner Spacing - the amount of space in pixels between the inner icon and the colored background border

Text & Line Properties (tab)

  • Title
    • Tag - div, p, h1, h2, h3, h4, h5
    • Align - left, center right, inherit
    • Size - many options
    • Font Settings - Bold, Italic, Underline and Initial, Title, Upper and Lower case options
    • Color - many options including 'not set'
  • Subtitle
    • Show - yes or no (yes reveals additional options)T
    • Tag - div, p, h1, h2, h3, h4, h5
      • Align - left, center right, inherit
      • Size - many options
      • Font Settings - Bold, Italic, Underline and Initial, Title, Upper and Lower case options
      • Color - many options including 'not set'
  • Line
    • Show - yes or no (yes reveals additional options)
    • Align - left, center right, inherit
    • Size - many options
    • Color - many options including 'not set'
    • Style - 10% to 100% in increments of 10 This is the width of the line relative to the available space.
  • Description
    • Show - yes or no (yes reveals additional options)
    • Tag - p, div, blockquote, h2, h3, h4, h5
    • Align - left, center right, inherit
    • Size - many options
    • Font Settings - Bold, Italic, Underline and Initial, Title, Upper and Lower case options
    • Color - many options including 'not set'


Link / Button Properties (tab)

Click here for the details of the Link/Button Properties tab, which is consistent with all Widgets.

Required Elements

Metadata Form:

  • CSW IconTextBlock 

 Generic Render Handler:

  • CSW IconTextBlock

Optional Elements

 Global Custom Element:

  • CSW Icon Textblock Widget

Note: The Optional Element available for this widget is a Global Custom Element that has been configured with the required Field Types as well as the same Generic Custom Render Handler that is available as a separate download.

Alternatively, you can bind this widget’s stand-alone Generic Custom Render Handler to your own Custom Element (Local or Global) that contains similar fields, even if it has different field names. See the “Configure Generic Render Handler” section below for information regarding using your own Custom Element data object with this widget.

Suggested Custom Element Fields

  • Title (Text Field)
  • Icon (Text Field, Bootstrap Glyphicon Select or Font Awesome Select)
  • Description (Large Text Area)
  • LinkURL (CommonSpot Extended URL)
  • LinkText (Text Field)

The Icon Textblock Widget has the following importable components in the master import packet:

  • Global Custom Element 
  • Metadata Form
  • Generic Render Handler

If you want to use the provided global Custom Element, do the following:

  1. Download the master import packet
  2. Import the Metadata Form
  3. Import the Global Custom Element
  4. Confirm the Metadata Form is bound to the Render Handler

If you plan on using your own custom element, do the following:

  1. Download the master import packet
  2. Import the Metadata Form
  3. Import the Render Handler
  4. Confirm the Metadata Form is bound to the Render Handler
  5. Map your Custom Element fields to the Generic Render Handler

For detailed information on how to import the various components, please see Importing Widgets.

General Widget Documentation

What makes up a Widget?
Common Widget Properties
Importing Widgets
Widget Documentation for Developers
Widget Style Sheets
Author: PaperThin
Version: 1.0
Dependencies:
  • ADF 2.3
  • Bootstrap 3.3
Master Import Packet
File Version: 2022-12-23 01:14 PM

Master Import Packet for Icon Textblock widget.

PaperThin, Inc.

PaperThin, Inc. is a privately held, US-based company since 1993. Our flagship product CommonSpot™ helps organizations create world-class Web experiences. PaperThin's customers span multiple industries, including: government, healthcare, higher education, and association/non-profit sectors.

Contact Us

 617.471.4440
 info@paperthin.com

Learn More

  • Get a Demo
  • Try Now
  • All Features
  • Cloud vs. On-Premises
  • Spotlight Customers
  • Testimonials

CommonSpot is for:

  • Marketers
  • Designers & Developers
  • Administrators
  • Content Owners

Customer Links

  • Contact Support
  • Community Site
  • Professional Services
  • Training
  • Give Feedback

General

  • Contact Us
  • About PaperThin
  • Site Map
  • Career Opportunities
  • Privacy Policy
  • Terms of Use

Copyright © 2025 PaperThin, Inc. / All rights reserved.