Image card css and html

Site URL: https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

I'm looking for the code for image cards.
 

i'm active so often with making new posts that I ideally just want to enter the code that would be to make an image card into the coding box. i generate my own text and info that i'd want to plug into that image card without having to make a new image card every single time. can anyone help with this?
 

I look at this one for an example which is #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021


I'd like to re-create this in a CODE box. Please help. Ideally as an example i'd like to recreate the above block-yui but plug the below span, etc into this custom image card box.

<span style="font-size:18px"><strong>Mocha Machine</strong></span><br /><span style="color:#000000"><span font-size:13px>Beachwood Brewing & Blendery</span><br /><span style="font-size:12px"><em>9.20% - Imperial Coffee Chocolate Porter </em></span><br /><br /><span style="font-size:11px">Mocha Machine is a well-engineered endeavor in massive aromatics and rich flavors. Brewed with an array British and German malts, this burly brew is infused with masterfully roasted coffee from Portola Coffee Lab in Costa Mesa, CA. It is then aged on cacao nibs from Equador, adding an awesomely deep dimension of fudge.</span><br /><br /><span style="font-size:10px"><strong>Characteristics: </strong>Coffee, Mocha, Creamy, Nuts, Dark Fruits, Chocolate, Fudge, Roasty, Dark</span><br /><br /><span style="font-size:10px">SKU 108676 - 24(1 X 0.354 L) - $4.75<br />Shipped from Container World</span>                
                
This is the div code for the image card at the aforementioned  #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

                
                
                
                
                




