Image page

Author: stsrki

Documentation/Blazorise.Docs/Pages/Docs/Components/Image/ImagePage.razor

@@ -26,30 +26,27 @@
     <DocsPageSectionHeader Title="Basic example">
         Simply set the <Code>Source</Code> attribute and you’re good to go.
     </DocsPageSectionHeader>
-    <DocsPageSectionContent Outlined FullWidth>
+    <DocsPageSectionContent Outlined FullWidth SourceCode="BasicImageExample">
         <BasicImageExample />
     </DocsPageSectionContent>
-    <DocsPageSectionSource Code="BasicImageExample" />
 </DocsPageSection>
 
 <DocsPageSection>
     <DocsPageSectionHeader Title="Deferred Loading">
         Add <Code>Loading</Code> parameter to enable image to dynamically load when you scroll into view.
     </DocsPageSectionHeader>
-    <DocsPageSectionContent Outlined FullWidth>
+    <DocsPageSectionContent Outlined FullWidth SourceCode="ImageLoadingExample">
         <ImageLoadingExample />
     </DocsPageSectionContent>
-    <DocsPageSectionSource Code="ImageLoadingExample" />
 </DocsPageSection>
 
 <DocsPageSection>
     <DocsPageSectionHeader Title="Fluid image">
         By enabling <Code>Fluid</Code> parameter, it forces an image to take up the whole width of its container.
     </DocsPageSectionHeader>
-    <DocsPageSectionContent Outlined FullWidth>
+    <DocsPageSectionContent Outlined FullWidth SourceCode="ImageFluidExample">
         <ImageFluidExample />
     </DocsPageSectionContent>
-    <DocsPageSectionSource Code="ImageFluidExample" />
 </DocsPageSection>
 
 <DocsPageSection>
@@ -61,10 +58,9 @@
             If you inspect the image with devtools you will be able to see <Code>alt</Code> assigned.
         </Paragraph>
     </DocsPageSectionHeader>
-    <DocsPageSectionContent Outlined FullWidth>
+    <DocsPageSectionContent Outlined FullWidth SourceCode="ImageTextExample">
         <ImageTextExample />
     </DocsPageSectionContent>
-    <DocsPageSectionSource Code="ImageTextExample" />
 </DocsPageSection>
 
 <ComponentApiDocs ComponentTypes="[typeof(Image)]" />