- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Media Objects Sass Reference
Variables
You can change the styles of the components by using the following SASS variables as listed in the table.
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$mediaobject-margin-bottom It sets the bottom margin of a media object. |
Number | $global-margin |
| 2 |
$mediaobject-section-padding It defines the left and right padding within a media object. |
Number | $global-padding |
| 3 |
$mediaobject-image-width-stacked When the object is stacked vertically, images will get a width of 100% and keeps the natural width of image by setting it to 'auto'. |
Number | 100% |
Mixins
You can use the mixins to build the CSS class structure for your media object components. You can use the following mixins to build your own class structure −
media-object-container
You can add styles for media object by using the following mixin −
@include media-object-container;
media-object-section
You can add styles for media object section by using the following mixin −
@include media-object-section($padding);
It can be defined using the parameter as shown in the table given below −
| Sr.No. | Parameter & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$padding It defines padding between sections. |
Number | $mediaobject-section-padding |
media-object-stack
You can add styles for stack sections of media object by using the following mixin −
@include media-object-stack;