<div id="block-yui_3_17_2_1_1628285269767_20362" class="yui3-widget yui3-block-base yui3-block-parent-base sqs-block-image yui3-block-image-base yui3-block-image sqs-block image-block sqs-block-editable yui3-dd-drop yui3-block-image-focused sqs-block-focused sqs-block-editing sqs-edit-dialog-open" aria-labelledby="yui_3_17_2_1_1633652808718_8423"><div class="sqs-layout-insert-point-container"><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-top"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-bottom sqs-layout-insert-point-topmost"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div></div><div id="yui_3_17_2_1_1633652808718_992" class="yui3-block-image-content sqs-block-content image-block-outer-wrapper layout-caption-below design-layout-card image-position-right image-block-v2 sqs-text-ready" data-scrolled="true"><div id="yui_3_17_2_1_1633652808718_21332"><div id="yui_3_17_2_1_1633652808718_1031" class="yui3-widget sqs-image stretch sqs-intrinsic intrinsic yui3-resize" style="overflow: hidden; transform: translate3d(0px, 0px, 0px); max-width: 500px;"><div id="yui_3_17_2_1_1633652808718_1033" class="sqs-image-content" style="padding-bottom: 100%;"><img style="cursor: auto; object-position: 50% 50%; object-fit: cover;" data-image-focal-point="0.5,0.5" data-parent-ratio="1.0" class="" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f838db03f116375541aae8f/1628285409210-JO79PCU53HONTKECV1WE/tongue+tied+on+white.png?format=500w"><div class="sqs-editing-overlay"></div></div></div></div><div class="image-card-wrapper sqs-image-card image-block-animation-text" id="yui_3_17_2_1_1633652808718_19036"><div class="image-card sqs-dynamic-text-container" id="yui_3_17_2_1_1633652808718_19035"><div id="yui_3_17_2_1_1633652808718_1123" class="sqs-dd-invalid-handle yui3-widget sqs-html image-title-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-title sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><h1 style="white-space:pre-wrap;"><strong><em>NICKEL BROOK BREWING </em></strong>Tongue Tied</h1></div></div><div id="yui_3_17_2_1_1633652808718_1157" class="sqs-dd-invalid-handle yui3-widget sqs-html image-subtitle-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-subtitle sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><p class="" style="white-space:pre-wrap;"><strong>5.60% - Juicy Double Dry-Hopped IPA</strong></p><p class="" style="white-space:pre-wrap;">This brew is sure to tie your taste buds up in knots thanks to mouth-watering notes of papaya and pineapple. Tongue Tied is a bright and juicy IPA with a soft kiss of stone fruit on the finish.</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Characteristics:</strong></p><p class="" style="white-space:pre-wrap;">Bright, Juicy, Stone Fruit, Citrus, Papaya, Pineapple</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Find at:</strong></p><p class="" style="white-space:pre-wrap;">NEW BEER - <a href="mailto:office@Beersupply.ca"><strong>REQUEST IT BY EMAILING US</strong></a></p></div></div><div class="image-button-wrapper" id="yui_3_17_2_1_1633652808718_19040" style="display: none;"><div class="image-button sqs-dynamic-text" data-width-percentage="0" id="yui_3_17_2_1_1633652808718_19039" style="font-size: 0%;"><div class="image-button-inner" id="yui_3_17_2_1_1633652808718_19038"><a id="yui_3_17_2_1_1633652808718_19037"><div id="yui_3_17_2_1_1633652808718_1195" class="sqs-dd-invalid-handle yui3-widget sqs-html sqs-empty sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content" contenteditable="true"><span class="rte-placeholder ProseMirror-widget" data-placeholder="Add text" contenteditable="false"></span><br></div></div></a></div></div></div></div></div><div id="yui_3_17_2_1_1633652808718_1107" class="sqs-dd-invalid-handle image-caption-wrapper sqs-image-caption yui3-widget sqs-html sqs-empty sqs-editing" style="max-width: 500px;"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte image-caption sqs-html-content" contenteditable="true"><p class="rte-placeholder" data-rte-preserve-empty="true" style="white-space:pre-wrap;" data-placeholder="Add an image description"><br></p></div></div></div><div class="sqs-block-outline" id="yui_3_17_2_1_1633652808718_18540"></div><span data-test="block-label" class="sqs-block-label-tag" id="yui_3_17_2_1_1633652808718_8423">Image</span><div id="yui_3_17_2_1_1633652808718_8440" class="yui3-widget sqs-widget sqs-block-editor-button-container" role="toolbar"><div id="yui_3_17_2_1_1633652808718_8442" class="sqs-block-editor-button-container-content" data-test="block-toolbar"><div id="yui_3_17_2_1_1633652808718_8456" class="yui3-widget sqs-widget sqs-label"><div id="yui_3_17_2_1_1633652808718_8458" class="sqs-label-content">Image</div></div><div id="yui_3_17_2_1_1633652808718_8486" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--edit" data-test="button" title="Edit" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8488" class="sqs-button-vanilla-content active"><div class="label">Edit</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div id="yui_3_17_2_1_1633652808718_8520" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--remove" data-test="button" title="Remove" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8522" class="sqs-button-vanilla-content active"><div class="label">Remove</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div class="sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded Class-button-wrapper" title="Class" style="width: auto;"><div class="sqs-button-vanilla-content addClass-button active" data-action="addClass" data-not-block="-1"><div class="label" style="line-height:36px;color:#000!important;padding:0 10px" data-not-block="-1" data-action="addClass">Classes</div></div></div></div></div><div class="yui3-resize-handles-wrapper"><div class="yui3-resize-handle yui3-resize-handle-b"><div class="yui3-resize-handle-inner yui3-resize-handle-inner-b">&nbsp;</div></div></div></div>

On 10/8/2021 at 7:32 AM, mdr_willis said:

Site URL: https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

I'm looking for the code for image cards.
 

i'm active so often with making new posts that I ideally just want to enter the code that would be to make an image card into the coding box. i generate my own text and info that i'd want to plug into that image card without having to make a new image card every single time. can anyone help with this?
 

I look at this one for an example which is #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021


I'd like to re-create this in a CODE box. Please help. Ideally as an example i'd like to recreate the above block-yui but plug the below span, etc into this custom image card box.

