Style Guide

Container – Theme Content Wrapper with Hero: Background Image Right style selected. Background Image added, Width set to Wide, and Text Color set to Light.

Is Sevenstar the right fit?

<i class="fa-light fa-books"></i>

<h3 class="wp-block-heading has-text-align-center"><i class="fa-light fa-books"></i> Rigorous Courses</h3>

The logo row below is just a combination of blocks with normal settings. There are no custom styles options used.

The Image block is styled to have a slight zoom-in hover effect if it has a Link added to it, as demonstrated by the first logo image below on the left.

Here’s the “Logo Garden” Reusable Patten

Container with 2 Column + Space Between

Container block with Top and Bottom Padding, with a Columns inner block that has 2 separate Column blocks with Widths settings. The Columns block has Space Between style, to keep the 2 Column blocks separated.

That Image block over there has Sidebar Wrap: Full style, and a specified Width to match the Column block it’s in.

Is Sevenstar the right fit?

Container with 2 Column + Space Between

Container block with Top and Bottom Padding, with a Columns inner block that has 2 separate Column blocks with Widths settings. The Columns block has Space Between style, to keep the 2 Column blocks separated.

That Image block over there has Sidebar Wrap: Full style, and a specified Width to match the Column block it’s in.

Is Sevenstar the right fit?

Image block with Sidebar Wrap: Full style

Image block with Sidebar Wrap: Light Top Right style

Image block with Sidebar Wrap: Light Bottom Left style

Image block with Rounded style and Aspect Ratio set to Square- 1:1

Image block with Grayscale style
(Good for logos and graphics)

Image block with Black & White style
(Good for Solid logos and graphics)

Image block with Black & White- Transparent style
(Good for Transparent logos and graphics)

What’s next?

CTA Cards

Displays cards with Image, Title, Description, and Button Link

Visit this page

View the courses you could take

Curabitur sit amet lectus et odio malesuada facilisis. Fusce fringilla imperdiet eros, in iaculis urna aliquam a. Nullam sed erat nec est tincidunt lobortis.

Vestibulum nisl libero, tristique tincidunt imperdiet sit amet, hendrerit eget ligula.

Maecenas fermentum turpis nisi, ac molestie orci scelerisque feugiat. Sed gravida viverra velit vel luctus.

Visit this page

CTA Cards

Displays cards with Image, Title, Description, and Button Link

• Curabitur sit amet lectus et odio malesuada facilisis.
• Fusce fringilla imperdiet eros, in iaculis urna aliquam a.
• Nullam sed erat nec
• est tincidunt lobortis.

Visit this page

I am glad that I made the decision to attend Sevenstar. Now, as I’m about to head into Oklahoma Baptist University on a full-tuition scholarship to pursue my dream of becoming a software engineer, I feel so much more prepared.

Christian Alumni

We had so many questions when we started. The Sevenstar team made everything simple, and we always felt supported. By the time we enrolled, we were confident we made the right choice.

Erin M. Parent

Sevenstar was the greatest thing that happened to me because it allowed me to learn time-management skills and it taught me to study for myself.

Daniel S. Alumni

We had so many questions when we started. The Sevenstar team made everything simple, and we always felt supported. By the time we enrolled, we were confident we made the right choice.

Erin M. Parent

Icon Block

Copy and paste the HTML or SVG code from the selected Icon from Font Awesome 6.
The icon Classic Light versions are preferred.

The HTML code will look like this:
<i class="fa-light fa-hand-wave"></i>

Using the Adjust settings, you can nudge icon left or right, up or down
until it feels properly centered.

Buttons Block

Each individual Button block will have it’s own Style setting options to choose from.
Below are a bunch of variations of Style and Color options.

Here below is a Paragraph block, where the whole thing is wrapped as with a link. It’s had “arrow-link” added to the block Additional CSS class(es), which will make it mimic the Button block’s Arrow Link style option.

Testing Arrow Link

Testing Arrow Link + Text Color

Typography

Below are examples of various text content with some of their respective Style, Color, Size options demonstrated.

Yar Pirate Ipsum

Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.

Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow’s nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.

Example Paragraphs with SIZE options

SIZE S – Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow’s nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.

SIZE M – Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow’s nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.

SIZE L – Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.

SIZE XL – Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

Example Paragraph blocks with Quote style option

Again, just for size reference, this is a default paragraph without any additional style settings. Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters

Quote style – Default – Bumps the font-size up a little, then softens the text color a little. Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow’s nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.

Quote style + SIZE L + Primary Text Color– Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.

Quote style + Light Background Color + Dark Text Color – Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow’s nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.