# Components For our slides and templates, we’ve provided a wide range of ready-to-use components you can modify for your projects. ## Sidebar Click anywhere outside the element to close the sidebar. When the sidebar is on the screen, it blocks the ability to change slides. To make a sidebar appear in the viewport, add a class `sidebarTrigger` on any element and `data-sidebar-id="unique-id"` for elements AND a sidebar to link them together. ```html ``` Here is the code for a simple sidebar: ```html ``` ### Close Sidebar To close the sidebar, add the `close` class to any element. Or add the class `data-sidebar-action="close"` attribute to any element in the opened sidebar: ```html ``` ### Position Sidebar appears on right by default; add a class `left` to move it to the left. ```html ``` ### Customize You can change the width and background of a sidebar: ```html ``` ### Hide Sidebar on Click You can prevent the closing of the sidebar when the body is clicked by setting the following parameter *after* slides.js: ```html ``` ### Animation You can animate the contents of a sidebar by adding `animated` class on the `sidebar` element and `ae-X` for elements inside of it: ```html ``` We’ve also created several [different sidebar](https://designmodo.com/slides/app/preview/example/sidebars/) layouts you can choose from. ## Popup Popups display above everything else on the page. To trigger the appearance of a popup, add the class `popupTrigger` on any element you want and `data-popup-id="unique-id"` for the element AND a popup to link them together. ```html ``` Use the code below to create popups: ```html
``` For popups with the content centered, use this code: ```html
``` ### Autoplay Video You can enable autoplay of Youtube and Vimeo videos embedded with iframe by adding a `autoplay` class on the `popup` element: ```html
``` ### Popup with autoplay video gallery You can create a slider with videos inside your popup and play the video on the chosen slide. In this case, you don't need to add `autoplay` class on the `popup` element, but you should add it to each video inside your popup. ```html
Back Next
``` You can see this example in action [here](https://designmodo.com/slides/app/preview/example/popup-video-gallery/). ### Close Popup To close a popup, click on any element that includes the `close` class or by clicking on an element with the `data-popup-action="close"` class inside of the opened popup: ```html
Close and Link to a Slide
``` ### Hide on Click Popups are used mainly to embed video content. By default, clicking on the empty or body area outside the video container will hide the video popup window. If you want to remove that ability, simply add a class `popupContent` on your `content` element: ```html
``` ### Animate Popup You can animate the contents of a popup by adding `animated` class on the `popup` element and `ae-X` for elements inside of it: ```html

I will appear first

I will appear second