<span style="font-size:18px"><strong>Mocha Machine</strong></span><br /><span style="color:#000000"><span font-size:13px>Beachwood Brewing & Blendery</span><br /><span style="font-size:12px"><em>9.20% - Imperial Coffee Chocolate Porter </em></span><br /><br /><span style="font-size:11px">Mocha Machine is a well-engineered endeavor in massive aromatics and rich flavors. Brewed with an array British and German malts, this burly brew is infused with masterfully roasted coffee from Portola Coffee Lab in Costa Mesa, CA. It is then aged on cacao nibs from Equador, adding an awesomely deep dimension of fudge.</span><br /><br /><span style="font-size:10px"><strong>Characteristics: </strong>Coffee, Mocha, Creamy, Nuts, Dark Fruits, Chocolate, Fudge, Roasty, Dark</span><br /><br /><span style="font-size:10px">SKU 108676 - 24(1 X 0.354 L) - $4.75<br />Shipped from Container World</span>                
                
This is the div code for the image card at the aforementioned  #block-yui_3_17_2_1_1628285269767_20362 on https://beersupply.ca/nbf/tasty-nickelbrook-august-2021

                
                
                
                
                




<div id="block-yui_3_17_2_1_1628285269767_20362" class="yui3-widget yui3-block-base yui3-block-parent-base sqs-block-image yui3-block-image-base yui3-block-image sqs-block image-block sqs-block-editable yui3-dd-drop yui3-block-image-focused sqs-block-focused sqs-block-editing sqs-edit-dialog-open" aria-labelledby="yui_3_17_2_1_1633652808718_8423"><div class="sqs-layout-insert-point-container"><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-top"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div><div class="sqs-prevent-block-focus-change sqs-layout-insert-point sqs-layout-insert-point-type-block sqs-layout-insert-point-position-bottom sqs-layout-insert-point-topmost"><button class="sqs-layout-insert-point-button" data-test="insert-point-trigger"><span class="insert-point-icon"></span></button><span class="sqs-layout-insert-point-line"></span></div></div><div id="yui_3_17_2_1_1633652808718_992" class="yui3-block-image-content sqs-block-content image-block-outer-wrapper layout-caption-below design-layout-card image-position-right image-block-v2 sqs-text-ready" data-scrolled="true"><div id="yui_3_17_2_1_1633652808718_21332"><div id="yui_3_17_2_1_1633652808718_1031" class="yui3-widget sqs-image stretch sqs-intrinsic intrinsic yui3-resize" style="overflow: hidden; transform: translate3d(0px, 0px, 0px); max-width: 500px;"><div id="yui_3_17_2_1_1633652808718_1033" class="sqs-image-content" style="padding-bottom: 100%;"><img style="cursor: auto; object-position: 50% 50%; object-fit: cover;" data-image-focal-point="0.5,0.5" data-parent-ratio="1.0" class="" data-image-resolution="500w" src="https://images.squarespace-cdn.com/content/v1/5f838db03f116375541aae8f/1628285409210-JO79PCU53HONTKECV1WE/tongue+tied+on+white.png?format=500w"><div class="sqs-editing-overlay"></div></div></div></div><div class="image-card-wrapper sqs-image-card image-block-animation-text" id="yui_3_17_2_1_1633652808718_19036"><div class="image-card sqs-dynamic-text-container" id="yui_3_17_2_1_1633652808718_19035"><div id="yui_3_17_2_1_1633652808718_1123" class="sqs-dd-invalid-handle yui3-widget sqs-html image-title-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-title sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><h1 style="white-space:pre-wrap;"><strong><em>NICKEL BROOK BREWING </em></strong>Tongue Tied</h1></div></div><div id="yui_3_17_2_1_1633652808718_1157" class="sqs-dd-invalid-handle yui3-widget sqs-html image-subtitle-wrapper sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content image-subtitle sqs-dynamic-text" contenteditable="true" data-width-percentage="42.4" style="font-size: 42.4%;"><p class="" style="white-space:pre-wrap;"><strong>5.60% - Juicy Double Dry-Hopped IPA</strong></p><p class="" style="white-space:pre-wrap;">This brew is sure to tie your taste buds up in knots thanks to mouth-watering notes of papaya and pineapple. Tongue Tied is a bright and juicy IPA with a soft kiss of stone fruit on the finish.</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Characteristics:</strong></p><p class="" style="white-space:pre-wrap;">Bright, Juicy, Stone Fruit, Citrus, Papaya, Pineapple</p><p class="sqsrte-large" style="white-space:pre-wrap;"><strong>Find at:</strong></p><p class="" style="white-space:pre-wrap;">NEW BEER - <a href="mailto:office@Beersupply.ca"><strong>REQUEST IT BY EMAILING US</strong></a></p></div></div><div class="image-button-wrapper" id="yui_3_17_2_1_1633652808718_19040" style="display: none;"><div class="image-button sqs-dynamic-text" data-width-percentage="0" id="yui_3_17_2_1_1633652808718_19039" style="font-size: 0%;"><div class="image-button-inner" id="yui_3_17_2_1_1633652808718_19038"><a id="yui_3_17_2_1_1633652808718_19037"><div id="yui_3_17_2_1_1633652808718_1195" class="sqs-dd-invalid-handle yui3-widget sqs-html sqs-empty sqs-editing"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte sqs-html-content" contenteditable="true"><span class="rte-placeholder ProseMirror-widget" data-placeholder="Add text" contenteditable="false"></span><br></div></div></a></div></div></div></div></div><div id="yui_3_17_2_1_1633652808718_1107" class="sqs-dd-invalid-handle image-caption-wrapper sqs-image-caption yui3-widget sqs-html sqs-empty sqs-editing" style="max-width: 500px;"><div class="yui3-widget sqs-widget sqs-rte yui3-texteditorrosetta yui3-texteditorrosetta-content ProseMirror rte image-caption sqs-html-content" contenteditable="true"><p class="rte-placeholder" data-rte-preserve-empty="true" style="white-space:pre-wrap;" data-placeholder="Add an image description"><br></p></div></div></div><div class="sqs-block-outline" id="yui_3_17_2_1_1633652808718_18540"></div><span data-test="block-label" class="sqs-block-label-tag" id="yui_3_17_2_1_1633652808718_8423">Image</span><div id="yui_3_17_2_1_1633652808718_8440" class="yui3-widget sqs-widget sqs-block-editor-button-container" role="toolbar"><div id="yui_3_17_2_1_1633652808718_8442" class="sqs-block-editor-button-container-content" data-test="block-toolbar"><div id="yui_3_17_2_1_1633652808718_8456" class="yui3-widget sqs-widget sqs-label"><div id="yui_3_17_2_1_1633652808718_8458" class="sqs-label-content">Image</div></div><div id="yui_3_17_2_1_1633652808718_8486" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--edit" data-test="button" title="Edit" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8488" class="sqs-button-vanilla-content active"><div class="label">Edit</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div id="yui_3_17_2_1_1633652808718_8520" class="yui3-widget sqs-widget sqs-data-widget sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded sqs-dialog-button--remove" data-test="button" title="Remove" role="button" tabindex="0"><div id="yui_3_17_2_1_1633652808718_8522" class="sqs-button-vanilla-content active"><div class="label">Remove</div><div class="waiting" hidden="hidden" style="display: none;"></div></div></div><div class="sqs-dialog-field sqs-button-vanilla normal-button data-state-loaded Class-button-wrapper" title="Class" style="width: auto;"><div class="sqs-button-vanilla-content addClass-button active" data-action="addClass" data-not-block="-1"><div class="label" style="line-height:36px;color:#000!important;padding:0 10px" data-not-block="-1" data-action="addClass">Classes</div></div></div></div></div><div class="yui3-resize-handles-wrapper"><div class="yui3-resize-handle yui3-resize-handle-b"><div class="yui3-resize-handle-inner yui3-resize-handle-inner-b">&nbsp;</div></div></div></div>

Have you tried using the code block in squarespace yet?

yes and i need the code to put that in there. this is what i've asked.

On 10/27/2021 at 12:04 AM, mdr_willis said:

yes and i need the code to put that in there. this is what i've asked.

Did you solve or still need help?