Merge branch 'master' into feature/docsmigrateupdate

content/altinn-studio/designer/build-app/ui-designer/components/index.en.md

@@ -113,7 +113,7 @@ See documentation here: https://docs.altinn.studio/altinn-studio/guides/design/g
       </td>
     </tr>
         <tr>
-      <td><a href="/altinn-studio/guides/design/guidelines/components/select/">Dropdown</a></td>
+      <td><a href="/altinn-studio/guides/design/guidelines/components/dropdown/">Dropdown</a></td>
       <td>
         <ul>
           <li>Link to data model</li>

content/altinn-studio/guides/design/guidelines/components/button/_index.en.md

@@ -1,13 +1,16 @@
 ---
 title: Buttons and links
-description: Main button (blue) is used to send the user to the next step.
+description: Primary button (blue) is used to send the user to the next step.
 weight: 20
 ---
 
 ### Guidelines:
-- There should only be one main button per page. Secondary choices can be added as buttons styled as links. 
+- There should only be one main button per page. Secondary choices can be added as secondary buttons. 
 - The text on the button should be clear. Usually "Next" works well, but the button can also be formulated as an answer to a question (example below).
 - The last/submit page of the form should have a green "Submit Form" button.
 
-### Example of use:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A809" %}}
+### Eksempel på bruk:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7597%3A3003&node-id=7993-11241&node-type=frame&viewport=-1492%2C411%2C0.43&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/button/_index.nb.md

@@ -5,10 +5,13 @@ weight: 20
 ---
 
 ### Retningslinjer:
-- Det skal kun være en hovedknapp per side. Sekundærvalg kan legges til som knapper stylet som lenker.
+- Det skal kun være en hovedknapp per side. Sekundærvalg kan legges til som sekundærknapper, de ser ut som lenker.
 - Teksten på knappen skal være tydelig. Som regel fungerer "Neste" bra, men knappen kan også formuleres som svar på 
 et spørsmål (se eksempel under).
 - På siste steg i skjemaet (innsending) skal hovedknappen være grønn.
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A809" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7597%3A3003&node-id=7993-11241&node-type=frame&viewport=-1492%2C411%2C0.43&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/checkbox/_index.en.md