``` ### Focus on element in popup If your popup has a `
...
` tag in it, you can focus on any focusable element (``, ``, ` ``` View all examples of popup usage [here](https://designmodo.com/slides/app/preview/example/popup/). ## Slider The slider we’ve included in Slides allows you to change images on slides by clicking on simple navigation indicators. A sample of a working slider is [here](https://designmodo.com/slides/app/preview/slide/26/). It’s possible to have multiple sliders on your page, but be careful to add unique IDs to each one. Here’s the code for a slider and controller: ```html ``` Add a class `clickable` on your `slider` element to change between various image elements on click. You can use this slide as an [example](https://designmodo.com/slides/app/preview/example/slider/#autoHeight). ### Arrows You can add arrows to show the next or previous element of the Slider: ```html
Prev
Next
``` Here is an [example](https://designmodo.com/slides/app/preview/example/slider/#arrows). ### Display slide number You can add the total slide counter and display the current slide number. Just add an element with `sliderCounter` class and put in an element with class `now` for displaying the current slide number and element with class `total` to show the total number of slides: ```html
1 / 7
``` Here is an [example](https://designmodo.com/slides/app/preview/example/slider/#slideNumbers). ### Swipeable You can add a class `swipeable` on your `slider` element to swipe slides forward/backward with your touch screen or mouse. Here is an [example](https://designmodo.com/slides/app/preview/example/slider/#swipeable). ### Autoplay With the class `autoplay` on your `slider` element, your photos (or other elements) will advance in sequence automatically. The default slide-change interval is 5 seconds. Update the attribute `data-slider-interval="5000"` to change the default 5000 milliseconds interval time. ```html ``` ### Autoplay video after changing slide You can put a video inside your slider. If you will set `autoplay` class to the `
    • ``` You can see it in action in this [example](https://designmodo.com/slides/app/preview/example/slider/#video-autoplay). ### AutoHeight Add a `autoHeight` class on your `slider` element to manually set the correct height of the element each time you change the slider element. This way you can make a smooth animation between elements: ```html ``` You can use this slide as an [example](https://designmodo.com/slides/app/preview/example/slider/#autoHeight). ### Animated You can animate the contents of a popup by adding `animated` class on the `slider` element and [direction](https://slides.gitbook.io/manual/slides#animation-direction) class for `li` elements inside of it: ```html ``` You can use this slide as an [example](https://designmodo.com/slides/app/preview/slide/33/). ## Dropdown You can place the Slides share dropdown anywhere on a page, but we’ve used it mainly on top and bottom panels to include share capabilities on all slides. To request the appearance of a dropdown use class `dropdownTrigger` with `data-dropdown-id="unique-id"` on your button or link. ```html ``` Here is the dropdown code: ```html
    ``` ### Position Initially, the dropdown in Slides is positioned in the top left corner. You can change where the dropdown is located by adding `right`, `center` and `bottom` classes on a `dropdown` element. ```html
    ``` ### Event Initially, the dropdown in Slides is revealed on click. You can change it to hover by adding `hover` class on the `dropdownTrigger` element. ```html
    Show on hover
    ``` ### Share We used the awesome [Sharrre](http://sharrre.com/) jQuery plugin to provide a suitable share window with a click. You can insert the text of your choice in your tweet with `data-text="Place your message here"`. Add your URL with `data-url="https://designmodo.com"`. For Pinterest, add your image with `data-pinterest-image="http://path.to/your/image.jpg"`. For the email's subject and body add `data-subject="Subject"` and `data-body="Body"` on `mail` element: ```html
    Share
    Contact us
    ``` ## Dialog You can use dialog messages on your Slides projects for things like notifying users of new features, accepting cookies and inviting them to subscribe or communicate with site visitors. First of all, you need to add `
    ` to your page. All of your dialog windows will be added to this div. Below is the code for a simple dialog message. ```html
    Your text message here.
    ``` If you want your dialog to be shown with the animation when the page loaded, just add `hidden` class and `data-dialog-action="open"` attribute to a div with a `dialog` class ### Position You can change the position of the dialog message by adding `left` and/or `bottom` classes to the `dialogContainer` element. ```html
    Your text message here.
    ``` ### Buttons You have the option of adding up to three buttons to the bottom of your Dialog message. These buttons can have internal or external links, dialog actions, or even an email form. ```html
    Your text message here.
    ``` ### Hidden Content A dialog window can contain hidden parts of messages that can be revealed only on mouse hover. The code below shows how this is done. ```html
    Visible by default
    Hidden content will show up on hover.
    • Close
    • Visit
    ``` ### Subscribe Form You can also use a dialog as a subscribe form to acquire new users. You can find working examples here: ```html
    ``` ### Show Dialog To show a dialog window make sure that it has a `data-dialog-id="unique-id"` attribute with unique value. Then add `data-dialog-action="open"` and `data-dialog-id="unique-id"` attributes to any element. You can also open dialog with JS code. Just call the `$('.dialog[data-dialog-id=unique-id]').slidesDialog('open');`. ```html
    Show Dialog
    Show Dialog with JS
    ``` ### Close Dialog You can hide the Dialog message in different ways: 1. By clicking on any element with `data-dialog-action="close"` attribute located **inside** the dialog element. 2. By clicking on any element with `data-dialog-action="close"` and `data-dialog-action="close"` attribute located **outside** the dialog element. 3. Using JS code `$('.dialog[data-dialog-id=unique-id]').slidesDialog('close');`. 4. By adding `data-dialog-cookie-age="30"` attribute to your `dialog` element. In this case, the dialog will be shown once and then will not be shown for 30 days. 5. Setting a cookie with a name equals to `dialog-id` attribute of a dialog. Just add `onclick="$.cookie('unique-id',true,{expires:30,path:'/'});"` to any element to set a cookie by clicking. ```html
    Close Dialog
    Close Dialog with JS
    Close Dialog and don't show it for 30 days
    Your text message here.
    ``` ### Open dialog with delay, and hide automatically. You can open the dialog window in a few seconds after the page loads. To do so, add `data-dialog-open-delay="1000"` attribute to your `dialog` element.\ \ You can also hide a dialog after a few seconds, to do so, add `data-dialog-close-delay="3000"` attribute to your `dialog` element.\ \ The values are in ms, so 1000 equals a 1-second delay. ```html
    ``` ### Create a Dialog message with JavaScript You can create a dialog using just JavaScript and nothing else. Your dialog will be applied to the `
    ` element. You can also see the full list of dialog options below: ```html
    Create Dialog
    ``` Live examples you can find [here](https://designmodo.com/slides/app/preview/example/dialog/). ## Zoom Image You can enlarge images on click as we did [here](https://designmodo.com/slides/app/preview/slide/28/). Just add `data-action="zoom"` attribute to your `` elements. ```html name ``` ## Buttons ```html Button Button Button Button Button Button Button ``` You can find more button examples [here](https://designmodo.com/slides/app/preview/example/buttons/). Also, other button types are shown below. ### Play Buttons ```html ``` [See the example](https://designmodo.com/slides/app/preview/example/buttons/). ### Action Buttons ```html ``` [See the example](https://designmodo.com/slides/app/preview/example/buttons/). ### Fixed Width Containers You can adjust the width of an element or container using the `fix-X-12` classes. By default, these containers are centrally aligned. Add the `toLeft` class to align it left and `toRight` to align right. ```html
    Container maximum width is 80px
    Container maximum width is 180px
    Container maximum width is 280px
    Container maximum width is 380px
    Container maximum width is 480px
    Container maximum width is 580px
    Container maximum width is 680px
    Container maximum width is 780px
    Container maximum width is 880px
    Container maximum width is 980px
    Container maximum width is 1080px
    Container maximum width is 1180px
    Left-aligned container
    Right-aligned container
    ``` ### Responsive Fixed Width Containers (added since Slides v.7) You can also set the different maximum width of the container on different breakpoints. ```html
    This container has different width on different screen sizes
    ``` ### Flex Grid allows you to split the content into as many as 12 columns and lets you set a specific position for elements on a page. Use `.flex` or `.inlineFlex` (added since Slides v.7) class to enable grid-container behaviour. View all [Flex Examples](https://designmodo.com/slides/app/preview/example/flex/). ```html ``` ### Responsive Horizontal Alignment (added since Slides v.7) Change default `start` alignment inside flex columns on different screen sizes using classes `.horizontal{Start|Center|End|Between|`Around|Evenly`}-{breakpoint}` with the `.flex` element ```html ``` ### Responsive Vertical Alignment (added since Slides v.7) Change default `stretch` alignment inside flex columns on different screen sizes using classes `.vertical{Start|Center|End|Baseline|Stretch}-{breakpoint}` with the `.flex` element ```html ``` ### Responsive Self-Vertical Alignment for single element (added since Slides v.7) You can align single element vertically using `.self{value}-{breakpoint}` classes. ```html ``` ### Responsive Flex Direction (added since Slides v.7) Change the direction of elements inside the .flex container by adding `dirRow-{breakpoint}`, `dirRowReverse-{breakpoint}`, `dirColumn-{breakpoint}`, `dirColumnReverse-{breakpoint}`, `reverse-{breakpoint}` classes to it. ```html ``` ### Column Spaces The spaces between rows are relative to the width of the screen by default. If you want to make spaces fixed, just add a class `fixedSpaces` or `noSpaces` on `flex` element. ```html ``` ### Responsive Columns By default, columns will be converted to rows when the device screen width is less than 1024px. You can add the `later` class on the `flex` element, which will delay the switch from columns to rows until the screen size shrinks to less than 768px. ```html ``` Also, you can use the following classes to layout your columns exactly like you want: ```css /*** TABLET LANDSCAPE AND SMALLER ***/ /* 100% of width */ .col-tablet-1-1 { max-width: 100%; } /* 2 columns */ .col-tablet-1-2 { max-width: 50%; } /* 3 columns */ .col-tablet-1-3 { max-width: 33.33333333%; } .col-tablet-2-3 { max-width: 66.66666666%; } /* 4 columns */ .col-tablet-1-4 { max-width: 25%; } .col-tablet-3-4 { max-width: 75%; } /* 5 columns */ .col-tablet-1-5 { max-width: 20%; } .col-tablet-2-5 { max-width: 40%; } .col-tablet-3-5 { max-width: 60%; } .col-tablet-4-5 { max-width: 80%; } /*** PHABLET LANDSCAPE AND SMALLER ***/ /* 100% of width */ .col-phablet-1-1 { max-width: 100%; } /* 2 columns */ .col-phablet-1-2 { max-width: 50%; } /* 3 columns */ .col-phablet-1-3 { max-width: 33.33333333%; } .col-phablet-2-3 { max-width: 66.66666666%; } /* 4 columns */ .col-phablet-1-4 { max-width: 25% !important; } .col-phablet-3-4 { max-width: 75% !important; } /*** PHONE PORTRAIT AND SMALLER ***/ /* 100% of width */ .col-phone-1-1 { max-width: 100%; } /* 2 columns */ .col-phone-1-2 { max-width: 50%; } /* 3 columns */ .col-phone-1-3 { max-width: 33.33333333%; } .col-phone-2-3 { max-width: 66.66666666%; } ``` ### Height Equalizer Very often, content from one column might be taller than in another, breaking visual symmetry. To prevent this, add a class `equal` on `flex` element and `equalElement` on each element you want to be even. This operation is managed by javascript and runs on load and resize. ```html ``` By default, the height equalizer works on screens wider than 1024px. Add the `later` class to your `equal` element to make it work from 767px screens and wider. You can also define the exact breakpoint by adding the `data-equal-collapse-width="X"` attribute. In the end, you can add the `equalMobile` class to make elements equal on any screen size. ```html ``` ### Fixed Width Containers in columns Hold content in a fixed container inside flex columns using this code. ```html ``` You can push your fixed container to a left or right side of a flex column by adding `toLeft` or `toRight` classes: ```html ``` ### Reorder on resize You can reorder columns for mobile devices to provide a better experience. Add class `reverse` on the `flex` element to reorder collapsed columns. ```html ``` View all [Flex Examples](https://designmodo.com/slides/app/preview/example/flex/). ## Sound You can use an mp3 audio track as a part of your presentation of as background audio to set the right mood. Here is how you can make it: You can use mp3 audio tracks as background audio to set the right mood in your slides. Here’s the code you need to add and control audio in Slides, including the speaker icon. ```html ``` Class `playing` will be automatically added to an element with the same `data-sound-id` value as an audio track. [Example](https://designmodo.com/slides/app/preview/example/sound/). ## Contact Form You can send and receive data from the contact form on [Slide #55](https://designmodo.com/slides/app/preview/slide/55/), [Slide #157](https://designmodo.com/slides/app/preview/slide/157/), [Slide #163](https://designmodo.com/slides/app/preview/slide/163/), and [Slide #166 ](https://designmodo.com/slides/app/preview/slide/166/)with AJAX (without page reloading). The form automatically sends this data to the ajax-email.php script which is located in the root folder of the Slides or Template you've downloaded from [Template Generator](https://designmodo.com/slides/app/). To make the script work, open the ajax-email.php file with any text editor and add your email which will enable you to receive messages from the form. You can also set the subject of an email. Note that this script will work only on a PHP server with SendMail installed. ### PHP Script ```php /* SETTINGS */ $recipient = "your.email@gmail.com"; $subject = "New Message from Contact Form"; if($_POST){ /* DATA FROM HTML FORM */ $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; //$phone = $_POST['phone']; /* SUBJECT */ $emailSubject = $subject . " by " . $name; /* HEADERS */ $headers = "From: $name <$email>\r\n" . "Reply-To: $name <$email>\r\n" . "Subject: $emailSubject\r\n" . "Content-type: text/plain; charset=UTF-8\r\n" . "MIME-Version: 1.0\r\n" . "X-Mailer: PHP/" . phpversion() . "\r\n"; /* PREVENT EMAIL INJECTION */ if ( preg_match("/[\r\n]/", $name) || preg_match("/[\r\n]/", $email) ) { header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500); die("500 Internal Server Error"); } /* MESSAGE TEMPLATE */ $mailBody = "Name: $name \n\r" . "Email: $email \n\r" . "Subject: $subject \n\r" . // "Phone: $phone \n\r" . "Message: $message"; /* SEND EMAIL */ mail($recipient, $emailSubject, $mailBody, $headers); } ?> ``` Note: The PHP code included in Slides will forward form information to the email address you input **only after you upload your site** to your web hosting provider. By default, the PHP form code will not work on your local host server. Once your site is uploaded, the form’s submit button will function correctly. Useful examples: [MailChimp](https://designmodo.com/slides/app/preview/example/mailchimp/), [Form Validation](https://designmodo.com/slides/app/preview/example/contact-form-validation/), and [ReCaptcha](https://designmodo.com/slides/app/preview/example/recaptcha/). ## Status Classes You can customize your content using the following status classes, depending on various situations and specific requirements. Here are some classes you may find useful: ```css /* Applied on the element */ .page-ready { } /* When DOM is ready */ .page-loaded { } /* When page is completely loaded */ .resizing { } /* When resizing */ .retina { } /* For devices with high resolution/pixel density */ .mobile { } /* For all iOS, Android, Blackberry, etc. */ .android { } /* For Android device only */ .safari { } /* For Safari browsers */ .firefox { } /* For Firefox */ .chrome { } /* For Chrome */ .msie { } /* For Microsoft Internet Explorer */ .windows { } /* For Windows Users */ .osx { } /* For Mac OS X Users */ .linux { } /* For Linux Users */ .popupShown { } /* When Popup is shown */ .popup_id { } /* When Popup with id="id" is visible */ .sidebarShown { } /* When Sidebar is shown */ .sidebar_id { } /* When Sidebar with id="id" is visible */ .dropdownShown { } /* When Dropdown is shown */ .dropdown_id { } /* When Dropdown with id="id" is visible */ /* Applied on the element */ .firstSlide { } /* When we are on the last slide */ .lastSlide { } /* When we are on the last slide */ .stage-3 { } /* When we are on the third slide only. You can use any number, obviously. */ .slides.whiteSlide { } /* When the current slide is a white slide. Use with .slides to separate it from elements inside .slide */ /* Applied on a slide */ .slide.selected { } /* Selected slide */ .slide.active { } /* Any visible slide is active */ .slide.animate { } /* When animation is started */ ``` Using those status classes shown above, you can control any element or group of elements on your page. Here are some examples: ```html Download for Windows Download for Mac OS X Download for Linux ``` ## Responsive Control You can easily hide or show any element on mobile device screens by adding the CSS classes shown below: ```html
    Another example:
    This block is visible on screens larger than 1240px,
    hidden on screens less than 1240px,
    shown as flex element on screens less than 1024px,
    hidden on screens less than 768px.
    Invisible for a Tablet Device
    Invisible for Phablet Device
    Invisible for Phone Devices
    Invisible for a mobile device
    ``` ## Typography To speed up your coding process we've created a few classes to set your font family, weight, style, and size. ### Font Family (added since Slides v.7) 
    /* Changes the default font-family for this type of element to Base|Title|Button font selected in the App settings*/
.family-base{font-family: {$baseFontFamily} !important;}
.family-title{font-family: {$titleFontFamily} !important;}
.family-button{font-family: {$buttonFontFamily} !important;}
    ### Font styling ```css /* FONT STYLE */ .italic {font-style: italic !important;} .underline{text-decoration: underline;} .uppercase{text-transform: uppercase !important; letter-spacing: 1.35px !important;} .condense {letter-spacing: -.65px !important;} .expand {letter-spacing: 4.5px !important;} .truncate {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* Added since Slides v.7 */ .strike { text-decoration: line-through;} .lowercase { text-transform: lowercase !important;} .capitalize{ text-transform: capitalize !important;} ``` ### Font weight ```css /* FONT WEIGHT */ .weight-1, .lightest {font-weight: 100 !important;} .weight-2, .lighter {font-weight: 200 !important;} .weight-3, .light {font-weight: 300 !important;} .weight-4, .normal {font-weight: 400 !important;} .weight-5, .medium {font-weight: 500 !important;} .weight-6, .semibold {font-weight: 600 !important;} .weight-7, .bold {font-weight: 700 !important;} .weight-8, .bolder {font-weight: 800 !important;} .weight-9, .boldest {font-weight: 900 !important;} ``` ### Font Sizing We've created scaling classes to easily change the font size. The base font size is 18px. ```css /* FONT SIZING */ p.largest, .p.largest {font-size: 27px;} p.larger, .p.larger {font-size: 24px;} p.large, .p.large {font-size: 21px;} p, .p {font-size: 18px;} p.small, .p.small {font-size: 16px;} p.smaller, .p.smaller {font-size: 14px;} p.smallest, .p.smallest {font-size: 12px;} p.micro, .p.micro {font-size: 11px;} ``` Also, this scaling model works with all the headings (H1-H6 HTML tags). All the classes are screen-size responsive, which means that the smaller screen you've got, the smaller heading will be. You don't need to set CSS `font-size` property using `@media()` query anymore! You can also use direct `font-size-X` classes on any element to set its font-size: ```css /* SET SIZE DIRECTLY (works for any element) */ .font-size-8 {font-size: 8px !important;} .font-size-9 {font-size: 9px !important;} .font-size-10 {font-size: 10px !important;} .font-size-11 {font-size: 11px !important;} .font-size-12 {font-size: 12px !important;} .font-size-13 {font-size: 13px !important;} .font-size-14 {font-size: 14px !important;} .font-size-15 {font-size: 15px !important;} .font-size-16 {font-size: 16px !important;} .font-size-17 {font-size: 17px !important;} .font-size-18 {font-size: 18px !important;} .font-size-19 {font-size: 19px !important;} .font-size-20 {font-size: 20px !important;} .font-size-21 {font-size: 21px !important;} .font-size-22 {font-size: 22px !important;} .font-size-23 {font-size: 23px !important;} .font-size-24 {font-size: 24px !important;} ``` These direct `font-size-X` classes also have a responsive versions: ```css /* Replace the number to the value from 8 to 24 */ /* Works on screens less than 1023px wide */ .font-size-tablet-14 {font-size: 14px !important;} /* Works on screens less than 767px wide */ .font-size-phablet-12 {font-size: 12px !important;} /* Works on screens less than 435px wide */ .font-size-phone-10 {font-size: 10px !important;} ``` See how it works in action [here](https://designmodo.com/slides/app/preview/example/typography/) ### Useful Classes To simplify the flow and readability of your slides, we’ve created a list of classes that can speed up your coding and simplify customizing your code: ```css /* PADDINGS AND MARGINS */ .padding-0 { padding: 0px!important;} .padding-top-0 { padding-top: 0px!important;} .padding-top-1 { padding-top: 10px!important;} /* ... */ .margin-left-20 { margin-right: 200px!important; } /* PADDINGS AND MARGINS FOR MOBILE DEVICES */ /* Laptop(1240px) and Smaller (added since Slides v.7) */ .padding-laptop-5 { padding: 50px!important;} .margin-bottom-laptop-10 { margin-bottom: 100px!important;} /* Tablet (1024px) and Smaller */ .padding-tablet-5 { padding: 50px!important;} .margin-bottom-tablet-10 { margin-bottom: 100px!important;} /* Phablet (768px) and Smaller */ .padding-right-phablet-1 { padding-right: 10px!important;} .margin-phablet-2 { margin: 20px!important;} /* Phone (436px) and Smaller */ .padding-left-phone-5 { padding-left: 50px!important;} .margin-bottom-phone-20 { margin-bottom: 200px!important;} /* CROP (removes margin property from element) */ .crop { margin: 0 !important;} .cropBottom { margin-bottom: 0 !important;} .cropTop { margin-top: 0 !important;} .cropLeft, .cropSides { margin-left: 0 !important;} .cropRight, .cropSides { margin-right: 0 !important;} /* TRIM (removes padding property from element) */ .trim { padding: 0 !important;} .trimBottom { padding-bottom: 0 !important;} .trimTop { padding-top: 0 !important;} .trimLeft, .trimSides { padding-left: 0 !important;} .trimRight, .trimSides { padding-right: 0 !important;} /* OPACITY */ .opacity-0 { opacity: 0 !important;} .opacity-1 { opacity: 0.1 !important;} /* ... */ .opacity-10, .opaque { opacity: 1 !important;} /* Display */ .block { display: block !important;} .inlineBlock { display: inline-block !important;} .inline { display: inline !important;} /* Added since Slides v.7: */ .flex {display:flex !important; flex-wrap:wrap !important;} .inlineFlex {display:inline-flex !important; flex-wrap:wrap !important;} .hidden { display: none !important; } /* Added since Slides v.7: Responsive versions of classes */ .(flex|inlineFlex|block|inlineBlock|inline|hidden)-(desktop|laptop|tablet|phablet|phone){display:(value) !important;} /* Position */ .relative { position: relative !important;} .absolute { position: absolute !important;} .fixed { position: fixed !important; z-index:150;} /* Added since Slides v.7: */ .static { position: static !important;} .sticky { position: sticky !important; top:0; z-index:150;} /* Added since Slides v.7: Responsive versions of classes */ .(static|relative|absolute|fixed|sticky)-(desktop|laptop|tablet|phablet|phone){position:(value) !important;} /* Full-width */ .wide { width: 100% !important;} /* Added since Slides v.7: Responsive versions of class */ .wide-(desktop|laptop|tablet|phablet|phone) {width: 100% !important;margin-left: 0 !important;margin-right: 0 !important;max-width: 100% !important;} /* overflow */ .scroll-x { overflow-x: scroll;} .scroll-y { overflow-y: scroll;} .overflow-hidden, .scroll-hidden { overflow: hidden;} .overflow-reset { overflow: auto !important;} .overflow-visible { overflow: visible !important;} /* Added since Slides v.7 */ /* fonts */ .rtl { direction: rtl; unicode-bidi: embed;} .noText { font-size: 0; } .noBr, .nobr, .nowrap { white-space: nowrap; } .wrap-white-space { white-space: initial; } /* background */ .pattern .background { background-repeat: repeat; background-size: auto;} .attachment-fixed, .attachmentFixed { background-attachment: fixed !important; background-size: cover !important;} .cover { background-size: cover !important;} .transparent { background: transparent !important } /* Added since Slides v.7 */ .background-repeat{background-repeat: repeat !important;} /* Added since Slides v.7 */ .background-no-repeat{background-repeat: no-repeat !important;} /* Added since Slides v.7 */ /* horizontal and vertical alignment */ .align-top, .top { vertical-align: top !important;} .align-middle, .middle{ vertical-align: middle !important;} .align-bottom, .bottom { vertical-align: bottom !important;} .align-left, .left { text-align: left !important;} .align-right, .right { text-align: right !important;} .align-center, .center { text-align: center !important;} .align-justify, .justify { text-align: justify !important;} /* Added since Slides v.7 */ /* Responsive horizontal and vertical alignment. Added since Slides v.7 */ .align-(left|right|center)-(desktop|laptop|tablet|phablet|phone) { text-align: (left|right|center) !important;} .align-right-tablet { text-align: right !important;} /* Example */ .align-(top|middle|bottom)-(desktop|laptop|tablet|phablet|phone) { vertical-align: (top|middle|bottom) !important;} .align-bottom-phone { vertical-align: bottom !important;} /* Example */ /* DEPRECATED since Slides v.7: previous versions of these classes */ .tablet-align-right { text-align: right !important;} .phablet-align-left { text-align: left !important;} .phone-align-bottom { vertical-align: bottom !important;} /* border-radius */ .round { border-radius: 999px !important; } .rounded { border-radius: 6px !important; } .rectangular { border-radius: 0 !important; } .radius-1 {border-radius: 1px !important;} ... .radius-25 {border-radius: 25px !important;} ``` ## Material Icons You can use [Material Icons](https://material.io/tools/icons/) by Google on your Slides project. Simply replace existing icon names with desired ones from this page: [https://material.io/icons/](https://material.io/tools/icons/) ```html verified_user arrow_backBack Nextarrow_forward airplay ``` [Here ](https://designmodo.com/slides/app/preview/example/buttons/)is an example on how to use Material Icons in Slides buttons.