Create a widget with tiles to link to serivcenow pages

[Black Coder]

Hi 

We have a requirement to create a fully custom widget with tiles to link to serivcenow pages. Below is the design

All the tiles are Static here.  Can someone help me with this tile how to configure

 

[Peter Bodelier]

Hi @Black Coder,

What is your question here? What are you struggling with?

[Black Coder]

Need to create above custom widget whenever user click on the any of tiles, it should redirect the user to respective servicenow portal pages. The new widget should align with above design. Can someone help me with the code

[Peter Bodelier]

Why are you not using OOTB widgets for this? For examplke the Icon Link button could suffice, maybe with some additional CSS applied.

No need to go custom here.

[Mohith Devatte]

hello @Black Coder ,

tried some thing in my PDI seeif this type of code helps 

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>
        <strong>Bootstrap - Tile Demo</strong>
      </h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
        <a href="http://www.ubh.com" class="tile purple">
          <h3 class="title">Purple Tile</h3>
          <p>Short, sweet data point goes here.</p>
        </a>
    </div>
    <div class="col-sm-4">
        <a href="http://www.ubh.com" class="tile orange">
          <h3 class="title">Orange Tile</h3>
          <p>Short, sweet data point goes here.</p>
        </a>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
        <a href="http://www.ubh.com" class="tile green">
          <h3 class="title">Green Tile</h3>
          <p>Short, sweet data point goes here.</p>
        </a>
    </div>
    <div class="col-sm-4">
        <a href="http://www.ubh.com" class="tile green">
          <h3 class="title">Blue Tile</h3>
          <p>Short, sweet data point goes here.</p>
        </a>
    </div>
  </div>
</div>

CSS:

@import "bourbon";

$color_purple: #5133AB;
$color_red: #AC193D;
$color_orange: #DC572E;
$color_green: #00A600;
$color_blue: #2672EC;

$base_font_size: 14px;
$base_line_height: 1.5em;
$text_font_family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$display_font_family: 'Open Sans', "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;

body {
	font-family: $text_font_family;
	font-size: $base_font_size;
	line-height: $base_line_height;
	font-weight: 400;
}

p, span, a, ul, li, button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

strong {
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
	font-family: $display_font_family;
	line-height: $base_line_height;
	font-weight: 300;	
}

strong {
  font-weight: 400;
}

.tile {  
  width: 100%;
	display: inline-block;
	box-sizing: border-box;
	background: #fff;		
	padding: 20px;
	margin-bottom: 10px;
  
  .title {
		margin-top: 0px;
	}
  
  &.purple, &.blue, &.red, &.orange, &.green {
    color: #fff;
  }
  
  &.purple {
    background: $color_purple;

		&:hover {
			background: darken($color_purple, 10%);
		}		
  }
  
  &.red {
    background: $color_red;

		&:hover {
			background: darken($color_red, 10%);
		}		
  }
  
  &.green {
    background: $color_green;

		&:hover {
			background: darken($color_green, 10%);
		}		
  }
  
  &.blue {
    background: $color_blue;

		&:hover {
			background: darken($color_blue, 10%);
		}	
  }
  
  &.orange {
    background: $color_orange;

		&:hover {
			background: darken($color_orange, 10%);
		}	
  }
}

Hope this helps 

Mark the answer correct if this helps you 

Thanks