UI Components

markup includes a number of pre-styled components that you can use on your page by using the correct class names/markup structure. settings such as colors, font-sizes and other brand related configurations will be inherited from the site’s pallete.

Rotator

markup uses a flickity rotator. by placing the following code onto your page, you will just need to add/remove cells and include your content.

<div class="markup__rotator" data-flickity='{ "cellAlign": "left", "contain": true, "prevNextButtons": false, "autoPlay": 7000, "wrapAround": true }'>
    <div class="markup__rotator-cell outer--10">1</div>
    <div class="markup__rotator-cell outer--10">2</div>
    <div class="markup__rotator-cell outer--10">3</div>
    <div class="markup__rotator-cell outer--10">4</div>
    <div class="markup__rotator-cell outer--10">5</div>
</div>

Breadcrumbs

<div class="breadcrumbs">
    <ul class="breadcrumbs__items">
        <li class="breadcrumbs__item">
            <a href="#">breadcrumb item</a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#">breadcrumb item</a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#">breadcrumb item</a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#">breadcrumb item</a>
        </li>
        <li class="breadcrumbs__item">
            <a href="#">breadcrumb item</a>
        </li>
    </ul>
</div>

Hero

<div class="markup__hero">
    <div class="markup__hero-text">
        <h2>One time, at bandcamp....</h2>
        <p>At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive. Bottom table value establish runway diversity day your added deep cloud at agile while hanging. Tail management divide ensure identify solution test in empowerment beta provide real added via long. Heading normal going focusing view empowerment framework devops at fruit disruptive loop bring taking activity.</p>
    </div>
    <div class="markup__hero-image" style="background: url('/markup/assets/images/dogs/freddie-marriage-41870.jpg') center center/cover no-repeat;"></div>
</div>

One time, at bandcamp....

At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive. Bottom table value establish runway diversity day your added deep cloud at agile while hanging. Tail management divide ensure identify solution test in empowerment beta provide real added via long. Heading normal going focusing view empowerment framework devops at fruit disruptive loop bring taking activity.

Classname	What it does
`.markup__hero-image--clear`	No color overlay on image.
`.markup__hero-image--20`	20% color overlay on image. (Default is 40%)

    <div class="markup__hero">
        <div class="markup__hero-text">
            <h2>One time, at bandcamp....</h2>
            <p>At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive. Bottom table value establish runway diversity day your added deep cloud at agile while hanging. Tail management divide ensure identify solution test in empowerment beta provide real added via long. Heading normal going focusing view empowerment framework devops at fruit disruptive loop bring taking activity.</p>
        </div>
        <div class="markup__hero-image markup__hero-image--clear" style="background: url('/markup/assets/images/dogs/freddie-marriage-41870.jpg') center center/cover no-repeat;"></div>
    </div>

One time, at bandcamp....

    <div class="markup__hero">
        <div class="markup__hero-text">
            <h2>One time, at bandcamp....</h2>
            <p>At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive. Bottom table value establish runway diversity day your added deep cloud at agile while hanging. Tail management divide ensure identify solution test in empowerment beta provide real added via long. Heading normal going focusing view empowerment framework devops at fruit disruptive loop bring taking activity.</p>
        </div>
        <div class="markup__hero-image markup__hero-image--20" style="background: url('/markup/assets/images/dogs/freddie-marriage-41870.jpg') center center/cover no-repeat;"></div>
    </div>

One time, at bandcamp....

Full Width Hero

    <div class="markup__hero markup__hero--fullwidth" style="background: url('/assets/images/dogs/a-n-v-e-s-h-hn9a7c3zQk0-unsplash.jpg') center center/cover no-repeat">
        <div class="markup__hero-text flex flex-column align-center justify-center">
            <h2 class="text-center">Well, this car is automatic, it's systematic, it's hydromatic, why it's Greased Lightning!</h2>
            <p class="text-center">At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive.</p>
        </div>
    </div>

Well, this car is automatic, it's systematic, it's hydromatic, why it's Greased Lightning!

At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive.

