Filter components:

Billboard

This is a "Billboard" section with the "Full width image" option. The makes the image cover the entire section, while adding a white callout box for the content. Typically used as a "Hero"

Billboard

Default "Billboard" section with the "Image to left side" option and a gray background color option.

Filler text:

olutpat sed cras. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Ac turpis egestas integer eget aliquet nibh praesent. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque.

Billboard

Default "Billboard" section.

Filler text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse sed nisi lacus sed. Facilisi morbi tempus iaculis urna id volutpat. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Vitae semper quis lectus nulla at volutpat diam. Vel quam elementum pulvinar etiam non quam. Mattis nunc sed blandit libero volutpat sed cras. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Ac turpis egestas integer eget aliquet nibh praesent. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque.

Left content

This is different than the "Billboard" component because one side doesn't have to have an image. Both blocks can contain any type of content.

Test bullet 1
Test bullet 2
Test bullet 3

Right content

Maybe an image?

Columns - Package references

This is a default "Columns" component that references product package data.
It's responsive: 4 columns desktop, 2 columns tablet, 1 column mobile

Speeds up to 100 Mbps

Speed may not be available in your area.

$1000

Per Month

Taxes and fees may apply.

Offer Details

Kinda fast
22/5 technical support
Somewhat reliable
Long contract

Order Online

Speeds up to 200 Mbps

Speed may not be available in your area.

$2000

Per Month

Taxes and fees may apply.

Offer Details

Pretty fast
23/6 technical support
Mostly reliable
Short contract

Order Online

Speeds up to 300 Mbps

Speed may not be available in your area.

$3000

Per Month

Taxes and fees may apply.

Offer Details

Fast
24/6 technical support
Reliable
Short contract

Order Online

Speeds up to 400 Mbps

Speed may not be available in your area.

$4000

Per Month

Taxes and fees may apply.

Offer Details

So fast
24/7 technical support
Reliable
No contract

Order Online

Default Columns

Default Columns have a variety of options including: Carousel, Card styles, Centered content

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Columns - Full width image

Default Columns as a mobile Carousel, Card styles and a full width image.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Columns - Icons

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Shop

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Shop plz

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Pretty plz

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

k fine

Basic Content

This component can take a wide variety of content and styles. Paragraphs, different heading sizes, bold and italic text, lists, links, etc. You can also embed a "Call to Action", images, or code snippets.

The content in this section can also be centered if it looks better with the content.

Bullets like this
Bold text
Italics
And even links to anywhere

Images

Basic Content with Code Snippets

Here are the styles:

style.css

.parent {
  width: 200px;
}
  
.box {
  width: 100%;
  border: 2px solid hotpink;
  padding: 20px;
}

.child {
  width: fit-content;
}

Here's the JS:

app.js

let { background } = useAppContext();
  
const handleMenuToggle = () => {
  if (typeof window !== "undefined") {
    window.scrollTo(0, 0);
  }
  
  setShowMobileNav(!showMobileNav);
}

Code challenge

<nav>
  <ul className="top-level-items">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/projects">Projects</a>
    </li>
    <li>
      <a href="/about">About me</a>
    </li>
    <li>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</nav>

<nav>
  <ul className="top-level-items">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/projects">Projects</a>
    </li>
    <li>
      <a href="/about">About me</a>
    </li>
    <li>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</nav>

.parent {
  width: 200px;
}
  
.box {
  width: 100%;
  border: 2px solid hotpink;
  padding: 20px;
}

.child {
  width: fit-content;
}

.parent {
  width: 200px;
}
  
.box {
  width: 100%;
  border: 2px solid hotpink;
  padding: 20px;
}

.child {
  width: fit-content;
}

console.log('LOL');

console.log('LOL');

Try changing the code!

Code challenge answer

No peeking

<nav>
  <ul className="top-level-items">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/projects">Projects</a>
    </li>
    <li>
      <a href="/about">About me</a>
    </li>
    <li>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</nav>

<nav>
  <ul className="top-level-items">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/projects">Projects</a>
    </li>
    <li>
      <a href="/about">About me</a>
    </li>
    <li>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</nav>

.parent {
  width: 200px;
}
  
.box {
  width: 100%;
  border: 2px solid hotpink;
  padding: 20px;
}

.child {
  width: fit-content;
}

.parent {
  width: 200px;
}
  
.box {
  width: 100%;
  border: 2px solid hotpink;
  padding: 20px;
}

.child {
  width: fit-content;
}

console.log('LOL');

console.log('LOL');

FAQ's

Collection - Columns - Packages

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Tortor pretium viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non.

Filter components:

Billboard

Billboard

Billboard

Left content

Right content

Columns - Package references

Speeds up to 100 Mbps

Speeds up to 200 Mbps

Speeds up to 300 Mbps

Speeds up to 400 Mbps

Default Columns

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Columns - Full width image

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Columns - Icons

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Basic Content

Images

Basic Content with Code Snippets

Code challenge

Code challenge answer

FAQ's

Collection - Columns - Packages

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Tortor pretium viverra

Image Gallery