Blog Components
HTML Table Tags
There is a table styled using CSS, with all styles applied via attributes. Update the styles directly within the <style> tag inside the embed. Once you’re done styling, copy the entire <style> block from the embed and paste it into the <head> of the target page. Finally, copy the full HTML starting from the .table-container element, including all its content.
There is a table styled using CSS, with all styles applied via attributes. Update the styles directly within the <style> tag inside the embed. Once you’re done styling, copy the entire <style> block from the embed and paste it into the <head> of the target page. Finally, copy the full HTML starting from the .table-container element, including all its content.
Table
Click on this button to copy the HTML
of the Table
of the Table
Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|
Heading | Heading | Heading | Heading | Heading |
Heading | Heading | Heading | Heading | Heading |
Heading | Heading | Heading | Heading | Heading |
Heading | Heading | Heading | Heading | Heading |
Marketing Banners
Custom-made and styled marketing banners and elements are available for use. Each banner comes with pre-made classes, which you can use and further customize as needed.
Once your banner is styled, copy the full HTML directly from your browser’s Inspect tool. Start copying from the outer <div> with the class blog_inner-cta-component-1 and share the HTML with the client or marketing team.
📄 Example of a well-structured deliverable:Google Docs Example
Custom-made and styled marketing banners and elements are available for use. Each banner comes with pre-made classes, which you can use and further customize as needed.
Once your banner is styled, copy the full HTML directly from your browser’s Inspect tool. Start copying from the outer <div> with the class blog_inner-cta-component-1 and share the HTML with the client or marketing team.
📄 Example of a well-structured deliverable:Google Docs Example
Important Notes:These elements are placed inside a Rich Text block, which means they inherit the default styles of the rich text. To avoid styling conflicts, custom classes must be used for buttons and optionally for paragraphs and bullet lists, depending on the design needs. Add any necessary overrides with !important to the global embed on the page. For example:
.blog-banner-button {
color: var(--base-color-neutral--black) !important;
text-decoration: none !important;
font-weight: 400 !important;
}
.blog_inner-cta-component-1 p,
.blog_inner-cta-component-2 p,
.blog_inner-callout p {
margin: 0 !important;
padding: 0 !important;
}
.blog-banner-button {
color: var(--base-color-neutral--black) !important;
text-decoration: none !important;
font-weight: 400 !important;
}
.blog_inner-cta-component-1 p,
.blog_inner-cta-component-2 p,
.blog_inner-callout p {
margin: 0 !important;
padding: 0 !important;
}
Blog Inner CTA 1
Click on this button to copy the HTML
of Blog Inner CTA 1
of Blog Inner CTA 1
Heading goes here
Blog Inner CTA 2
Click on this button to copy the HTML
of Blog Inner CTA 2
of Blog Inner CTA 2
Heading goes here
Blog Inner CTA 3
Click on this button to copy the HTML
of Blog Inner CTA 3
of Blog Inner CTA 3
Blog Inner CTA 4
Click on this button to copy the HTML
of Blog Inner CTA 4
of Blog Inner CTA 4
Blog Inner CTA 3
Click on this button to copy the HTML
of Blog Inner CTA 3
of Blog Inner CTA 3
Callouts
Callout 1
Click on this button to copy the HTML
of Callout 1
of Callout 1
This is Important
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Callout 2
Click on this button to copy the HTML
of Callout 2
of Callout 2
Tips and tricks
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Callout 3
Click on this button to copy the HTML
of Callout 3
of Callout 3
This is a Note
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.