## Feature Examples ### Structure - description:

Component consists of preview content area and a browser bar:

  • Preview content area displays any type of content, like an image, text, or video. Add it inside the component as its children.
  • A styled browser bar is added at the top by default.
    • - example: ```jsx Preview content area ; ``` ### Skin - description:

    Change the background style with skin prop:

  • Use neutral (default) in all common cases.
  • Use gradient for larger preview areas.
  • Use custom to set the backgroundColor to any color using design system color tokens, RGB or HEX formats.
    • - example: ```jsx Neutral Gradient Custom background ; ``` ### Browser bar size - description:

    Control the height of the browser bar with browserBarSize prop, depending on the preview area width:

  • Use size9 when preview's width is <312 px.
  • Use size12 (default) when width is 312–443 px.
  • Use size18 when width is 444–660 px.
  • Use size24 when width is >660 px.
    • - example: ```jsx Shorter than 312 px 312–443 px wide 444–660 px wide Wider than 660 px ; ``` ### Width and height - description:

    Control dimensions of the component by setting width and height props to custom % or px.

    - example: ```jsx Custom width Custom height ; ``` ## Common Use Case Examples ### Site previews - description:

    Use browser preview widget to showcase a design prepared by or suggested for the user.

    It is often used together with preview.

    - example: ```jsx () => { const VIEW_TYPE = { desktopView: 'desktopView', mobileView: 'mobileView', }; const [viewType, setViewType] = React.useState(VIEW_TYPE.desktopView); const changeViewType = (_, value) => setViewType(value); const desktopView = () => ( ); const mobileView = () => ( ); return ( {}} removeContentPadding content={ {viewType === VIEW_TYPE.desktopView ? desktopView() : mobileView()} Your campaign is live! Be proud. Get the word out about the amazing things you're doing. }> Share your Campaign } /> ); }; ``` ### Selected page validation - description:

    Use browser preview widget to validate if the selected site is the one the user wants to proceed with.

    - example: ```jsx () => { const [checked, setChecked] = React.useState(false); return ( {}} title="Import posts to your blog" content={ Is this your blog? Home | Wix Design System wixdesignsystem.com setChecked(!checked)} vAlign="top" > By checking the box you allow Wix to import this content, confirm you own or are licenced to use it and assume liability for this use } /> ); }; ```