Profile Hero

    <div class="markup__profile-hero">
        <div class="markup__profile-hero-text">
            <h2>Lieutenant Dan got me invested in some kind of fruit company.</h2>
            <p>At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive.</p>
        </div>
        <div class="markup__profile-hero-image" style="background: url('/markup/assets/images/dogs/matthew-pilachowski-185965.jpg') center center/cover no-repeat;"></div>
    </div>

Lieutenant Dan got me invested in some kind of fruit company.

At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive.

Hero w/Form Embed

    <div class="markup__hero markup__hero--form" style="background: url('/markup/assets/images/dogs/justin-veenema-31135.jpg') center center/cover no-repeat;">
        <div class="markup__hero-text">
            <h2>Hi, I'm Charles!</h2>
            <p>At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive.</p>
        </div>
        <div class="markup__hero-form">
            <script type="text/javascript" src="https://form.jotform.com/jsform/221217063244142"></script>
        </div>
    </div>

Hi, I'm Charles!

At ball and has touchpoints tail line establish holistic key identify added has. Solely maximise along towards collaborative runway deep corporate operational generated dive.

Image Containers

Image containers can be used in lieu of just placing images in your markup and hoping for the best 🤪. Images inside of these containers will respond gracefully while maintaining a specific aspect ratio. Image containers would best in grid or flex items.

By default, an image container is set at a 16:9 ratio…

<div class="grid">
    <div class="markup__image-container grid-item grid-item--50">
        <img src="/markup/assets/images/dogs/mike-burke-63930.jpg" alt="That's one fine lookin' pooch." />
    </div>
</div>

but if you want a portrait view….

<div class="grid">
    <div class="grid-item grid-item--50 markup__image-container markup__image-container--portrait">
        <img src="/markup/assets/images/dogs/mike-burke-63930.jpg" alt="That's one fine lookin' pooch." />
    </div>
</div>

Feature

markup-feature can be used to quickly apply an alternative background to a specific section of the page. By default, it gives a background of #eee but that can be changed specific for your design.

<div class="flex align-center justify-center markup__feature">
    <p>Come and listen to my story about a man named Jed.</p>
</div>

Come and listen to my story about a man named Jed.

Accordion

markup uses the native details tag to build accordions, but some styling is included so they look nice.

    <h2>I've got the joy, joy, joy, joy down in my heart.</h2>
    <details>
        <summary>Where?</summary>
        Down in my heart!
    </details>
    <details>
        <summary>Where?</summary>
        Down in my heart!
    </details>
    <details>
        <summary>Where?</summary>
        Down in my heart to stay!
    </details>

I've got the joy, joy, joy, joy down in my heart.

Where?

Down in my heart!

Where?

Down in my heart!

Where?

Down in my heart to stay!

Card

Cards can be used for a number of applications. markup has a default card style that can be easlity edited to meet your needs.

<div class="grid">
    <div class="markup__card grid-item">
        <div class="markup__card-image">
            <img src="/markup/assets/images/dogs/richard-brutyo-Sg3XwuEpybU-unsplash.jpg" alt="Bark Twain">
        </div>
        <div class="markup__card-text">
            <h3>Bark Twain</h3>
            <p>Humorist, entrepreneur, publisher, and bone finder</p>
            <a class="btn">About Mr. Twain</a>
        </div>
    </div>
</div>

Bark Twain

Humorist, entrepreneur, publisher, and bone finder

About Mr. Twain

Template A Card

This card is styled similar to the template_a vibe styles.

<div class="grid">
    <div class="markup__card markup__card--template_a grid-item">
        <div class="markup__card-image">
            <img src="/assets/images/dogs/richard-brutyo-Sg3XwuEpybU-unsplash.jpg" alt="Bark Twain">
        </div>
        <div class="markup__card-text">
            <h3>Bark Twain</h3>
            <p>Humorist, entrepreneur, publisher, and bone finder</p>
        </div>
        <a class="btn">About Mr. Twain</a>
    </div>
</div>

Bark Twain

Humorist, entrepreneur, publisher, and bone finder

About Mr. Twain

Testimonial Card

