teaserContent.component.html

<table>
    <colgroup>
       <col span="1" style="width: 33%;">
       <col span="1" style="width: 33%;">
       <col span="1" style="width: 33%;">
    </colgroup>
    <thead><tr><th style="text-align: center">{{'teaser.headings.keywords'|translate}}</th>
               <th style="text-align: center">{{'teaser.headings.contributors'|translate}}</th>
               <th style="text-align: center">{{'teaser.headings.programmingLanguages'|translate}}</th>
               </tr></thead>
    <tbody><tr><td>
		<angular-tag-cloud 
		        [data]="keywordCloudData"
		        [config]="options" (clicked)="onKeywordClick($event)">
		</angular-tag-cloud>
	</td><td>
        <angular-tag-cloud 
                [data]="contributorCloudData"
                [config]="options" (clicked)="onContributorClick($event)">
        </angular-tag-cloud>
    </td><td>
        <angular-tag-cloud 
                [data]="programmingLanguageCloudData"
                [config]="options" (clicked)="onProgrammingLanguageClick($event)">
        </angular-tag-cloud>
    </td></tr></tbody>
</table>
<div class="row" style="width: 80%;margin-left: auto; margin-right: auto;">
	<div class="col-sm-3">
	  <p style="padding-left: 30px;"><strong jhiTranslate="teaser.headings.keywords">Keywords</strong></p>
	  <ul style="list-style-type: circle;">
                <li *ngFor="let keyWord of keywords"><a (click)="clickKeyword(keyWord.target)"  style="cursor:pointer;">{{keyWord.target}} ({{keyWord.hitCount}})</a></li>
      </ul>
    </div>
	<div class="col-sm-3">
	  <p style="padding-left: 30px;"><strong jhiTranslate="teaser.headings.programmingLanguages">Programming Languages</strong></p>
	  <ul style="list-style-type: circle;">
                <li *ngFor="let programmingLanguage of programmingLanguages"><a (click)="clickLanguage(programmingLanguage.target)"  style="cursor:pointer;">{{programmingLanguage.target}} ({{programmingLanguage.hitCount}})</a></li>
      </ul>
    </div>
	<div class="col-sm-3">
	  <p style="padding-left: 30px;"><strong jhiTranslate="teaser.headings.contributors">Contributors</strong></p>
	  <ul style="list-style-type: circle;">
                <li *ngFor="let contributor of contributors"><a (click)="clickContributor(contributor.target)" style="cursor:pointer;">{{contributor.target}} ({{contributor.hitCount}})</a></li>
      </ul>
    </div>
</div>