The surface component is a versatile container that can be given responsive paddings and margins while also having a
background color and elevation. It is useful in creating a space for content. Surface Padding and Margin The surface component can be given paddings and margins in each direction, along the x or y axes, or all sides at
once. Each of these attributes is also responsive and can be given values for each screen size. Margin-Bottom Margin-Left Margin-Right Margin-Top Margin-X Margin-Y Margin Responsive Margin Padding-Bottom Padding-Left Padding-Right Padding-Top Padding-X Padding-Y Padding Responsive Padding
Surface Background Colors The surface component can be used to create containers with a background color and will automatically change the
font color to white on darker backgrounds. Black Primary Primary Dark Primary Light Secondary secondary Gradient Secondary Light Secondary Medium Tertiary Tertiary Dark Tertiary Light White
Surface Elevation Elevation is used to give a "physical" feel to the website by having an element "move" forward and backwards by
increasing and decreasing its shadow. This effect is used to convey hierarchy or importance in a layout. No elevation Elevation 1 Elevation 2 Elevation 3
Surface Sizes The surface component can also be given a max-with if you want to restrict its size. Using the "size" attribute
will automatically center the surface component. Full Width (Default) XXL Size Max-Width = 1366px XL Size Max-Width = 1280px LG Size Max-Width = 1012px MD Size Max-Width = 768px SM Size Max-Width = 544px