​​Tulip | Component Guidelines  
​​

​​Components

​​All components can be found on the component demonstration page.
​​
​​Component
​​Image
​​Fields
​​Asset Notes
​​Relevant Files

​​App: Featured App Card

​​Big way to present an app or app collection.
​​
​​Common usage
​​Highlighting a new and impactful app on an industry page
​​
​​Notes
  • ​​This works best with the abstracted product dashboard screens
​​
 
User-uploaded image: Screen+Shot+2021-05-10+at+8.19.29+PM.png
​​Parameters
  • ​​Image
  • ​​Title
  • ​​Description
  • ​​CTA
  • ​​Link
  • ​​Text
  • ​​Type
​​Aspect Ratio
​​Landscape
​​Twig templates/_components/articles/blocks/adjective-list.twig​
​​
​​SCSS static/sass/partials/gutenberg-blocks/_adjective-list.scss​

​​App: Image + Apps List

​​This is an image driven tease that can link to multiple apps. It is intended to humanize apps and show how they work.
​​
​​Common usage
​​Showing how specific apps are used on a case study or industry page
​​
​​Notes
  • ​​While this was designed for apps, you can link to any type of content within the app list
​​
 
User-uploaded image: Screen+Shot+2021-05-10+at+8.19.46+PM.png
​​Parameters
  • ​​Image
  • ​​Description
  • ​​App list
  • ​​Icon
  • ​​Link
  • ​​Title
  • ​​Description
​​
​​Aspect Ratio
​​Square
​​Twig templates/_components/articles/blocks/large-tease.twig​
​​
​​SCSS static/sass/partials/gutenberg-blocks/_large-tease.scss​

​​App: Small Teases

​​A dense presentation of apps that can be used to ground any page in the product itself.
​​
​​Common usage
​​Use after the big app tease on an industry or platform page
​​
​​Notes
  • ​​Title is optional
  • ​​Works best with 6 apps
​​
 
User-uploaded image: Screen+Shot+2021-05-10+at+8.20.01+PM.png
​​
​​Parameters
  • ​​Title
  • ​​Teases
  • ​​Icon
  • ​​Link
  • ​​Title
  • ​​Description
​​N/A
​​Twig templates/_components/articles/blocks/small-teases.twig​
​​
​​SCSS static/sass/partials/gutenberg-blocks/_small-teases.scss​

​​Asset: Embed

​​Embed a iframes or images.
​​
​​Notes
  • ​​This does not lazy load images, but it will respect the intrinsic size and aspect ratio
​​
 
User-uploaded image: Screen+Shot+2021-06-16+at+9.39.02+PM.png
​​Parameters
  • ​​Asset
  • ​​Caption
​​Aspect Ratio
​​Any!
​​Twig  templates/_components/articles/blocks/embed.twig​
​​
​​SCSS static/sass/partials/content-blocks/_embeds.scss​

​​Asset: Image

​​The most performant way to add images.
​​
​​Notes
  • ​​if an image is getting stretched or doesnt conform of a preset aspect ratio, try using Asset: Embed instead.
​​
 
User-uploaded image: Screen+Shot+2021-06-16+at+9.41.11+PM.png
​​Parameters
  • ​​Asset
  • ​​Caption
  • ​​Credit
​​Aspect Ratio
​​Square, Landscape, or Portrait
​​Twig templates/_components/articles/blocks/image.twig​
​​
​​SCSS static/sass/partials/content-blocks/_embeds.scss​

​​Asset: Image Gallery

​​A way to show multiple images in the same post.
​​
 
User-uploaded image: Screen+Shot+2021-06-16+at+9.44.21+PM.png
​​Parameters
  • ​​Assets
  • ​​Caption
  • ​​Alignment
  • ​​Layout
  • ​​Image crop toggle
​​
​​Aspect Ratio
​​Landscape or Portrait
​​Twig templates/_components/articles/blocks/gallery.twig​
​​
​​SCSS static/sass/partials/content-blocks/_gallery.scss​

​​Button

​​Easily add a button in the middle of any page
​​
 
User-uploaded image: Screen+Shot+2021-06-16+at+9.46.54+PM.png
​​Parameters
  • ​​Button Text
​​N/A
​​Twig templates/_components/articles/blocks/button.twig​
​​