HTML Examples

Several areas in Elexio Database, Portal, Website, etc. accept and render HTML. Using HTML to create line spacing, add a link, a button, etc. can not only help improve the look of your site, but also improve utilization by your users. While Elexio doesn't provide HTML/CSS training, below are a few code snippets that you can easily copy and reuse.

 

Bolded Text:

<strong>Bolded Text Here</strong>

Example Output: Bolded Text Here

  • Using html 'strong' tags is an easy way to draw a user's attention to a given area quickly. That said, make sure not to over-use bolded text as it can cause confusion on where you really want people to look.

 

Line Break:

<br/><br/>

  • Use the above two HTML tags to create a space between two paragraphs of text.

 

Basic Link: 

<a href="www.example.com" target="_blank">LINKED TEXT HERE</a>

Example Output: LINKED TEXT HERE

  • Replace "www.example.com" with the page you'd like to link to and "LINKED TEXT HERE" with text that will be linked.

 

Simple Button:

<a href="www.example.com" target="_blank" style="background-color:#7e7e7e; border-radius:3px; color:#fff; margin:3px 0; padding:10px 20px; text-decoration:none;">TEXT HERE</a>

Example Output: TEXT HERE

  • Replace "www.example.com" with the page you'd like to link to
  • To change the button color, change the six-digit hexadecimal color code (highlighted in orange) to a color of your choice. (A great site to find hex color codes is https://color.adobe.com/create/color-wheel). 

 

Small Group Finder Button: 

<br/><br/><a href="www.example.com" target="_blank" style="background-color:#d2642d; border-radius:3px; color:#fff; float:left; font-family: 'Gotham Medium', Arial, Helvetica, sans-serif; font-size:1em; margin:3px 0; padding:10px 20px; text-decoration:none;">SIGN UP!</a><br/><br/>

Example Output: SIGN UP!

  • Replace "www.example.com" with the page you'd like to link to
  • To change the button color, change the six-digit hexadecimal color code (highlighted in orange) to a color of your choice. (A great site to find hex color codes is https://color.adobe.com/create/color-wheel). 
↑ Back to Top