Last updated on 27 Nov 2022 by Cherina Yee

Button

Click Me

<a href="https://www.google.com" target="_blank" style="background-color: #0A66C2; color: white; text-decoration: none; border-radius: 100px; padding-left: 20px; padding-right: 20px; padding-top:8px; padding-bottom:8px">Click Me</a>

Application Closed

<a style="background-color: #0A66C2; color: white; text-decoration: none; border-radius: 100px; padding-left: 20px; padding-right: 20px; padding-top:8px; padding-bottom:8px">Application Closed</a>

How to copy and paste:

• Copy the code of the relevant button above
• Change the href: Hyperlink to the site (remove if you want your button to not link anywhere, eg when Application Closed)
• Edit the button text: <>Click Me<>
• target="_blank" opens site in a new tab. Change to “_self” if you want it to open on the current page
• background-color if you want to change the button colour
• color if you want to change the text colour

Topics for Workshops

Programmes > For Corporates/Startups > Innovation Consultancies

The colour scheme here matches the one in the Events page.

Template code:

<table>
	<tr>
		<td style="background:#40c1ac; color:white; text-align: center; border: 15px solid white; width:25%;">
			<b>TOPIC</b>
			<br><span style="font-size:0.9em;">Description</span>
			<br><br><a href="eBrochure.pdf" target="_blank" style="color: white;">eBrochure</a><br>
		</td>
		<td style="background:#991e66; color:white; text-align: center; border: 15px solid white; width:25%;">
			<b>TOPIC</b>
			<br><span style="font-size:0.9em;">Description</span>
			<br><br><a href="eBrochure.pdf" target="_blank" style="color: white;">eBrochure</a><br>
		</td>
		<td style="background:#ff8400; color:white; text-align: center; border: 15px solid white; width:25%;">
			<b>TOPIC</b>
			<br><span style="font-size:0.9em;">Description</span>
			<br><br><a href="eBrochure.pdf" target="_blank" style="color: white;">eBrochure</a><br>
		</td>
		<td style="background:#63c8dc; color:white; text-align: center; border: 15px solid white; width:25%;">
			<b>TOPIC</b>
			<br><span style="font-size:0.9em;">Description</span>
		</td>
	</tr>
</table>

How to copy and paste:

• Copy the whole code above
• Edit topic and description
• Change the link in href

Code Notes:

• 1 table row, indicated by 1 set of <tr></tr>
• 4 columns, indicated by 4 sets of <td></td> within table row
• width:25% is the size of the column. 4 columns = 100%. Use percentages instead of pixels so column will size accordingly to screen size.
• Description font size is smaller font-size:0.9em
• A PDF icon appears on the actual site next to eBrochure. This is automatically generated by Isomer, and appears only if the href link is a .pdf. Otherwise, it will be an arrow out.

Facilities

2 rooms per row. Image corners are rounded by the code.

2 rooms in a row:

Room 1	Room 2

<!-- END OF ROW 1 -->

Template code for 2 rooms:

<table>
    <!-- START  OF ROW 1 -->
	<tr>
		<td style="width:50%; border-bottom:none; "><img src="img.jpg" style="border-radius:15px;"></td>
		<td style="width:50%; border-bottom:none; "><img src="img.jpg" style="border-radius:15px;"></td>
	</tr>
	<tr>
		<td style="text-align:center; border-bottom:none;"><b>Room 1</b></td>
		<td style="text-align:center; border-bottom:none;"><b>Room 2</b></td>
	</tr>
    <!-- END OF ROW 1 -->
</table>

1 room in a row:

Room 1

Template code for 1 room:

<table>
    <!-- START  OF ROW 1 -->
	<tr>
		<td style="width:50%; border-bottom:none; "><img src="img.jpg" style="border-radius:15px;"></td>
		<td style="width:50%; border-bottom:none; "></td>
	</tr>
	<tr>
		<td style="text-align:center; border-bottom:none;"><b>Room 1</b></td>
		<td style="text-align:center; border-bottom:none;"><b></b></td>
	</tr>
    <!-- END OF ROW 1 -->
</table>

How to copy and paste:

• To add more rooms, choose whether you need 1 or 2 rooms to be in a row and copy and paste everything from the START till the END
• Change the src in img
• Edit the room name

Code Notes:

• The rooms consist of 2 rows. The 1st row contains the image, and the 2nd row contains the room name
• All borders are removed as seen in border-bottom:none;
• 2 columns, indicated by 2 sets of <td></td> within each table row
• width:50% is the size of the column. 2 columns = 100%. Use percentages instead of pixels so column will size accordingly to screen size.
• Image corners are rounded by "border-radius:15px;". There is no need to round the image beforehand. Uploading a rectangle image will do

Featured Areas

Facilities > Featured Areas

One equipment per row. All text are vertically aligned to middle. There is a light border between equipments. There is no top border for the 1st row, and no bottom border for the last row.

	Equipment 2 • Feature 1 • Feature 2
	Equipment 3 • Feature 1 • Feature 2

Template code:

<table>
    <!-- 1st or MIDDLE ROW -->
	<tr>
		<td style="width:50%; vertical-align:middle; border-bottom: 0.75px solid lightgrey"><img src="img.png"></td>
		<td style="width:50%; vertical-align:middle; border-bottom: 0.75px solid lightgrey"><b>Equipment 2</b><br>
			<br>• Feature 1
			<br>• Feature 2
		</td>
	</tr>
    <!-- LAST ROW -->
    <tr>
		<td style="width:50%; vertical-align:middle;"><img src="img.png"></td>
		<td style="width:50%; vertical-align:middle;"><b>Equipment 3</b><br>
			<br>• Feature 1
			<br>• Feature 2
		</td>
	</tr>
</table>

How to copy and paste:

• If you want to add rows to the top or the middle, copy the 1st or the middle code
• If you want to add to the last row, copy the last row, and change the existing last row format to that of the 1st/middle row
• Change the src of img
• Edit equipment name and features, note that the bullet point is simply copied and pasted here

Code Notes:

• By default in Isomer, tables have no top border for 1st row and no bottom border for the last row. We will leave it as it is.
• Only adjust the borders in between the equipment by setting border-bottom: 0.75px solid lightgrey; for all rows except for the last
• Bullet points are artificially added by copy and pasting this •
• Text are vertically aligned to the image by vertical-align:middle;
• 2 columns, indicated by 2 sets of <td></td> within each table row
• width:50% is the size of the column. 2 columns = 100%. Use percentages instead of pixels so column will size accordingly to screen size.

Partners

Community > Partners

One partner per row. There is a light border at the top and bottom of all rows. All text are vertically aligned to middle and there is a read more button at the bottom.

Company 1 Description Read More

Template code:

<table>
    <!-- START ROW -->
    <tr>
        <td style="width:25%; border-top:0.75px solid lightgrey; border-bottom:0.75px solid lightgrey;">
            <br><img src="img.png">
        </td>
        <td style="border-top:0.75px solid lightgrey; border-bottom:0.75px solid lightgrey;">
            <br><b>Company  1</b>
            <br>Description
            <br><br><a href="https://www.google.com" target="_blank" style="background-color: #0A66C2; color: white; text-decoration: none; border-radius: 100px; padding-left: 20px; padding-right: 20px; padding-top:8px; padding-bottom:8px">Read More</a><br><br>
        </td>
    </tr>
    <!-- END ROW -->
</table>

How to copy and paste:

• Copy the row above to add 1 row
• Change the src in the img
• Edit the company name and description
• Change the href in the button

Code Notes:

• A light border at the top and bottom of all rows border-top:0.75px solid lightgrey; border-bottom:0.75px solid lightgrey;
• Images are flushed to the top (default)
• width:25% is the size of the column for the logos. The text takes up 75% of the space

Mentors

Community > Mentors

Three mentors per row. The photo and name is clickable and links to LinkedIn. The photo is automatically cropped to a circle (the image must be a square) and a white border is added by code. All text are horizontally aligned to center.

PERSON 1 Designation Company Description

PERSON 2 Designation Company Description

PERSON 3 Designation Company Description

Template code:

<table>
    <!-- START ROW -->
	<tr>
		<td style="background:#F7F7F7; border: 15px solid white; width:33%; text-align: center; ">	
			<a href="https://www.linkedin.com/" target="_blank" style="text-decoration: none; color:black;">	
			<table>
				<tr>
					<td></td>
					<td><img src="img.jpg" style="border-radius:50%; border:8px solid white;"></td>
					<td></td>
				</tr>
			</table>
			<b>PERSON 1</b></a>
			<br><span style="font-size:0.9em;">Designation</span>
			<br><span style="font-size:0.9em;">Company</span>
			<br><br><span style="font-size:0.8em; line-height:0.8em;">Description</span>
		</td>
		<td style="background:#F7F7F7; border: 15px solid white; width:33%; text-align: center; ">	
			<a href="https://www.linkedin.com/" target="_blank" style="text-decoration: none; color:black;">	
			<table>
				<tr>
					<td></td>
					<td><img src="img.jpg" style="border-radius:50%; border:8px solid white;"></td>
					<td></td>
				</tr>
			</table>
			<b>PERSON 2</b></a>
			<br><span style="font-size:0.9em;">Designation</span>
			<br><span style="font-size:0.9em;">Company</span>
			<br><br><span style="font-size:0.8em; line-height:0.8em;">Description</span>
		</td>
		<td style="background:#F7F7F7; border: 15px solid white; width:33%; text-align: center; ">		
			<a href="https://www.linkedin.com/" target="_blank" style="text-decoration: none; color:black;">	
			<table>
				<tr>
					<td></td>
					<td><img src="img.jpg" style="border-radius:50%; border:8px solid white;"></td>
					<td></td>
				</tr>
			</table>
			<b>PERSON 3</b></a>
			<br><span style="font-size:0.9em;">Designation</span>
			<br><span style="font-size:0.9em;">Company</span>
			<br><br><span style="font-size:0.8em; line-height:0.8em;">Description</span>
		</td>
	</tr>
    <!-- END ROW -->