@@ -11,4 +11,6 @@ If the user should only be able to pick one option, use [radio buttons](../radio
 
 ### Example of use:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5295%253A1181" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A83879&node-id=8014-10784&node-type=frame&viewport=799%2C642%2C0.27&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/checkbox/_index.nb.md

@@ -13,4 +13,6 @@ i tekst hvorfor det mangler.
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5295%253A1181" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A83879&node-id=8014-10784&node-type=frame&viewport=799%2C642%2C0.27&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/date/_index.en.md

@@ -15,7 +15,7 @@ Use the date picker if something is being planned, or for selecting a (relativel
 
 ### Example of usage:
 
-<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D4833%253A961" allowfullscreen></iframe>
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8014-16586&node-type=frame&viewport=572%2C356%2C0.19&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -30,4 +30,7 @@ Date fields should be used for dates further back in time, or for dates that the
 - If the foundational data exists, a specific date can be suggested in the field, or it can be preset with the current date.
 
 ### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5139%253A832" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8300-25621&node-type=frame&viewport=2176%2C-50%2C0.76&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/date/_index.nb.md

@@ -17,7 +17,7 @@ velge datoer tilbake i tid? Innenfor en gitt periode?
 
 ### Eksempel på bruk:
 
-<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D4833%253A961" allowfullscreen></iframe>
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8014-16586&node-type=frame&viewport=572%2C356%2C0.19&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -35,4 +35,7 @@ der en spesifikk dag er viktig, bruk [datovelgeren](#datovelger) i stedet.
 - Om datagrunnlaget finnes, kan en spesifikk dato være foreslått i feltet. Ellers kan eksempelinnholdet være dagen i dag. 
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5139%253A832" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A49596&node-id=8300-25621&node-type=frame&viewport=2176%2C-50%2C0.76&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/dropdown/_index.en.md

@@ -0,0 +1,18 @@
+---
+title: Dropdown
+description: The dropdown list should be used in cases where the user is picking one of many alternatives, much like the radio buttons. 
+weight: 70
+---
+
+### The dropdown list should be used when:
+- You have many alternatives (more than 5, but not unlimited)
+- You have a recommended choice which is pre-selected
+- It isn't important for the user to compare the alternatives
+- You don't need the user to read every alternative
+- The alternatives are known by the user (birth month, country of origin, etc)
+
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8194-46299&node-type=frame&viewport=832%2C-812%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/select/_index.nb.md → content/altinn-studio/guides/design/guidelines/components/dropdown/_index.nb.md

@@ -13,4 +13,6 @@ Nedtrekksliste velges når:
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5655%253A1605" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8194-46299&node-type=frame&viewport=832%2C-812%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/error-message/_index.en.md

@@ -19,6 +19,8 @@ Read more about error messaging on [UU-tilsynet's web pages (nb)](https://www.uu
 - The requirements to submit the form correctly should be clearly indicated before any error messages appear.
 - If the form has faults when the user attempts to proceed, the error messaging box at the top of the screen should show all errors and link to the fields that are incorrectly formatted. ⚠️ NB: This functionality is currently unavailable in Altinn Studio
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A2073" %}}
+### Example of use:
 
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A50248&node-id=8014-22322&node-type=frame&viewport=10%2C702%2C0.44&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A22322&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/error-message/_index.nb.md

@@ -24,5 +24,7 @@ og lenke til de feltene feilen gjelder. Feilene skal forsvinne etterhvert som de
 funksjonaliteten er ikke tilgjengelig i Altinn Studio enda.
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A2073" %}}
 
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A50248&node-id=8014-22322&node-type=frame&viewport=10%2C702%2C0.44&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A22322&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/file-upload/_index.en.md

@@ -11,5 +11,8 @@ Before requesting a file upload, check if the data can be collected differently,
 - If the upload has an error, be as specific as possible in the error message. Saying "Incorrect format" is not enough, the requirement has to be exactly specified. 
 - If your form requires multiple attachments of different types/categories, we recommend requesting them in multiple steps with a file upload module for each step. Specify what should be uploaded on each page, so that the user is never in doubt. 
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D10665%253A6471" %}}
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A60542&node-id=8014-26201&node-type=frame&viewport=104%2C714%2C0.35&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/file-upload/_index.nb.md

@@ -15,4 +15,7 @@ det må spesifiseres nøyaktig hva som kreves.
 filopplaster i hvert steg. Spesifiser i innledningen på hver side hva som skal legges ved, slik at brukeren ikke blir i tvil.
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D10665%253A6471" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7653%3A60542&node-id=8014-26201&node-type=frame&viewport=104%2C714%2C0.35&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/helptext/_index.en.md

@@ -10,5 +10,8 @@ You can also use the help text field to explain rules, terms or explain why the
 - Help texts are placed together with a label or title that needs further explanation. 
 - If information contained in a helper text is needed in order to answer the form correctly, **do not** use a help text, as required information should be placed in an info text in the UI (below the header).
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A1788" %}}
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A75779&node-id=8014-35112&node-type=frame&viewport=960%2C660%2C0.33&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/helptext/_index.nb.md

@@ -12,4 +12,7 @@ Man kan også benytte feltet til å forklare et regelverk, fremmede begreper, el
 plasseres i en infotekst i grensesnittet (under labelen). 
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D5711%253A1788" %}}
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A75779&node-id=8014-35112&node-type=frame&viewport=960%2C660%2C0.33&scaling=scale-down&content-scaling=fixed&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/input/_index.en.md

@@ -13,9 +13,11 @@ toc: true
 - Two input fields can be placed beside each other if they are somehow connected, see the example below. 
 - Deactivated fields should be avoided. If a field cannot be edited, the information should instead be presented as text. 
 
-### Example of usage:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2816%253A1332" %}}
+### Example of use:
+
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=&node-id=8014-37377&node-type=frame&viewport=973%2C657%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
 
+---
 
 ### Width of an input field
 The width of an input field should reflect what is expected as input from the user. We currently have three standard sizes that should reflect most scenarios and cover different screen-sizes. [Read more about how to change the sizes here](/altinn-studio/reference/ux/styling/#innergrid-og-labelgrid).
@@ -63,7 +65,7 @@ Large text fields are used when the user has to fill in a longer explanation. La
 
 ### Example of usage:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A656" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8158-45097&node-type=frame&viewport=895%2C-77%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -72,4 +74,6 @@ For addresses, there is a rigid setup where the postal code and city is on the s
 
 ### Example of usage:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2911%253A652" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8134-44753&node-type=frame&viewport=1038%2C88%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/input/_index.nb.md

@@ -14,8 +14,10 @@ toc: true
 - Deaktivert felt bør unngås. Dersom et felt ikke kan redigeres bør informasjonen heller presenteres i tekst. 
 
 ### Eksempel på bruk:
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2816%253A1332" %}}
 
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=&node-id=8014-37377&node-type=frame&viewport=973%2C657%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---
 
 ### Bredde på inputfelt
 Bredden på inputfeltet burde reflektere det som forventes av input fra brukeren. Vi har laget tre standard størrelser som burde dekke de fleste scenarioer og som skal fungere på forskjellige skjermstørrelser. [Les om hvordan du endrer størrelsen her](/altinn-studio/reference/ux/styling/#innergrid-og-labelgrid)
@@ -64,7 +66,7 @@ inputfelt gjelder.
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D3495%253A656" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8158-45097&node-type=frame&viewport=895%2C-77%2C0.32&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
 
 ---
 
@@ -74,4 +76,6 @@ ut automatisk basert på postnr-input.
 
 ### Eksempel på bruk:
 
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2911%253A652" %}}
+<iframe style="border: 3px solid rgb(0 0 0 / 90%);border-radius: 9px;" width="100%" height="550" src="https://embed.figma.com/proto/b2w3PuS5c0w8vVU3z8KOwp/Altinn-Studio-Komponenter?page-id=7669%3A77399&node-id=8134-44753&node-type=frame&viewport=1038%2C88%2C0.45&scaling=scale-down&content-scaling=fixed&starting-point-node-id=8014%3A37377&embed-host=share" allowfullscreen></iframe>
+
+---

content/altinn-studio/guides/design/guidelines/components/picture-component/_index.en.md

@@ -17,9 +17,3 @@ It is important that alternative texts are written consequently. We recommend fo
 - Write short and start with the most important part of the image
 - End by saying if the photo is a photo, illustration or graphic.
 
-**Example** 
-"Three old wooden trolley. Photograph."
-
-### Example of use:
-
-{{% figma-example src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwnBveAG2ikUspFsQwM3GNE%2FPrototyping-av-skjematjenester%3Fnode-id%3D2815%253A680" %}}