> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/sa5-core/overview-1.md).

# Webflow Designer Support ❺

The Webflow Designer cannot execute custom code, or external CSS, which means that the design-time experience can 

Most especially I see these when;

* You have a long collection list of items that will be filtered in the published view. 
* You have modals or other elements that won't always appear

## SA5's Design-Time Support

Fortunately, you can adjust the design-time view using an HTML Embed with custom CSS. 

Set that up any custom CSS embeds you want, and if you add the \[wfu-design] custom attribute to them, SA5 will remove them automatically as soon as any of the libraries load. 

#### Hide an element at design-time;

```html
<style>
.modal1 {
  display: none
}
</style>
```

#### Reduce a collection list to just a few items of display;

For a collection list with the ID `my-list`, let's display the first 3 items in the designer only.&#x20;

```html
<style>
/* By default, hide all .w-dyn-item elements inside #my-list */
#my-list .w-dyn-item {
    display: none;
}

/* Display the first three .w-dyn-item elements inside #my-list */
#my-list .w-dyn-item:nth-child(1),
#my-list .w-dyn-item:nth-child(2),
#my-list .w-dyn-item:nth-child(3) {
    display: block; /* or display: flex, inline-block, etc., depending on your layout */
}
</style>
```