<div class="grid">
    <div class="markup__testimonial">
        <div class="markup__testimonial-avatar" style="background: url('/markup/assets/images/dogs/karsten-winegeart-5PVXkqt2s9k-unsplash.jpg') center center/cover no-repeat;"></div>
        <p class="markup__testimonial-text">
            "At ball and has touchpoints tail line establish holistic key identify added has."
        </p>
        <p class="markup__testimonial-source">Theodore Q. Doggo</p>
    </div>
</div>

"At ball and has touchpoints tail line establish holistic key identify added has."

- Theodore Q. Doggo

<div class="grid">
    <div class="markup__profile grid-item">
        <img src="/markup/assets/images/dogs/ilona-froehlich-IIwUBccZWC4-unsplash.jpg" alt="Groucho Barx">
        <h3>Groucho Barx</h3>
        <p>American comedian, actor, writer, stage, film, radio, television star and vaudeville performer.</p>
        <a class="btn">Say Fetch</a>
    </div>  
</div>

Groucho Barx

American comedian, actor, writer, stage, film, radio, television star and vaudeville performer.

Say Fetch

Split List

Split list will make a ul (list) item two equal or as equal as possible columns. Number of columns can be changed on a case by case basis if needed.

<div class="markup__split-list">
<h3>My favorite Harry Potter characters:</h3>
    <ul>
        <li>Professor Snape</li>
        <li>Professor Snape</li>
        <li>Professor Snape</li>
        <li>Professor Snape</li>
        <li>Professor Snape</li>
        <li>Professor Snape</li>
    </ul>
</div>

My favorite Harry Potter characters:

Professor Snape
Professor Snape
Professor Snape
Professor Snape
Professor Snape
Professor Snape

Video Embed

Useful if you need to embed a video from YouTube or another video source on your page.

<div class="grid">
    <div class="grid-item grid-item--50 markup__video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/BuhrHclfW8o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

Parallax

Need a super fancy section with a moving background????? No problem! Just use this bad boy.

<div class="grid">
    <div class="grid-item grid-item--100 markup__parallax" style="background: url('/markup/assets/images/dogs/karsten-winegeart-5PVXkqt2s9k-unsplash.jpg') center center/cover no-repeat;">
        <div class="markup__parallax-text>
            <h2>Look into my eyes...</h2>
            <p>you will see what you mean to me.</p>
            <div class="flex align-center justify-center>
                <a class="btn">Search Your Heart</a>
                <a class="btn">Search Your Soul</a>
            </div>
        </div>
    </div>
</div>

Look into my eyes...

you will see what you mean to me.

Search Your Heart Search Your Soul

CTA

CTAs can be used to call out a specific feature, or desired action.

<div class="grid">
    <div class="grid-item grid-item--100 markup__cta">
        <h2>Death Star ambush. This Saturday!!</h2>
        <p>We will leave from the north east hanger at 8am sharp!</p>
        <div class="flex align-center justify-center>
            <a class="btn">I'm Going!</a>
            <a class="btn">No thanks, it's a trap.</a>
        </div>
    </div>
</div>

Death Star ambush. This Saturday!!

We will leave from the north east hanger at 8am sharp!

I'm Going! No thanks, it's a trap.

Icon Feature

Icon features can be used for a single icon with a label or they can be grouped together in a grid.

<div class="grid">
    <h2 class="grid-item grid-item--100">Top 3 Skills</h2>
    <div class="grid-item icon-feature markup__feature">
        <img class="icon-feature__icon" src="/markup/assets/images/karate.svg"/>
        <h3>Nunchuck skills</h3>
    </div>
    <div class="grid-item icon-feature markup__feature">
        <img class="icon-feature__icon" src="/markup/assets/images/archer.svg"/>
        <h3>Bowhunting skills</h3>
    </div>
    <div class="grid-item icon-feature markup__feature">
        <img class="icon-feature__icon" src="/markup/assets/images/hacker.svg"/>
        <h3>Computer hacking skills</h3>
    </div>
</div>

Top 3 Skills

Nunchuck skills

Bowhunting skills

Computer hacking skills

Quick Facts

For lists with pizazz!

<div class=" markup__quickfacts">
<h3>Top reasons to go to Colorado:</h3>
    <ul>
        <li>We've got no food.</li>
        <li>We've got no jobs.</li>
        <li>Our pets' heads are falling off!!</li>
    </ul>
