Company Information

If you mention a company or companies in your article, it can be helpful to provide a sidebar of information about that company for a reader who might be unfamiliar. You can also use this as a sort of subtle CTA to give more information about your company if this is an article especially targeted at lead generation.

Examples

Information on the side

How to make information on the side

Information on the full-width multi-column block

4 columns grid HTML

<!--Company Information (grids, 4 cols)-->
<div class="stk-snippets-company-information stk-grid" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="4" class="stk-grid-col stk-theme_00000__pad_ver_1 stk-grid-col_last">
    <div data-ce-tag="grid" class="stk-grid stk-grid__layout_reverse">
      <div data-ce-tag="grid-col" data-col-width="3" class="stk-grid-col stk-theme_00000__pad_hor_1 stk-grid-col_last">
        <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_05">PROFILE</h4>
        <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Neoscape</h3>
        <p data-ce-tag="paragraph" class="stk-reset">is a full-service creative agency specializing in branding and visual storytelling for institutional and real-estate clients.</p>
        <hr class="stk-reset stk-theme_00000__separator_basic_divider">
        <p class="stk-reset stk-theme_00000__mb_0"><strong class="stk-reset stk-theme_00000__mb_0">Headquarters:</strong> Boston</p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Number of employees:</strong> 80<br></span></p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Founded in:</strong> 1995<br></span></p>
        <p class="stk-reset"><span class="stk-reset"><strong class="stk-reset">Industry:</strong> Marketing and advertising
</span></p>
      </div>
      <div data-col-width="1" data-ce-tag="grid-col" class="stk-grid-col">
        <figure class="stk-reset stk-image-figure stk-snippets-company-information__photo" data-ce-tag="image-figure">
          <div data-ce-tag="mask" class="stk-mask"></div>
        </figure>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col" data-col-width="4">
        <p class="stk-reset ce-element--empty stk-element_no-text"></p>
      </div>
      <div data-col-width="2" data-ce-tag="grid-col" class="stk-grid-col stk-theme_00000__pad_hor_1 stk-grid-col_last">
        <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-desktop-hidden">
        <p class="stk-reset stk-theme_00000__style_small_text"><span class="stk-reset">Follow Neoscape on</span> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Twitter</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Linkedin</a><span class="stk-reset"> and</span> <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a></p>
      </div>
    </div>
  </div>
</div>

6 columns grid HTML

<!--Company Information (grids, 6 cols)-->
<div class="stk-snippets-company-information stk-grid" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="6" class="stk-grid-col stk-theme_00000__pad_ver_1 stk-grid-col_last">
    <div data-ce-tag="grid" class="stk-grid stk-grid__layout_reverse">
      <div data-ce-tag="grid-col" data-col-width="4" class="stk-grid-col stk-theme_0000__pad_hor_1 stk-grid-col_last">
        <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_05">PROFILE</h4>
        <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Neoscape</h3>
        <p data-ce-tag="paragraph" class="stk-reset">is a full-service creative agency specializing in branding and visual storytelling for institutional and real-estate clients.</p>
        <hr class="stk-reset stk-theme_00000__separator_basic_divider">
        <p class="stk-reset stk-theme_00000__mb_0"><strong class="stk-reset stk-theme_00000__mb_0">Headquarters:</strong> Boston</p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Number of employees:</strong> 80<br></span></p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Founded in:</strong> 1995<br></span></p>
        <p class="stk-reset"><span class="stk-reset"><strong class="stk-reset">Industry:</strong> Marketing and advertising
</span></p>
      </div>
      <div data-col-width="2" data-ce-tag="grid-col" class="stk-grid-col">
        <figure class="stk-reset stk-image-figure stk-snippets-company-information__photo" data-ce-tag="image-figure">
          <div data-ce-tag="mask" class="stk-mask"></div>
        </figure>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col" data-col-width="4">
        <p class="stk-reset ce-element--empty stk-element_no-text"></p>
      </div>
      <div data-col-width="2" data-ce-tag="grid-col" class="stk-grid-col stk-theme_00000__pad_hor_1 stk-grid-col_last">
        <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-desktop-hidden">
        <p class="stk-reset stk-theme_00000__style_small_text"><span class="stk-reset">Follow Neoscape on</span> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Twitter</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Linkedin</a><span class="stk-reset"> and</span> <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a></p>
      </div>
    </div>
  </div>
</div>

10 columns grid HTML

<!--Company Information (grids, 10 cols)-->
<div class="stk-snippets-company-information stk-grid" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="10" class="stk-grid-col stk-theme_00000__pad_ver_1 stk-grid-col_last">
    <div data-ce-tag="grid" class="stk-grid stk-grid__layout_reverse">
      <div data-ce-tag="grid-col" data-col-width="6" class="stk-grid-col stk-theme_00000__pad_hor_1 stk-grid-col_last">
        <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_05">PROFILE</h4>
        <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Neoscape</h3>
        <p data-ce-tag="paragraph" class="stk-reset">is a full-service creative agency specializing in branding and visual storytelling for institutional and real-estate clients.</p>
        <hr class="stk-reset stk-theme_00000__separator_basic_divider">
        <p class="stk-reset stk-theme_00000__mb_0"><strong class="stk-reset stk-theme_00000__mb_0">Headquarters:</strong> Boston</p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Number of employees:</strong> 80<br></span></p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Founded in:</strong> 1995<br></span></p>
        <p class="stk-reset"><span class="stk-reset"><strong class="stk-reset">Industry:</strong> Marketing and advertising