</table>

How to copy and paste:

• Copy the whole row above from START to END
• Change the href to the LinkedIn link
• Change the src in the img
• Edit the person, designation, company and description

Code Notes:

• The image is housed in a table in a table. This is a hacky way of making it centralised with paddings on the left and right
• The image is cropped into a circle by border-radius:50%;
• The border around the circle is added by border:8px solid white;
• Font size: Person (1em) > Designation / Company (0.9em) > Description (0.8em)
• width:33% is the size of each column.
• There is a white border around each table cell border: 15px solid white;

Incubatees

Community > Incubatees

Three incubatees per row. The photo and name is clickable and links to their website. All text are horizontally aligned to center.

COMPANY 1 Description

COMPANY 2 Description

COMPANY 3 Description

Template code:

<table>
    <!-- START ROW -->
	<tr>
		<td style="border: 15px solid #F7F7F7; width:33%; text-align: center;">
			<a href="https://www.google.com/" target="_blank" style="text-decoration: none; color:black;">	
				<table>
					<tr>
						<td></td>
						<td><img src="img.png"></td>
						<td></td>
					</tr>
				</table>
				<b>COMPANY 1</b></a>
				<br><span style="font-size:0.8em; line-height:0.8em;">Description</span>
		</td>	
		<td style="border: 15px solid #F7F7F7; width:33%; text-align: center;">
			<a href="https://www.google.com/" target="_blank" style="text-decoration: none; color:black;">	
				<table>
					<tr>
						<td></td>
						<td><img src="img.png"></td>
						<td></td>
					</tr>
				</table>
				<b>COMPANY 2</b></a>
				<br><span style="font-size:0.8em; line-height:0.8em;">Description</span>
		</td>
		<td style="border: 15px solid #F7F7F7; width:33%; text-align: center;">
			<a href="https://www.google.com/" target="_blank" style="text-decoration: none; color:black;">	
				<table>
					<tr>
						<td></td>
						<td><img src="img.png"></td>
						<td></td>
					</tr>
				</table>
				<b>COMPANY 3</b></a>
				<br><span style="font-size:0.8em; line-height:0.8em;">Description</span>
		</td>
	</tr>
	<!-- END ROW -->
</table>

How to copy and paste:

• Copy the whole row above
• Change the href to the website link
• Change the src in the img
• Edit the company name and description

Code Notes:

• The image is housed in a table in a table. This is a hacky way of making it centralised with paddings on the left and right
• Font size: Company (1em) > Description (0.8em)
• width:33% is the size of each column.
• There is a grey border around each table cell border: 15px solid #F7F7F7;

Success Stories

One story per row. All text are vertically aligned to middle. There is a light border between stories. There is no top border for the 1st row, and no bottom border for the last row. The story title is in a hyperlink to make it obvious to users that it is clickable.

	Category Story
	Category Story

Template code:

<table>
	<!-- 1ST OR MIDDLE ROWS -->
	<tr>
		<td style="width:30%; vertical-align:middle; border-bottom: 0.75px solid lightgrey">
			<img src="img.jpg">
		</td>
		<td style="vertical-align:middle; ">Category
			<br><b><a href="https://www.google.com" target="_blank">Story</a></b>
		</td>
    </tr>
	<!-- LAST ROW -->
	<tr>
		<td style="width:30%; vertical-align:middle;">
			<img src="img.jpg">
		</td>
		<td style="vertical-align:middle;">Category
			<br><b><a href="https://www.google.com" target="_blank">Story</a></b>
		</td>
    </tr>
</table>

How to copy and paste:

• If you want to add rows to the top or the middle, copy the 1st / middle code
• If you want to add to the last row, copy the last row, and change the existing last row format to that of the 1st/middle row
• Edit the category
• Change the link in href
• Edit the story title

Code Notes:

• By default in Isomer, tables have no top border for 1st row and no bottom border for the last row. We will leave it as it is.
• Only adjust the borders in between the equipment by setting border-bottom: 0.75px solid lightgrey; for all rows except for the last
• Text are vertically aligned to the image by vertical-align:middle;

Testimonials

Success Stories > Testimonials

Photo on the left, quote on the right

Quote here - Name, Company

Template code:

<table>
	<!-- START ROW -->
	<tr>
		<td style="width:25%; text-align: center; vertical-align:middle; border-bottom:none;">
			<img src="img.jpg" style="border-radius:50%;">
		</td>
		<td style="vertical-align:middle; border-bottom:none;">
			<blockquote>
			Quote here
			<br><i>- Name, Company</i>
			</blockquote>
		</td>
	</tr>
	<!-- END ROW -->
</table>

How to copy and paste:

• Copy above from START to END to add one testimonial
• Change the src in img
• Edit the quote in blockquote
• Edit the name and company

Code Notes:

• Remove all borders border-bottom:none;
• Image here is cropped to circle, you can remove it by deleting border-radius:50%;