</div>

Top reasons to go to Colorado:

We've got no food.
We've got no jobs.
Our pets' heads are falling off!!

Pop Ups - Modals

Press a button, get a popup. Each modal on a page must have a unique id as described in the example.

[//]: Each button on the page needs a unique id.
<a class="btn" href="#popup">Hit Me</a>
[//]: The id of this must match the id you link to above.
    <div class="markup__popup" id="popup">
        <div class="markup__popup-inner">
            <div class="markup__popup-inner-text">
                <p>"Don’t be jealous that I’ve been chatting online with babes all day. Besides, we both know that I’m training to be a cage fighter."</p>
            </div>
            <a class="markup__popup-close" href="#popup-close">X</a>
        </div> 
    </div>

Hit Me

Doorways

Image with text / cta on hover. Must copy ENTIRE grid-item and add the link for EACH.

<div class="markup grid">
    <a class="grid-item markup__doorway" href="#">
        <div class="markup__doorway-image">
            <img src="/assets/images/dogs/alvan-nee-eoqnr8ikwFE-unsplash.jpg" alt="Groucho Barx">
        </div>
        <div class="markup__doorway-text">
            <h2>Toco</h2>
            <p>I am Toco</p>
            <p><span>Learn About Toco</span></p>
        </div>
    </a>
</div>

will result in….

Toco

I am Toco

Learn About Toco

<div class="markup grid">
    <a class="grid-item markup__doorway markup__doorway--16-9" href="#">
        <div class="markup__doorway-image">
            <img src="/assets/images/dogs/karsten-winegeart-NE0XGVKTmcA-unsplash.jpg" alt="Groucho Barx">
        </div>
        <div class="markup__doorway-text">
            <h2>Steve</h2>
            <p>I am Steve</p>
            <p><span>Learn About Steve</span></p>
        </div>
    </a>
</div>

will result in ….

Steve

I am Steve

Learn About Steve

<div class="markup grid">
    <a class="grid-item markup__doorway markup__doorway--4-4" href="#">
        <div class="markup__doorway-image">
            <img src="/assets/images/dogs/charlesdeluvio-DziZIYOGAHc-unsplash(1).jpg" alt="Groucho Barx">
        </div>
        <div class="markup__doorway-text">
            <h2>Jackson</h2>
            <p>I am Jackson</p>
            <p><span>Learn About Jackson</span></p>
        </div>
    </a>
</div>

Jackson

I am Jackson

Learn About Jackson

Mastheads for the top of a markup page.

<div class="markup grid">
    <div class="grid-item--100 markup__masthead markup__masthead--50-50 grid">
        <div class="grid-item grid-item--50 markup__masthead-image min-height--500">
            <img src="/assets/images/dogs/karsten-winegeart-NE0XGVKTmcA-unsplash.jpg" alt="Groucho Barx">
        </div>
        <div class="grid-item--50 markup__masthead-text flex align-center justify-start palette-bg--color-3 inner--40">
            <h1 class="palette-color--color-2">Markup Headline</h1>
        </div>
    </div>
</div>

UI Components

Rotator

Breadcrumbs

Hero

One time, at bandcamp....

One time, at bandcamp....

One time, at bandcamp....

Full Width Hero

Well, this car is automatic, it's systematic, it's hydromatic, why it's Greased Lightning!

Profile Hero

Lieutenant Dan got me invested in some kind of fruit company.

Hero w/Form Embed

Hi, I'm Charles!

Image Containers

Feature

Accordion

I've got the joy, joy, joy, joy down in my heart.

Card

Bark Twain

Template A Card

Bark Twain

Testimonial Card

Profile Card

Groucho Barx

Split List

My favorite Harry Potter characters:

Video Embed

Parallax

Look into my eyes...

CTA

Death Star ambush. This Saturday!!

Icon Feature

Top 3 Skills

Nunchuck skills

Bowhunting skills

Computer hacking skills

Quick Facts

Top reasons to go to Colorado:

Pop Ups - Modals

Doorways

Toco

Steve

Jackson

Mastheads

Markup Headline