Section & Variations › Integrations

Available Parameters
Parameter Type Description
variation Text
required
Default : integrations-variation-1
Set variation for Integrations section.
List of available variations :
  • integrations-variation-1
  • integrations-variation-2
  • integrations-variation-3
  • integrations-variation-4
tag Text Set tag value for Integrations section.
title Text Set title for Integrations section.
description Text Set description for Integrations section
cta Text HTML Display CTA in Integrations section.
items Array of Integrations Item
required
Set list of Integrations item.
Example:
[
    {
        "title"    : "Asana",
        "icon"    : "integation-item-asana.png"
    }
]
Available Variations
Starter Kit Codes
{# include sections/integrations  #}
{% include "sections/integrations.twig", with {
    	"variation"	: "integrations-variation-1",
	"tag"		: "Integrations",
	"title"		: "Seamless integrations with other great tools",
	"description"	: "Chroma absolutely works great with tools in your other existing platform.",
	"cta"		: "<a href="#">View all integrations <i class="ic ic-arrow-right"></i></a>",
	"items" : [
		{
			"title"	: "Asana",
			"icon"	: "integation-item-asana.png"
		},
		{
			"title"	: "Zoom",
			"icon"	: "integation-item-zoom.png"
		},
		{
			"title"	: "Google Meet",
			"icon"	: "integation-item-google-meet.png"
		},
		{
			"title"	: "Zendesk",
			"icon"	: "integation-item-zendesk.png"
		},
		{
			"title"	: "Loom",
			"icon"	: "integation-item-loom.png"
		},
		{
			"title"	: "Trello",
			"icon"	: "integation-item-trello.png"
		},
		{
			"title"	: "Slack",
			"icon"	: "integation-item-slack.png"
		}
	]
  } %}
Section Preview Integrations Variation 1
Starter Kit Codes
{# include sections/integrations  #}
{% include "sections/integrations.twig", with {
    	"variation"	: "integrations-variation-2",
	"tag"		: "Integrations",
	"title"		: "Seamless integrations with other great tools",
	"description"	: "Chroma absolutely works great with tools in your other existing platform.",
	"cta"		: "<a class="btn btn-light btn-icon" href="#get-started">View all integrations <i class="ic ic-chevron-right dark"></i></a>",
	"items" : [
		{
			"title"	: "mailchimp",
			"icon"	: "integation-item-mailchimp-white.png"
		},
		{
			"title"	: "twitch",
			"icon"	: "integation-item-twitch-white.png"
		},
		{
			"title"	: "zendesk",
			"icon"	: "integation-item-zendesk-white.png"
		},
		{
			"title"	: "zapier",
			"icon"	: "integation-item-zapier-white.png"
		},
		{
			"title"	: "slack",
			"icon"	: "integation-item-slack-white.png"
		},
		{
			"title"	: "notion",
			"icon"	: "integation-item-notion-white.png"
		},
		{
			"title"	: "asana",
			"icon"	: "integation-item-asana-white.png"
		},
		
		{
			"title"	: "github",
			"icon"	: "integation-item-github-white.png"
		},
		{
			"title"	: "figma", 
			"icon"	: "integation-item-figma-white.png"
		},
		{
			"title"	: "treehouse",
			"icon"	: "integation-item-treehouse-white.png"
		},
		{
			"title"	: "dropbox",
			"icon"	: "integation-item-dropbox-white.png"
		},
		{
			"title"	: "atlassian",
			"icon"	: "integation-item-atlassian-white.png"
		},
		{
			"title"	: "zoom",
			"icon"	: "integation-item-zoom-white.png"
		},
		{
			"title"	: "intercom",
			"icon"	: "integation-item-intercom-white.png"
		},
		{
			"title"	: "confluence",
			"icon"	: "integation-item-confluence-white.png"
		}
	]
  } %}
Section Preview Integrations Variation 2
Starter Kit Codes
{# include sections/integrations  #}
{% include "sections/integrations.twig", with {
    	"variation"	: "integrations-variation-3",
	"tag"		: "Integrations",
	"title"		: "Fully integrated with all the tools you're already familiar with",
	"description"	: "Save time and effort - Integrate Chroma with lots of tool.",
	"cta"		: "<a class="btn btn-primary btn-icon" href="#get-started">Explore Integration <i class="ic ic-chevron-right"></i></a>",
	"items" : [
		{
			"title"	: "notion",
			"icon"	: "integation-item-notion.png"
		},
		{
			"title"	: "gitlab",
			"icon"	: "integation-item-gitlab.png"
		},
		{
			"title"	: "trello",
			"icon"	: "integation-item-trello.png"
		},
		{
			"title"	: "asana",
			"icon"	: "integation-item-asana.png"
		},
		{
			"title"	: "palmtree",
			"icon"	: "integation-item-treepalm.png",
			"class"	: "full"
		},
		{
			"title"	: "slack",
			"icon"	: "integation-item-slack.png"
		},
		{
			"title"	: "google-meet",
			"icon"	: "integation-item-google-meet.png"
		},
		{
			"title"	: "zendesk",
			"icon"	: "integation-item-zendesk.png"
		},
		{
			"title"	: "loom",
			"icon"	: "integation-item-loom.png"
		}
	]
  } %}
Section Preview Integrations Variation 3
Starter Kit Codes
{# include sections/integrations  #}
{% include "sections/integrations.twig", with {
    	"variation"	: "integrations-variation-4",
	"tag"		: false,
	"title"		: "Connect your app with the tools you love",
	"description"	: false,
	"cta"		: "<a href="#">View all integrations <i class="ic ic-arrow-right"></i></a>",
	"items" : [
		{
			"title"	: "Asana",
			"description"	: "Asana, Inc., is an American software company based in San Francisco whose flagship Asana service is a web.",
			"icon"	: "integation-item-asana-sm.png"
		},
		{
			"title"	: "Slack",
			"description"	: "Slack is an instant messaging program designed by Slack Technologies and owned by Salesforce. ",
			"icon"	: "integation-item-slack-sm.png"
		},
		{
			"title"	: "Intercom",
			"description"	: "Intercom, Inc. is a software company that specializes in business messaging, providing businesses with a way to chat.",
			"icon"	: "integation-item-intercom-sm.png"
		},
		{
			"title"	: "Zendesk",
			"description"	: "Zendesk, Inc. is a Danish-American company headquartered in San Francisco, California.",
			"icon"	: "integation-item-zendesk-sm.png"
		},
		{
			"title"	: "Zoom",
			"description"	: "Zoom Video Communications, Inc. is a communications technology company headquartered in San Jose, California.",
			"icon"	: "integation-item-zoom-sm.png"
		},
		{
			"title"	: "Zapier",
			"description"	: "Zapier is a product that allows end users to integrate the web applications they use and automate workflows.",
			"icon"	: "integation-item-zapier-sm.png"
		}
	]
  } %}
Section Preview Integrations Variation 4