Ascension 1.0 - Template Documentation

Media objects

A media object is used to display media alongside text. That media can be an icon or an image and thanks to the alignment classes, it can be positioned pretty much anywhere in relation to the text.

Default media objects

Media objects are Flexbox-based so you can align the media with the text in any way you want. Start by defining an element with the class of .media-object.

Code Preview 
						                            
						                                <div class="media-object middle">
						                                    <div class="icon">
						                                        <img src="assets/img/icons/icon-brush.svg" alt="Icon">
						                                    </div> <!-- end .icon -->
						                                    
						                                    <h4 class="thin">Powerful theming with Handlebars</h4>
						                                </div> <!-- end .media-object -->
Icon

Powerful theming with Handlebars

Inside, define your media and your text. They can be arranged in any way you want. You can have as much text as you want, you just need to make sure to wrap it in a standalone container, like the example below.

Code Preview 
						                            
						                                <div class="media-object">
						                                    <div class="icon">
						                                        <img src="assets/img/icons/icon-brush.svg" alt="Icon">
						                                    </div> <!-- end .icon -->
						                                    
						                                    <div>
						                                        <h4 class="heavy">Built-in templates</h4>
						                                        <p>It's super easy to get started by using one of our default templates.</p>
						                                        <p><a href="#">Check out the templates</a></p>
						                                    </div>
						                                </div> <!-- end .media-object -->
Icon

Built-in templates

It's super easy to get started by using one of our default templates.

Check out the templates

Placing the media on top.

The media can be easily placed on top, instead of on the side, like this:

Code Preview 
						                            
						                                <div class="media-object media-on-top text-center">
						                                    <img src="assets/img/icons/icon-platforms.svg" class="large" alt="Icon">
						                                    <h4 class="thin dark">Works on smartphones and tablets</h4>
						                                </div> <!-- end .media-object -->
Icon

Works on smartphones and tablets

Large media objects

Large media objects are better suited for when you want to use large media and large blocks of content.

Code Preview 
						                            
						                                <div class="grid middle distribute large-media-object">
						                                    <div class="cell md-auto lg-4 xlg-3 content" data-internal-nav>
						                                        <h3 class="heavy">Integration with task management services</h3>
						                                        <p>Track tasks from your favorite task management app. Ascension works great with Basecamp, Trello, PivotalTracker and 7 other services.</p>
						
						                                        <ul class="vertical-list with-icon icon-check with-border">
						                                            <li>Choose which projects you want to track</li>
						                                            <li>Import todo’s and todo lists</li>
						                                            <li>Project based filtering</li>
						                                            <li>Export logs separately for each service</li>
						                                            <li>Real-time syncronization with the service API</li>
						                                        </ul>
						
						                                        <a href="#top" class="button secondary">Start integrating now</a>
						                                    </div> <!-- end .cell -->
						                                    <div class="cell md-auto lg-7 media">
						                                        <img src="assets/img/large-image-integration.jpg" alt="Placeholder">
						                                    </div> <!-- end .cell -->
						                                </div> <!-- end .grid -->

Integration with task management services

Track tasks from your favorite task management app. Ascension works great with Basecamp, Trello, PivotalTracker and 7 other services.

  • Choose which projects you want to track
  • Import todo’s and todo lists
  • Project based filtering
  • Export logs separately for each service
  • Real-time syncronization with the service API
Start integrating now
Placeholder

When working with such large blocks of content, make sure you use the classes of .content for your text and .media for your media. Then, use the alignment classes to properly position the two blocks.