Content and cards
Content containers (.content) and cards (.card) are the main tools for framing content in the main section of the page. The .content class can be used to provide a nice margin around whatever is placed inside.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
It was going to rain
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
<!-- Content -->
<div class="content">
<h2 class="content-title">
It was going to rain
</h2>
<p>
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
</p>
</div>Containers with the class .card can be used to create boxes with margin, padding, and a border. By default, they take up the full width of their parent containers. However, this can be changed easily by using utility classes to change the parent container's width.
It was going to rain
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare...
Title of the article
Subtitle that hooks the reader and prompts them to click on the read more button.
<!-- First card -->
<div class="card">
<h2 class="card-title">
It was going to rain
</h2>
<p>
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare...
</p>
<div class="text-right"> <!-- text-right = text-align: right -->
<a href="#" class="btn">Read more</a>
</div>
</div>
<!-- Second card (parent container's width changed using utility classes) -->
<div class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
<div class="card">
<h2 class="card-title">
Title of the article
</h2>
<p class="text-muted">
Subtitle that hooks the reader and prompts them to click on the read more button.
</p>
<div class="text-right"> <!-- text-right = text-align: right -->
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>Nested content and cards #
Content containers and cards can be nested inside one another in any combination as required. This, along with the smart use of utility classes such as .m-0 (sets margin to 0) and .p-0 (sets padding to 0), can be used to create complex layouts with very little effort.
Title of the article
Subtitle that hooks the reader and prompts them to click on the read more button.
A long and descriptive title of the picture that is slightly pretentious
May 4th, 2020
5 comments
124 likes
Comments
John Doe
Amazing picture! Great job!
Amazing picture! Great job!
Jane Doe
This is beautiful.
This is beautiful.
James Bucks
This is just pretentious enough for my tastes. I love it.
This is just pretentious enough for my tastes. I love it.
<!-- Card with no padding with a content container nested inside of it -->
<div class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
<div class="card p-0"> <!-- p-0 = padding: 0 -->
<img src="..." class="img-fluid rounded-top" alt="..."> <!-- rounded-top = rounded corners on the top -->
<!-- Nested content container inside card -->
<div class="content">
<h2 class="content-title">
Title of the article
</h2>
<p class="text-muted">
Subtitle that hooks the reader and prompts them to click on the read more button.
</p>
<div class="text-right"> <!-- text-right = text-align: right -->
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>
<!-- Card with no padding with multiple content containers nested inside of it -->
<div class="w-600 mw-full"> <!-- w-600 = width: 60rem (600px), mw-full = max-width: 100% -->
<div class="card p-0"> <!-- p-0 = padding: 0 -->
<img src="..." class="img-fluid rounded-top" alt="..."> <!-- rounded-top = rounded corners on the top -->
<!-- First content container nested inside card -->
<div class="content">
<h2 class="content-title">
A long and descriptive title of the picture that is slightly pretentious
</h2>
<div>
<span class="text-muted">
<i class="fa fa-clock-o mr-5" aria-hidden="true"></i> May 4th, 2020 <!-- mr-5 = margin-right: 0.5rem (5px) -->
</span>
</div>
<div>
<span class="badge">
<i class="fa fa-comments text-primary mr-5" aria-hidden="true"></i> 5 comments <!-- text-primary = color: primary-color, mr-5 = margin-right: 0.5rem (5px) -->
</span>
<span class="badge ml-5"> <!-- ml-5 = margin-left: 0.5rem (5px) -->
<i class="fa fa-heart text-danger mr-5" aria-hidden="true"></i> 124 likes <!-- text-danger = color: danger-color, mr-5 = margin-right: 0.5rem (5px) -->
</span>
</div>
</div>
<hr />
<!-- Second content container nested inside card (comments) -->
<div class="content">
<h2 class="content-title">
Comments
</h2>
<div>
<strong>John Doe</strong>
<br />
Amazing picture! Great job!
</div>
<hr />
<div>
<strong>Jane Doe</strong>
<br />
This is beautiful.
</div>
<hr />
<div>
<strong>James Bucks</strong>
<br />
This is just pretentious enough for my tastes. I love it.
</div>
<div class="text-center mt-20"> <!-- text-center = text-align: center, mt-20 = margin-top: 2rem (20px) -->
<button class="btn btn-sm">Load all comments</button>
</div>
</div>
</div>
</div>In the example above, the cards have no padding. This makes things like images and <hr /> elements take up the full width of the card. The other content is framed using content containers (more than one is used in the second example). This model is simple, but very powerful, especially when combined with the utility classes.
Please note, the icons being used are part of the Font Awesome 4.7.0 iconset.
Card padding # Since v1.1.0+
You may have noticed that the margin around content containers (.content) is equal to the padding inside cards (.card). This makes nested content and cards have proper alignment. Elements and containers can also be given the same padding as cards using the following classes:
- .p-card adds padding on all four sides.
- .px-card adds padding only on the left and right sides.
- .py-card adds padding only on the top and bottom sides.
In each case, the padding added is the same as the padding inside cards. These classes are useful because they can be used to create cards that have different sections, such as headers and footers, where all the content is aligned perfectly.
Join mailing list
We will notify you whenever we make a new post. No spam, no marketing, we promise.
<div class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
<div class="card p-0"> <!-- p-0 = padding: 0 -->
<!-- Card header -->
<div class="px-card py-10 border-bottom"> <!-- py-10 = padding-top: 1rem (10px) and padding-bottom: 1rem (10px), border-bottom: adds a border on the bottom -->
<h2 class="card-title font-size-18 m-0"> <!-- font-size-18 = font-size: 1.8rem (18px), m-0 = margin: 0 -->
Join mailing list
</h2>
</div>
<!-- Content -->
<div class="content">
<form action="..." method="...">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</span>
</div>
<input type="email" class="form-control" placeholder="Your email" required="required">
</div>
<input class="btn btn-primary btn-block" type="submit" value="Subscribe">
</form>
</div>
<!-- Card footer -->
<div class="px-card py-10 bg-light-lm bg-very-dark-dm rounded-bottom"> <!-- py-10 = padding-top: 1rem (10px) and padding-bottom: 1rem (10px), bg-light-lm = background-color: var(--gray-color-light) only in light mode, bg-very-dark-dm = background-color: var(--dark-color-dark) only in dark mode, rounded-bottom = rounded corners on the bottom -->
<p class="font-size-12 m-0"> <!-- font-size-12 = font-size: 1.2rem (12px), m-0 = margin: 0 -->
We will notify you whenever we make a new post. No spam, no marketing, we promise.
</p>
</div>
</div>
</div>A common question for this example is that if content containers have the same margin as the padding inside cards, why not just use content containers instead? The answer is that for some cases, padding is required insted of margin. For instance, in the example above, if the card footer was created using a content container instead of the .px-card class, the background color set using the utility classes would not affect the whole area. There would be empty space around the content (this is the margin), and this would obviously not look good.
And again, the icon being used is part of the Font Awesome 4.7.0 iconset.
Building a page #
It is worth repeating that content containers (.content) and cards (.card) are the main tools for framing content. Therefore, the next example is a practical one — how all the things explained above can be used with .container or .container-fluid to build a simple, nice-looking page.
<body>
<!-- Page wrapper with content-wrapper inside -->
<div class="page-wrapper">
<div class="content-wrapper">
<!-- Container-fluid -->
<div class="container-fluid">
<!-- First comes a content container -->
<div class="content">
<h1 class="content-title font-size-22"> <!-- font-size-22 = font-size: 2.2rem (22px) -->
Page title
</h1>
...
</div>
<!-- Next comes a card -->
<div class="card">
<h2 class="card-title">
Card title
</h2>
...
</div>
<!-- Then another content container -->
<div class="content">
<h2 class="content-title">
Content title
<a href="#">#</a>
</h2>
...
</div>
<!-- Then another card -->
<div class="card">
<h2 class="card-title">
Card title
</h2>
...
</div>
<!-- Finally ending with a content container (without title) -->
<div class="content">
...
</div>
</div>
</div>
</div>
</body>The page layout shown in the above example is very similar to the one used on this website. This simple combination, along with nested content and cards, is highly effective.
It is strongly recommended that the page wrapper (.page-wrapper), along with the content wrapper (.content-wrapper), is always used to build pages. You can learn more about this in the page building section (opens in new tab) of the docs.
Content containers and cards have the same spacing, so combining them is an easy way of making sure that everything is perfectly aligned. The next thing to do is learn how to use content containers and cards with the grid system (which happens to be the next section), especially the last two examples, where a page and a dashboard are built.
Up next:
Grid system
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
Subscribe for updates
- We will notify you when the framework gets a substantial update. No spam or marketing.
- You can also follow us on Twitter and stay updated that way.
