
aykut
ayayay
a
b
c
d
e
f
LOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM [a-test-abc=true]LOREMLOREM LOREMLOREM LOREMLOREM LOREMLOREM LOREM
- a
 - b
 - c
 - d
 
- a
 - b
 - c
 - d
 
Paragraph
block quote
1MY CODE BLOCK MAFAKKA1
2function article({ article }: ArticleProps) {
3  return (
4    <div className="p-2 bg-bg-subtle border border-border-def rounded-lg flex flex-col gap-5">
5      {article.previewImage && (
6        <img
7          src={article.previewImage}
8          alt="//TODO"
9          className="w-full rounded-md"
10        ></img>
11      )}
12      <div className="p-4 flex flex-col gap-6">
13        <ArticleHeader article={article}></ArticleHeader>
14        <SafeHtml
15          html={article.body}
16          components={article.components}
17        ></SafeHtml>
18      </div>
19    </div>
20  );
21}
aaabbccdd
[c-gsap-dots]
a
a
a
a
You can copy-paste this component directly into your Webflow project and style it however you want.
[ag-0-d-This is the description]
[ag-0-a-name = value]
[ag-0-a-name = value]- This is the description[li-a-name = value]Click to Copy[li-a-name = value]
 - This is the description[li-a-name = value][li-a-name = value]
 - This is the description[li-a-name = value][li-a-name = value]
 
Quick Setup:
You can copy-paste this component directly into your Webflow project and style it however you want.
[c-Final - First Bento Grid]
Required Attributes:
- this is the head. should it be the first item or should it be the first heading before the list?
 - data-flow = card: Defines the card element. The glow is inside this div.
 - data-flow-color-border = #your-color: Sets the border glow color. Accepts CSS variables, functions, or static color values.
 - data-flow-color-card = #your-color: Sets the inner glow color. Accepts CSS variables, functions, or static color values.
 
Optional Settings:
Use variables and the color-mix function. You can set the card’s inner glow to something like: [a-data-flow-color-card = "color-mix(in srgb, var(--pink) 20%, transparent)"]. Here we are using a color variable, which can be the same as the border  [a-data-flow-color = "transparent)"] color, but set it to 20% opacity with the color-mix function.
In the code, there are two default values that you can change if you want.









