This snippet gives you a flexible content block in the Ghost editor where you can choose between regular, wide, or fullwidth layouts. It’s like a blank canvas — you can add text, images, buttons, or any HTML inside. Whether you're building a promo section, a custom layout, or just need more space, this card adapts to the width you need.

Live Demo

Click the + button, or type / on a new line, then search for HTML card.

Regular Size

Copy & paste the following of CSS and HTML into your HTML card:

<style>
  .dscontainer-regular {
    display: flex;
    justify-content: center;
    background-color: white;
    overflow-wrap: break-word;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
  }
  .dscontainer-rcontent {
    margin: 100px !important;
  }
  .dscontainer-rcontent h1 {
    margin: 0 0 10px 0;
  }
  .dscontainer-rcontent h5 {
    margin: 0 0 30px 0;
  }
  .gh-content a {
    color: white;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
  }
  .rbutton {
    background-color: #ff1a75 !important;
    padding: 10px 25px;
    text-align: center;
    display: inline-block;
    margin-top: 35px;
    cursor: pointer;
    border-radius: 50px;
  }
  .rbutton:hover {
    background-color: #e60066;
    transition: background-color 0.3s ease;
  }

  @media (max-width: 768px) {
  .dscontainer-rcontent {
    margin: 20px !important;
    }
  .dscontainer-rcontent h5 {
    margin: 0 0 20px 0;
  }
  .rbutton {
    margin-top: 20px;
  }
  }
</style>

<div class="dscontainer-regular">
    <div class="dscontainer-rcontent">
      <h5>Regular Size Sample</h5>
      <h1>Branding is the strategic process of creating a unique identity for a product, service, or company.</h1>
      <a class="rbutton">Subscribe</a>
    </div>
</div>

Wide Size

Copy & paste the following of CSS and HTML into your HTML card:

<style>
  .dscontainer-wide {
    display: flex;
    justify-content: center;
    background-color: white;
    overflow-wrap: break-word;
    width: 100vw;
    max-width: 1200px;
    margin-left: calc(20% - 20vw);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
  }
  
  .dscontainer-wcontent {
    margin: 150px !important;
  }

  .dscontainer-wcontent h1 {
    margin: 0 0 10px 0;
  }
  .dscontainer-wcontent h5 {
    margin: 0 0 30px 0;
  }
  .wbutton {
    background-color: var(--ghost-accent-color);
    padding: 10px 25px;
    text-align: center;
    display: inline-block;
    margin-top: 35px;
    cursor: pointer;
    border-radius: 50px;
  }
  .wbutton:hover {
    background-color: #e60066;
    transition: background-color 0.3s ease;
  }
  .gh-content a {
    color: white;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.005em;
  }

  
  @media (max-width: 768px) {
  .dscontainer-wide {
      margin-left: 0;
      width: 100%;
    }
  .dscontainer-wcontent {
    margin: 20px !important;
    }
  .dscontainer-wcontent h5 {
    margin: 0 0 20px 0;
  }
  .wbutton {
    margin-top: 20px;
  }
  }
</style>

<div class="dscontainer-wide">
    <div class="dscontainer-wcontent">
      <h5>Wide Size Sample</h5>
      <h1>Branding is the strategic process of creating a unique identity for a product, service, or company.</h1>
      <a class="wbutton">Subscribe</a>
    </div>
</div>

Fullwidth Size

Copy & paste the following of CSS and HTML into your HTML card:

<style>
  body {
  overflow-x: hidden;
  }
  .dscontainer-fullwidth {
    display: flex;
    justify-content: center;
    background-color: white;
    overflow-wrap: break-word;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
  }
  .dscontainer-fwcontent {
    margin: 200px !important;
  }
  .dscontainer-fwcontent h1 {
    margin: 0 0 10px 0; 
  }
  .dscontainer-fwcontent h5 {
    margin: 0 0 30px 0; 
  }
  .fwbutton {
    background-color: var(--ghost-accent-color);
    padding: 10px 25px;
    text-align: center;
    display: inline-block;
    margin-top: 35px;
    cursor: pointer;
    border-radius: 50px;
  }
  .fwbutton:hover {
    background-color: #e60066;
    transition: background-color 0.3s ease;
  }
  .gh-content a {
    color: white;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -.005em;
  }
  
  @media (max-width: 768px) {
  .dscontainer-fwcontent {
    margin: 30px !important;
  }
  .dscontainer-fwcontent h5 {
    margin: 0 0 20px 0;
  }
  .fwbutton {
    margin-top: 20px;
  }
  }
</style>

<div class="dscontainer-fullwidth">
    <div class="dscontainer-fwcontent">
      <h5>Fullwidth Size Sample</h5>
      <h1>Branding is the strategic process of creating a unique identity for a product, service, or company.</h1>
      <a class="fwbutton">Subscribe</a>
    </div>
</div>