){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
Information about this product feature.
Click here)
Resource card
Add your description here
Click hereKitchen sink
All the components you'll ever need to build a page in Storyblok
This page contains a list of all the current components that are available in Storyblok to build a page. Here are a few recommendations to help you on your way:
Flex containers
Almost all components we use in Storyblok need to be built within a Flex container. Each page will follow a format like this:
- Flex container
- Component
- Component
- Flex container
- Component
- Etc.
Background colors
A flex container has several background colors and style options (horizon, stripe gray, stripe navy, stripe white, gradient to dark, gradient from dark). You can find these options in the Style drop-down on the right menu within a flex container. They are mostly self-explanatory, but you can play around with each style to get a feel for how they work.
Our components have been built to respect the background color. For example, if we use a dark background the text will be a lighter colour (and vice versa). This ensures our content is accessible.
On this page, I will mostly use the default navy background color to avoid repetition of showing the same component multiple times on different backgrounds.
Transitions between flex containers
As we stack flex containers when building a page, we have several options on how we transition to each section (wave, wave into white background, wave into gray background, wave into navy background). You can find these in the Lower Style drop-down on the right menu within a flex container.
Again, these are mostly self-explanatory, but you do need to be conscious of the background colour you are planning to use in the next flex container and choose the appropriate lower style in the previous container. If you intend to use a white background in the next flex container, choose wave into white background in the preceding flex container.
How to use this page
You can use this page to learn about new components or to help you visualize components you can use to build out a new page.
If you find a component you need to use on a page elsewhere, you can copy it from this page and paste it into your new page. You can do this by:
- Hovering over the component you want to copy in the page component menu on the right of the screen
- Click the copy icon
- Browse to your new page in Storyblok
- Hover over the component menu and choose the paste option
If you are unsure of what component you need or have questions, head over to #website-and-martech-requests on Slack and ask the team for help.
Component index
- Button
- Button group
- Card container
- Carousel
- Comparison container
- Demo button
- Embedded video
- Feature
- Feature tile
- Feature tile grid
- Footer banner
- Grid
- Heading
- Hero banner
- Icon card container
- Image
- Impact
- Logo block
- Logo block (simple)
- Lottie file
- Marketo form
- Mini pricing
- More resources
- Newsletter form
- Paragraph
- Product highlight
- Start trial form
- Table
- Target calculator
- Testimonial with media
- Typewriter wrapper
- Vimeo video
- YouTube video
Button
Button group
Card container
+ Feature card
+ Free tool card
Free tool card
Add your description here
Free tool card
Add your description here
Free tool card
Add your description here
+ Resource card
)
+ Testimonial card
+ Testimonial card new
)
){kind=logo}
Enter testimonial here. This card has no background image and no call to action button.
Carousel
)
This is a caption
)
This is a caption
Comparison container + Comparison card
Before title
Before title This is the before description
After title
After title 1 This is the first after description
After title 2 This is the second after description
Demo button
Ready to learn the basics of deployment automation?
Register for a 30-minute session. We'll show you the basics of deployment automation and how to set up your deployment pipeline with Octopus.
Register now
Embedded video
Feature
Feature heading
Add your subheading here
This is the description for the feature you are showcasing in this component.
If you need to add an extended description, you can do so in this collapsed area.
Feature tile
)
Feature tile title
Add your description here
Feature tile grid
Feature tile title
Add your description here
Feature tile title
Add your description here
Grid
2X2 grid
This is the first row, first column section of the grid.
This is the first row, second column section of the grid.
This is the second row, first column section of the grid.
This is the second row, second column section of the grid.
3X1 grid
This is the first row, first column section of the grid.
This is the first row, second column section of the grid.
This is the first row, third column section of the grid.
Large + small column grid
Session details
Every month we run a live demo that covers:
- An overview of Octopus Deploy
- How to set up your first deployment
- How to improve your deployment process
- A question-and-answer session
This webinar is great if you’re new to the platform or looking for a quick overview of Octopus. Head to the registration page using the button below.
Speaker details
)
Our monthly demo is presented by our Community Director, John Bristowe.
Heading
Eyebrow
Heading title
Add your subheading here
Heading with blue and green gradient
Eyebrow
Gradient heading
Heading with blue and purple gradient
Eyebrow
Gradient heading
Hero banner
Heading
Add your subheading here
Click here
You can add some further content here. It could be a little longer than the subheading
Icon card container
Icon card title
Add your description here.
Icon card title
Add your description here.
Image
)
This is a caption of an image.
Impact of Octopus
The impact of Octopus
Octopus is the proven solution for accelerating deployment frequency
Before Octopus
10% completed a deployment in 15 minutes
After Octopus
84% complete a deployment in 15 minutes
92% decrease in number of hours to onboard new customers or locations
Results from Octopus Deploy customer survey published in 2023 and enterprise customer story. Average time to onboard new customers without Octopus: 180 minutes. Average time to onboard new customers with Octopus: 15 minutes.
Logo block
Error trying to render: Octopus.Public.Web.App.ContentManagement.Schema.V2.LogoBlock
Octopus.Public.Web.App.ContentManagement.Schema.V2.LogoBlock
System.InvalidOperationException: The partial view 'TemplatesV2/LogoBlock' was not found. The following locations were searched: /Views/Storyblok/TemplatesV2/LogoBlock.cshtml /Views/Shared/TemplatesV2/LogoBlock.cshtml /Pages/Shared/TemplatesV2/LogoBlock.cshtml /Views/Storyblok/TemplatesV2/LogoBlock.cshtml /Views/Storyblok/Templates/TemplatesV2/LogoBlock.cshtml /Views/Storyblok/TemplatesV2/TemplatesV2/LogoBlock.cshtml at Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper.RenderPartialCoreAsync(String partialViewName, Object model, ViewDataDictionary viewData, TextWriter writer) at Microsoft.AspNetCore.Mvc.ViewFeatures.HtmlHelper.PartialAsync(String partialViewName, Object model, ViewDataDictionary viewData) at AspNetCoreGeneratedDocument.Views_Storyblok_TemplatesV2__Component.ExecuteAsync()
Logo block (simple)
Logo scroller
Lottie file (animation)
Marketo form
Mini pricing component
Plans for teams at any scale
Our plans cover enterprise, small teams, personal projects, and everything in between.
Community
For personal and open source projects
$10
flat fee, per month
Billed monthly
- All core features
- 5 deployment targets
- 5 deployment targets
- 5 projects
- 5 users
- 5 concurrent tasks*
Start a trial
Free for 30 days. No credit card needed.
Professional
Continuous Delivery for one or several teams
All in Community plus:
- Role-based access control
- Unlimited projects
- Unlimited users
- Unlimited spaces
- Default of 5 concurrent tasks*
- Up to 3 instances
- 8/5 email support (9am to 5pm your local time)
Start a trial
Free for 30 days. No credit card needed.
Enterprise
Advanced features for teams at scale
All in Professional plus:
- Advanced high availability
- Insights & DORA metrics
- ServiceNow & Jira ITSM integration
- Stream your Octopus audit logs to an SIEM provider
- Unlimited instances
- Default of 20 concurrent tasks*
- 24/7 email support
- Customer Success Manager
- Volume pricing above 500 targets
Are you a Microsoft Azure customer?
You can purchase Octopus Cloud or Octopus Server from the Azure Marketplace if you already have existing Azure commitments.
* See below for the maximum number of concurrent tasks for each license tier. A task is a deployment, runbook run, retention policy cleanup, security sync, or jobs.
We support temporary bursting in certain scenarios. Contact Sales for details.
More resources
If using this component, copy the next 2 components (Heading and Card Container) and paste them on your target page.
LEARN
More resources
)
DevOps handbook
Everything you’ll ever need to know about DevOps, written by our own DevOps engineers and experts.
Read the handbook)
GitHub Actions
When it comes to deployments, Octopus is the tool to supercharge your GitHub Actions workflows.
Learn more)
Documentation
Explore our guides and examples to learn more about Octopus Deploy fundamentals and concepts.
Explore the docs)
Getting started
Follow our guides to get started with Octopus Cloud or your own self-hosted Octopus Server.
Read our guidesNewsletter form
Paragraph
This is a paragraph. There are multiple styling options, including bold and italics.
You can also add a code block
You can also add a quote
You can also add headings
Paragraph
Product section 1
)
Start trial form
Table
Table header 1 |
|||
|---|---|---|---|
|
|
Content for cell 1 |
Content for cell 2 |
Content for cell 3 |
|
|
Content for cell 1 |
Content for cell 2 |
Content for cell 3 |
Target calculator
Testimonial with media
Add your testimonial here.
Click here)
)
Typewriter wrapper
List out different names
Vimeo video
YouTube video
Footer banner
Tony 1
This is a test for the sticky nav.
Tony 2
Subheading
This is a test for the sticky nav.
Tony 3
This is a test for the sticky nav.