Blocks Library

Visual library of available custom blocks

Example of link that opens video in pop up. Add classes “fancybox” and “iframe” to button

Watch Video in Popup

Columns

Available classes: “bordered” (see below for example)

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis. Integer finibus arcu enim, eget tempor nisl lobortis congue. Nullam sollicitudin lorem a eros ultricies, in scelerisque felis pretium. In hac habitasse platea dictumst. Donec augue lacus, eleifend nec malesuada in, maximus non nibh. Nunc non sapien consequat, ornare diam vitae, pulvinar eros.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis. Integer finibus arcu enim, eget tempor nisl lobortis congue. Nullam sollicitudin lorem a eros ultricies, in scelerisque felis pretium. In hac habitasse platea dictumst. Donec augue lacus, eleifend nec malesuada in, maximus non nibh. Nunc non sapien consequat, ornare diam vitae, pulvinar eros.

Bordered Columns: add class “bordered”

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis.

Three Column Layout

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis. Integer finibus arcu enim, eget tempor nisl lobortis congue. Nullam sollicitudin lorem a eros ultricies, in scelerisque felis pretium. In hac habitasse platea dictumst. Donec augue lacus, eleifend nec malesuada in, maximus non nibh. Nunc non sapien consequat, ornare diam vitae, pulvinar eros.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis. Integer finibus arcu enim, eget tempor nisl lobortis congue. Nullam sollicitudin lorem a eros ultricies, in scelerisque felis pretium. In hac habitasse platea dictumst. Donec augue lacus, eleifend nec malesuada in, maximus non nibh. Nunc non sapien consequat, ornare diam vitae, pulvinar eros.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis. Integer finibus arcu enim, eget tempor nisl lobortis congue. Nullam sollicitudin lorem a eros ultricies, in scelerisque felis pretium. In hac habitasse platea dictumst. Donec augue lacus, eleifend nec malesuada in, maximus non nibh. Nunc non sapien consequat, ornare diam vitae, pulvinar eros.

Vertically align columns

Add a class of “align-vertical” to the row that contains the columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ligula ut nibh accumsan, non posuere est varius. Etiam eget iaculis quam. Vestibulum feugiat eleifend lobortis. Integer finibus arcu enim, eget tempor nisl lobortis congue. Nullam sollicitudin lorem a eros ultricies, in scelerisque felis pretium. In hac habitasse platea dictumst. Donec augue lacus, eleifend nec malesuada in, maximus non nibh. Nunc non sapien consequat, ornare diam vitae, pulvinar eros.

Sisense vs Thoughtspot

Icons

All icons should be SVG format. For a list of all icons see the styleguide: https://xd.adobe.com/spec/d88ceff9-1b13-470c-5b52-6fcb4d40b914-aebd/screen/ae138a6c-e4df-42b9-8cf8-f9e61994db25/Icons

Lists

Has a class of “checkmarks”

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Cras id felis nec arcu aliquam vehicula.
  • Maecenas maximus urna ut nulla lacinia, et mollis sem porttitor.
  • Mauris ultrices lacus ut iaculis tincidunt.

Has a class of “si-list”

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Cras id felis nec arcu aliquam vehicula.
  • Maecenas maximus urna ut nulla lacinia, et mollis sem porttitor.
  • Mauris ultrices lacus ut iaculis tincidunt.

Marketo Form

Available classes:

  • “dark” – applies yellow background to form
  • “no-padding” – removes padding to forms with the dark class
  • “clipped” – adds a clipped transparent triangle to form with dark class
  • “two-column” – creates a two-column layout
  • “three-column” – creates a three-column layout


Example of a button that opens a form a lightbox format.

Open a form!

Video Lightbox

Enter video id and select image.
Video id example:
Use the id vfyt0v7udKA in the link https://www.youtube.com/watch?time_continue=11&v=vfyt0v7udKA


Accordion

Content 1

Content 2

Content 3


Content Tabs

Can have three per row or four per row. Icon and Description optional.

Title

Description

Second Title

Another Description

Third

Description

Excerpt Carousel