Typography | Custom | Accordion | Cards | Dialog | Slider | Team
The style guide pattern features the default blocks and sample color treatments for creating a style guide page on your website. This pattern is an easy way to add the default heading, text, button, quote, and sample image cover content to a site you are styling. Deliver the style guide with a client’s website for easy reference and design adherence.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph typography. Did you hear that? They’ve shut down the main reactor. We’ll be destroyed for sure. This is madness! We’re doomed! There’ll be no escape for the Princess this time. What’s that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They’re heading in this direction. What are we going to do? We’ll be sent to the spice mine of Kessel or smashed into who knows what!
Colors
Forms
Contact
Embeds
Buttons
Gallery
Quotes
Tables
Header | Header | Header | Header |
---|---|---|---|
Foo | Bar | Bar | Test |
Foo | Foo | Foo | Foo |
Footer | Footer | Footer | Footer |
Default Quote
Your destiny lies with me, Skywalker. Obi-Wan knew this to be true. No! All to easy. Perhaps you are not as strong as the Emperor thought. Impressive…most impressive. Obi-Wan has taught you well. You have controlled your fear.
Darth Vader
Plain Quote
Your destiny lies with me, Skywalker. Obi-Wan knew this to be true. No! All to easy. Perhaps you are not as strong as the Emperor thought. Impressive…most impressive. Obi-Wan has taught you well. You have controlled your fear.
Darth Vader
Pullquotes
Quotes that can be placed between text blocks or positioned alongside them on the left or right.
Pullquote with no alignment.
Obi-Wan knew this to be true.
Darth Vader
Pullquote with wide alignment.
No! All to easy. Perhaps you are not as strong as the Emperor thought.
Darth Vader
Pullquote with full width alignment
Impressive…most impressive. Obi-Wan has taught you well. You have controlled your fear.
Pullquote with left and right alignment.
Did you hear that? They’ve shut down the main reactor. We’ll be destroyed for sure. This is madness! We’re doomed! There’ll be no escape for the Princess this time. What’s that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They’re heading in this direction.
Your destiny lies with me, Skywalker.
Darth Vader, left-aligned pullquote
I must face him alone. Chewie! Get behind me! Get behind me! Can’t get out that way. Looks like you managed to cut off our only escape route. Maybe you’d like it back in your cell, Your Highness.
Are you kidding? At the rate they’re gaining. Traveling through hyperspace isn’t like dusting crops, boy! Without precise calculations we could fly right through a star or bounce too close to a supernova and that’d end your trip real quick, wouldn’t it? What’s that flashing? We’re losing our deflector shield. Go strap yourself in, I’m going to make the jump to light speed. We’ve entered the Alderaan system.
Red Leader, we’re right above you. Turn to point. oh-five, we’ll cover for you. Stay there. I just lost my starboard engine. Get set to make your attack run. Biggs, Wedge, let’s close it up.
Your destiny lies with me, Skywalker.
Darth Vader, right-aligned pullquote
You wouldn’t want my life to get boring, would you? Luke, the Force will be with you. All wings report in. Red Ten standing by. Red Seven standing by. Red Three standing by. Red Six standing by. Red Nine standing by.
Keep half your group out of range for the next run. Copy, Base One. Luke, take Red Two and Three. Hold up here and wait for my signal…to start your run.
She’s the one in the message.. We’ve got to help her. Now, look, don’t get any funny ideas. The old man wants us to wait right here.
Where are you going? Well, I’m not going that way. It’s much too rocky. This way is much easier. What makes you think there are settlements over there? Don’t get technical with me. What mission? What are you talking about? I’ve had just about enough of you! Go that way! You’ll be malfunctioning within a day, you nearsighted scrap pile! And don’t let me catch you following me begging for help, because you won’t get it. No more adventures.
Sample Text and Color Treatment
Category or Subheading
A compelling headline that draws readers into your content.
Easy Accordion Gutenberg Block
The Heading
A heading in the accordion
A communi observantia non est recedendum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
Another Heading
A communi observantia non est recedendum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
Foo Bar
Bar