Framewise

Style

Colors

Brand
Success
Error
Warning
Bg color
Bg accent
Border color
Text color
Text accent
Text grey

Headings

All HTML headings, <h1> through <h6>, are available.

Heading 2 example

Heading 3 example

Heading 4 example

Heading 5 example
Heading 6 example

List Types

Ordered List

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

  1. List Item 1
  2. List Item 2
  3. Nested list item A
  4. Nested list item B
  5. List Item 3

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets by default:

  • List Item a
  • List Item b
  • Nested list item 1
  • Nested list item 2
  • Double Nested item 1
  • Double Nested item 2
  • List Item 3

Blockquotes

For quoting blocks of content from another source within your document.
Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes

Alternative blockquote style:

Success is not final, failure is not fatal: it is the courage to continue that counts.

Buttons

Colors

<button class="btn m-b">Default</button>
<button class="btn btn--brand m-b">Brand</button>
<button class="btn btn--success m-b">Success</button>
<button class="btn btn--error m-b">Error</button>
<button class="btn btn--warning m-b">Warning</button>
<button class="btn btn--bordered m-b">Bordered</button>
<button class="btn btn--bordered btn--brand m-b">Bordered Brand</button>
<button class="btn btn--brand is-loading m-b">Loading</button>

Sizes

<button class="btn btn--sm m-b">Small Button</button>
<button class="btn m-b">Default Button</button>
<button class="btn btn--lg m-b">Large Button</button>
<button class="btn btn--xl m-b">Huge Button</button>
<button class="btn btn--full m-b">Full Width Button</button>

Bookmark cards

Premium Ghost Themes | Bright Themes
Premium Ghost CMS Themes. We create practical yet powerful Ghost themes with membership and newsletter support. Our templates are simple to use, fast and beautiful, with great support. Create a professional blog, newsletter or membership site.

Best Premium Ghost Themes

Ghost Themes Changelogs
Check out the changelogs for our Ghost Themes. You can find details about what was changed in each update as well as a list of changed files.

Ghost Theme Changelogs

Blog - Ghost CMS News, Guides and Tips
Get the latest Ghost CMS news & updates. Find useful guides & tutorials. Useful tips to improve and customize your Ghost theme and optimize your Ghost workflow.
Ghost: The Creator Economy Platform
The world’s most popular modern publishing platform for creating a new media platform. Used by Apple, SkyNews, Buffer, Kickstarter, and thousands more.

Ghost CMS


Callout cards

⚠️
Highlight some important information with callout cards
Highlight some important information with callout cards
✔️
Highlight some important information with callout cards
ℹ️
Highlight some important information with callout cards

Toggle cards

Want some collapsible content?

You can use toggle cards to add collapsible content, which for example can be used for an FAQ section

Where to find the best Ghost Themes?

Check out our collection of Premium Ghost Themes.


Video cards

0:00
/0:14

Share your videos


Audio cards

audio-thumbnail
Abstract music
0:00
/88.032625
audio-thumbnail
The epic trailer
0:00
/92.0555

File cards


Product cards

Premium Ghost Themes

Check out the best Ghost Themes for your blog, newsletter, or portfolio.

Explore Themes

Header cards

Eye-catching CTA

Use header cards to add a bold, eye-catching CTA with different styles and sizes.

Become a member

Eye-catching CTA

Use header cards to add a bold, eye-catching CTA with a background image.

Become a member

Images

Normal Image
Wide Image
Full-width Image

Embeds

Youtube

Vimeo

Twitter

Spotify playlist

Spotify

Soundcloud

More elements

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

Here are a few examples of code highlighting:

HTML markup:

<!DOCTYPE html>
<html>
<body>

<h2>The title attribute</h2>

<p title="I'm a tooltip">
Check out the title attribute as a tooltip.
</p>

</body>
</html>

CSS code:

body { 
   background-color: #FFFFF0; 
   font-family: Arial, Verdana, sans-serif; 
   font-size: 18px; 
   color: #00008B;
}

Javascript code:

var x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;

Inline code

<inline> and <code>

Text-level semantics

Styling for common inline HTML5 elements.

The a element example.
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example
The <details> element:

Details Summary

Details content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Notifications


Tables

# Table_Header_1 Table_Header_2 Table_Header_3 Table_Header_4 Table_Header_5 Table_Header_6 Table_Header_7 Table_Header_8
1 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
2 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
3 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
# Table_Header_1 Table_Header_2 Table_Header_3
1 Division 1 Division 2 Division 3
2 Division 1 Division 2 Division 3
3 Division 1 Division 2 Division 3

A wiser approach for complicated projects

Frameworks, templates, prompts to get stuff done. Quicker. Better.

Framewise

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Framewise.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.

Buy Rinne