HTML with inline styling
Style attributes hold ordinary appearance values. Supporting CSS carries details that do not fit in a style attribute, such as pseudo elements, font declarations and recoverable resizing rules. Keep that style block with the markup.
<style>
@font-face{font-family:SourceManrope;src:url("https://getcopylook.com/assets/fonts/Manrope_variable.ttf");}
.cl-e85335193a93[data-cl="n0"]{background-attachment:scroll;background-clip:border-box;background-color:rgb(255, 255, 255);background-image:none;background-origin:padding-box;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(221, 226, 238);border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-bottom-style:solid;border-bottom-width:1px;border-left-color:rgb(221, 226, 238);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 226, 238);border-right-style:solid;border-right-width:1px;border-top-color:rgb(221, 226, 238);border-top-left-radius:20px;border-top-right-radius:20px;border-top-style:solid;border-top-width:1px;box-shadow:rgba(20, 35, 66, 0.063) 0px 10px 30px 0px;box-sizing:border-box;padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:24px;width:520px;}
.cl-e85335193a93 [data-cl="n1"]{box-sizing:border-box;font-size:28px;margin-bottom:10px;margin-left:0px;margin-right:0px;margin-top:18px;}
.cl-e85335193a93 [data-cl="n2"]{box-sizing:border-box;color:rgb(89, 100, 123);line-height:27.2px;}
.cl-e85335193a93 [data-cl="n3"]{align-items:center;background-attachment:scroll;background-clip:border-box;background-color:rgb(39, 93, 242);background-image:none;background-origin:padding-box;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-style:none;border-bottom-width:0px;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:12px;border-top-right-radius:12px;border-top-style:none;border-top-width:0px;box-sizing:border-box;color:rgb(255, 255, 255);column-gap:10px;display:inline-flex;font-weight:700;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;row-gap:10px;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;}
.cl-e85335193a93 [data-cl="n4"]{box-sizing:border-box;}
.cl-e85335193a93 [data-cl="n5"]{box-sizing:border-box;}
.cl-e85335193a93[data-cl="n0"]::before{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(39, 93, 242);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(39, 93, 242);border-left-style:none;border-left-width:0px;border-right-color:rgb(39, 93, 242);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(39, 93, 242);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:content-box;clear:none;clip-path:none;color:rgb(39, 93, 242);column-gap:normal;content:"FIELD NOTES";cursor:auto;display:inline;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:11px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:2px;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:0px 0px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(39, 93, 242);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:0px 0px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93[data-cl="n0"],.cl-e85335193a93 [data-cl="n1"],.cl-e85335193a93 [data-cl="n2"],.cl-e85335193a93 [data-cl="n3"],.cl-e85335193a93 [data-cl="n4"],.cl-e85335193a93 [data-cl="n5"]{box-sizing:border-box;}
.cl-e85335193a93[data-cl="n0"]{background-attachment:initial;background-clip:initial;background-color:white;background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;border-bottom-color:rgb(221, 226, 238);border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-bottom-style:solid;border-bottom-width:1px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:rgb(221, 226, 238);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 226, 238);border-right-style:solid;border-right-width:1px;border-top-color:rgb(221, 226, 238);border-top-left-radius:20px;border-top-right-radius:20px;border-top-style:solid;border-top-width:1px;box-shadow:rgba(20, 35, 66, 0.063) 0px 10px 30px;padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:24px;width:min(100%, 520px);}
.cl-e85335193a93 [data-cl="n3"]{align-items:center;background-attachment:initial;background-clip:initial;background-color:rgb(39, 93, 242);background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;border-bottom-color:currentcolor;border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-style:none;border-bottom-width:0px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:currentcolor;border-left-style:none;border-left-width:0px;border-right-color:currentcolor;border-right-style:none;border-right-width:0px;border-top-color:currentcolor;border-top-left-radius:12px;border-top-right-radius:12px;border-top-style:none;border-top-width:0px;color:white;column-gap:10px;display:inline-flex;font-weight:700;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;row-gap:10px;text-decoration-color:initial;text-decoration-line:none;text-decoration-style:initial;text-decoration-thickness:initial;}
.cl-e85335193a93 [data-cl="n1"]{font-size:28px;margin-bottom:10px;margin-left:0px;margin-right:0px;margin-top:18px;}
.cl-e85335193a93 [data-cl="n2"]{color:rgb(89, 100, 123);line-height:1.7;}
.cl-e85335193a93 [data-cl="n3"]:hover{background-attachment:initial;background-clip:initial;background-color:rgb(22, 67, 191);background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;}
.cl-e85335193a93[data-cl="n0"]::before{color:rgb(39, 93, 242);content:"FIELD NOTES";font-size:11px;letter-spacing:2px;}
</style>
<article id="cl-e85335193a93-n0" class="cl-e85335193a93" data-cl="n0" style="align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-position:0% 0%;border-collapse:separate;border-spacing:0px;bottom:auto;clear:none;clip-path:none;color:rgb(20, 35, 66);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:16px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;paint-order:normal;perspective:none;perspective-origin:260px 129.445px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(20, 35, 66);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:260px 129.445px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;word-break:normal;word-spacing:0px;z-index:auto;">
<h2 data-cl="n1" style="align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(20, 35, 66);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(20, 35, 66);border-left-style:none;border-left-width:0px;border-right-color:rgb(20, 35, 66);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(20, 35, 66);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;clear:none;clip-path:none;color:rgb(20, 35, 66);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:235px 19.25px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(20, 35, 66);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:235px 19.25px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;">Good ideas start small.</h2>
<p data-cl="n2" style="align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(89, 100, 123);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(89, 100, 123);border-left-style:none;border-left-width:0px;border-right-color:rgb(89, 100, 123);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(89, 100, 123);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;clear:none;clip-path:none;column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:16px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:16px;margin-left:0px;margin-right:0px;margin-top:16px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:235px 27.1953px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(89, 100, 123);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:235px 27.1953px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;">
Select this card, preview its design, then copy it into a clean project.
</p>
<button id="cl-e85335193a93-n3" data-cl="n3" style="align-content:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:auto;aspect-ratio:auto;backdrop-filter:none;background-position:0% 0%;border-collapse:separate;border-spacing:0px;bottom:auto;box-shadow:none;clear:none;clip-path:none;cursor:default;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:44px;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;paint-order:normal;perspective:none;perspective-origin:81.1484px 22px;position:static;resize:none;right:auto;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:81.1484px 22px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:162.297px;word-break:normal;word-spacing:0px;z-index:auto;">
Keep exploring
<svg aria-hidden="true" height="20" viewBox="0 0 20 20" width="20" data-cl="n4" style="align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:normal;cursor:default;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:20px;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:auto;min-width:auto;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:hidden;overflow-y:hidden;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:10px 10px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:10px 10px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:20px;word-break:normal;word-spacing:0px;z-index:auto;">
<path d="M3 10h13m-5-5 5 5-5 5" fill="none" stroke="currentColor" data-cl="n5" style="align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:normal;cursor:default;display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:0px 0px;position:static;resize:none;right:auto;row-gap:normal;stroke:rgb(255, 255, 255);stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:0px 0px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;"></path>
</svg>
</button>
</article>HTML with scoped CSS
Generated classes keep the selected component’s styling together. The primary copy includes both the markup and scoped CSS. Use the CSS view when you want to place those rules in your own stylesheet.
<style>
@font-face{font-family:SourceManrope;src:url("https://getcopylook.com/assets/fonts/Manrope_variable.ttf");}
.cl-e85335193a93[data-cl="n0"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgb(255, 255, 255);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(221, 226, 238);border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-bottom-style:solid;border-bottom-width:1px;border-collapse:separate;border-left-color:rgb(221, 226, 238);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 226, 238);border-right-style:solid;border-right-width:1px;border-spacing:0px;border-top-color:rgb(221, 226, 238);border-top-left-radius:20px;border-top-right-radius:20px;border-top-style:solid;border-top-width:1px;bottom:auto;box-shadow:rgba(20, 35, 66, 0.063) 0px 10px 30px 0px;box-sizing:border-box;clear:none;clip-path:none;color:rgb(20, 35, 66);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:16px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:24px;paint-order:normal;perspective:none;perspective-origin:260px 129.445px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(20, 35, 66);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:260px 129.445px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:520px;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93 [data-cl="n1"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(20, 35, 66);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(20, 35, 66);border-left-style:none;border-left-width:0px;border-right-color:rgb(20, 35, 66);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(20, 35, 66);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(20, 35, 66);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:28px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:10px;margin-left:0px;margin-right:0px;margin-top:18px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:235px 19.25px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(20, 35, 66);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:235px 19.25px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93 [data-cl="n2"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(89, 100, 123);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(89, 100, 123);border-left-style:none;border-left-width:0px;border-right-color:rgb(89, 100, 123);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(89, 100, 123);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(89, 100, 123);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:16px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:27.2px;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:16px;margin-left:0px;margin-right:0px;margin-top:16px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:235px 27.1953px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(89, 100, 123);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:235px 27.1953px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93 [data-cl="n3"]{align-content:normal;align-items:center;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:auto;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgb(39, 93, 242);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:12px;border-top-right-radius:12px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:10px;cursor:default;display:inline-flex;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:44px;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;paint-order:normal;perspective:none;perspective-origin:81.1484px 22px;position:static;resize:none;right:auto;row-gap:10px;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:81.1484px 22px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:162.297px;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93 [data-cl="n4"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:normal;cursor:default;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:20px;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:auto;min-width:auto;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:hidden;overflow-y:hidden;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:10px 10px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:10px 10px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:20px;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93 [data-cl="n5"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:normal;cursor:default;display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:0px 0px;position:static;resize:none;right:auto;row-gap:normal;stroke:rgb(255, 255, 255);stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:0px 0px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93[data-cl="n0"]::before{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(39, 93, 242);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(39, 93, 242);border-left-style:none;border-left-width:0px;border-right-color:rgb(39, 93, 242);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(39, 93, 242);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:content-box;clear:none;clip-path:none;color:rgb(39, 93, 242);column-gap:normal;content:"FIELD NOTES";cursor:auto;display:inline;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:11px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:2px;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:0px 0px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(39, 93, 242);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:0px 0px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}
.cl-e85335193a93[data-cl="n0"],.cl-e85335193a93 [data-cl="n1"],.cl-e85335193a93 [data-cl="n2"],.cl-e85335193a93 [data-cl="n3"],.cl-e85335193a93 [data-cl="n4"],.cl-e85335193a93 [data-cl="n5"]{box-sizing:border-box;}
.cl-e85335193a93[data-cl="n0"]{background-attachment:initial;background-clip:initial;background-color:white;background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;border-bottom-color:rgb(221, 226, 238);border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-bottom-style:solid;border-bottom-width:1px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:rgb(221, 226, 238);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 226, 238);border-right-style:solid;border-right-width:1px;border-top-color:rgb(221, 226, 238);border-top-left-radius:20px;border-top-right-radius:20px;border-top-style:solid;border-top-width:1px;box-shadow:rgba(20, 35, 66, 0.063) 0px 10px 30px;padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:24px;width:min(100%, 520px);}
.cl-e85335193a93 [data-cl="n3"]{align-items:center;background-attachment:initial;background-clip:initial;background-color:rgb(39, 93, 242);background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;border-bottom-color:currentcolor;border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-style:none;border-bottom-width:0px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:currentcolor;border-left-style:none;border-left-width:0px;border-right-color:currentcolor;border-right-style:none;border-right-width:0px;border-top-color:currentcolor;border-top-left-radius:12px;border-top-right-radius:12px;border-top-style:none;border-top-width:0px;color:white;column-gap:10px;display:inline-flex;font-weight:700;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;row-gap:10px;text-decoration-color:initial;text-decoration-line:none;text-decoration-style:initial;text-decoration-thickness:initial;}
.cl-e85335193a93 [data-cl="n1"]{font-size:28px;margin-bottom:10px;margin-left:0px;margin-right:0px;margin-top:18px;}
.cl-e85335193a93 [data-cl="n2"]{color:rgb(89, 100, 123);line-height:1.7;}
.cl-e85335193a93 [data-cl="n3"]:hover{background-attachment:initial;background-clip:initial;background-color:rgb(22, 67, 191);background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;}
.cl-e85335193a93[data-cl="n0"]::before{color:rgb(39, 93, 242);content:"FIELD NOTES";font-size:11px;letter-spacing:2px;}
</style>
<article id="cl-e85335193a93-n0" class="cl-e85335193a93" data-cl="n0">
<h2 data-cl="n1">Good ideas start small.</h2>
<p data-cl="n2">
Select this card, preview its design, then copy it into a clean project.
</p>
<button id="cl-e85335193a93-n3" data-cl="n3">
Keep exploring
<svg aria-hidden="true" height="20" viewBox="0 0 20 20" width="20" data-cl="n4">
<path d="M3 10h13m-5-5 5 5-5 5" fill="none" stroke="currentColor" data-cl="n5"></path>
</svg>
</button>
</article>Check it without the source page
Paste into a clean page without the original website’s stylesheet. Confirm that its linked images and fonts load, then compare at the source size and other useful widths.
Keep boundaries in view
The output captures appearance. It does not include the original page’s scripts, event handlers or application behavior. Original asset URLs remain links by default. More → Embedded visual assets can embed local canvas stills and permitted fonts, increasing code size.