</span></p>
      </div>
      <div data-col-width="4" data-ce-tag="grid-col" class="stk-grid-col">
        <figure class="stk-reset stk-image-figure stk-snippets-company-information__photo" data-ce-tag="image-figure">
          <div data-ce-tag="mask" class="stk-mask"></div>
        </figure>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col" data-col-width="6">
        <p class="stk-reset ce-element--empty stk-element_no-text"></p>
      </div>
      <div data-col-width="4" data-ce-tag="grid-col" class="stk-grid-col stk-theme_00000__pad_hor_1 stk-grid-col_last">
        <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-desktop-hidden">
        <p class="stk-reset stk-theme_00000__style_small_text"><span class="stk-reset">Follow Neoscape on</span> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Twitter</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Linkedin</a><span class="stk-reset"> and</span> <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a></p>
      </div>
    </div>
  </div>
</div>

12 columns grid HTML

<!--Company Information (grids, 12 cols)-->
<div class="stk-snippets-company-information stk-grid" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="12" class="stk-grid-col stk-theme_00000__pad_ver_1 stk-grid-col_last">
    <div data-ce-tag="grid" class="stk-grid stk-grid__layout_reverse">
      <div data-ce-tag="grid-col" data-col-width="8" class="stk-grid-col stk-theme_00000__pad_hor_1 stk-grid-col_last">
        <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0 stk-theme_00000__mb_05">PROFILE</h4>
        <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header stk-theme_00000__mb_05">Neoscape</h3>
        <p data-ce-tag="paragraph" class="stk-reset">is a full-service creative agency specializing in branding and visual storytelling for institutional and real-estate clients.</p>
        <hr class="stk-reset stk-theme_00000__separator_basic_divider">
        <p class="stk-reset stk-theme_00000__mb_0"><strong class="stk-reset stk-theme_00000__mb_0">Headquarters:</strong> Boston</p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Number of employees:</strong> 80<br></span></p>
        <p class="stk-reset stk-theme_00000__mb_0"><span class="stk-reset"><strong class="stk-reset">Founded in:</strong> 1995<br></span></p>
        <p class="stk-reset"><span class="stk-reset"><strong class="stk-reset">Industry:</strong> Marketing and advertising
</span></p>
      </div>
      <div data-col-width="4" data-ce-tag="grid-col" class="stk-grid-col">
        <figure class="stk-reset stk-image-figure stk-snippets-company-information__photo" data-ce-tag="image-figure">
          <div data-ce-tag="mask" class="stk-mask"></div>
        </figure>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col" data-col-width="4">
        <p class="stk-reset ce-element--empty stk-element_no-text"></p>
      </div>
      <div data-col-width="2" data-ce-tag="grid-col" class="stk-grid-col stk-theme_00000__pad_hor_1 stk-grid-col_last">
        <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-desktop-hidden">
        <p class="stk-reset stk-theme_00000__style_small_text"><span class="stk-reset">Follow Neoscape on</span> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Twitter</a><span class="stk-reset">,</span> <a href="https://example.com" target="_blank" class="stk-reset">Linkedin</a><span class="stk-reset"> and</span> <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a></p>
      </div>
    </div>
  </div>
</div>

CSS

.stk-snippets-company-information {
  background: linear-gradient(to right, black 1px, #fff5d3 1px, #fff5d3 calc(100% - 1px), black calc(100% - 1px)); /* Background color and borders */
}

.stk-snippets-company-information__photo {
  align-self: center;
}

.stk-snippets-company-information__photo img {
  object-fit: cover;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .stk-snippets-company-information__photo,
  .stk-snippets-company-information__photo .stk-mask,
  .stk-snippets-company-information__photo img {
    width: 260px; /* image width */
    height: 260px; /* image height */
  }
}

@media (max-width: 768px) {
  .stk-snippets-company-information {
    margin-right: -10px;
    margin-left: -10px;
  }

  .stk-snippets-company-information__photo,
  .stk-snippets-company-information__photo .stk-mask,
  .stk-snippets-company-information__photo img {
    width: 220px; /* image width */
    height: 220px; /* image height */
  }
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-company-information {
    margin-right: -10px;
    margin-left: -10px;
  }

  .stk-snippets-company-information__photo,
  .stk-snippets-company-information__photo .stk-mask,
  .stk-snippets-company-information__photo img {
    width: 220px; /* image width */
    height: 220px; /* image height */
  }
}

Select the code component with the same number of columns as in the grid system of your post.

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust border width and color in the component CSS.

Content Experience Impact

Similar to expert profiles, providing a quick rundown of information about your company or a company mentioned in your article can be a great way to show credibility and build trust with readers, prevents the reader from having to search for the information themselves (and therefore leave your site), and makes the company you’re featuring feel extra special. On top of that, this can be an opportunity to build trust and even convert a customer if you’re sharing relevant and interesting information about your own company.

Dos

Where possible, include data or numerical information about the company. Readers’ eyes are drawn towards numbers, so this can help your company information stand out more.

Don'ts

Don’t give all the information about the company—instead, consider what is most relevant to the content at hand.

Learn More

Extra Inspiration