Columns
HTML
<section class="row">
<div class="width--wide">
<div class="column">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
<p>
In his book The Last Word, author Thomas Nagel writes, ‘I want atheism to be true, and I am made uneasy by the fact that some of the
most intelligent and well informed people I know are religious believers. It isn’t just that I don’t believe in God and, naturally,
hope that I’m right in my belief. It is that I hope there is no God. I don’t want there to be a God, I don’t want the universe to
be like that.’
</p>
</div>
<div class="column">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
<p>
In his book The Last Word, author Thomas Nagel writes, ‘I want atheism to be true, and I am made uneasy by the fact that some of the
most intelligent and well informed people I know are religious believers. It isn’t just that I don’t believe in God and, naturally,
hope that I’m right in my belief. It is that I hope there is no God. I don’t want there to be a God, I don’t want the universe to
be like that.’
</p>
</div>
<div class="column">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
<p>
In his book The Last Word, author Thomas Nagel writes, ‘I want atheism to be true, and I am made uneasy by the fact that some of the
most intelligent and well informed people I know are religious believers. It isn’t just that I don’t believe in God and, naturally,
hope that I’m right in my belief. It is that I hope there is no God. I don’t want there to be a God, I don’t want the universe to
be like that.’
</p>
</div>
</div>
</section>
Columns (Alt)
HTML
<section class="row">
<div class="width--wide">
<div class="column">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
<p>
In his book The Last Word, author Thomas Nagel writes, ‘I want atheism to be true, and I am made uneasy by the fact that some of the
most intelligent and well informed people I know are religious believers. It isn’t just that I don’t believe in God and, naturally,
hope that I’m right in my belief. It is that I hope there is no God. I don’t want there to be a God, I don’t want the universe to
be like that.’
</p>
</div>
<div class="column column--4">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
<p>
In his book The Last Word, author Thomas Nagel writes, ‘I want atheism to be true, and I am made uneasy by the fact that some of the
most intelligent and well informed people I know are religious believers. It isn’t just that I don’t believe in God and, naturally,
hope that I’m right in my belief. It is that I hope there is no God. I don’t want there to be a God, I don’t want the universe to
be like that.’
</p>
</div>
<div class="column column--1">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
<p>
In his book The Last Word, author Thomas Nagel writes, ‘I want atheism to be true, and I am made uneasy by the fact that some of the
most intelligent and well informed people I know are religious believers. It isn’t just that I don’t believe in God and, naturally,
hope that I’m right in my belief. It is that I hope there is no God. I don’t want there to be a God, I don’t want the universe to
be like that.’
</p>
</div>
</div>
</section>
Columns (Horizontal Alignment)
HTML
<section class="row">
<div class="width--wide">
<div class="column halign--left">
<h3>
This is a left aligned column. I've made it long enough to wrap
</h3>
<h4>
A Shorter Title
</h4>
<p>
In the beginning was the Word, and the Word was with God, and the Word was God. 2 He was with God in the beginning. 3 Through him all things
were made; without him nothing was made that has been made. 4 In him was life, and that life was the light of all mankind. 5 The light shines
in the darkness, and the darkness has not overcome
</p>
</div>
<div class="column halign--centre">
<h3>
This is a right aligned column. I've made it long enough to wrap
</h3>
<h4>
A Shorter Title
</h4>
<p>
In the beginning was the Word, and the Word was with God, and the Word was God. 2 He was with God in the beginning. 3 Through him all things
were made; without him nothing was made that has been made. 4 In him was life, and that life was the light of all mankind. 5 The light shines
in the darkness, and the darkness has not overcome
</p>
</div>
</div>
</section>
<section class="row">
<div class="width--wide">
<div class="column halign--right">
<h3>
This is a right aligned column. I've made it long enough to wrap
</h3>
<h4>
A Shorter Title
</h4>
<p>
In the beginning was the Word, and the Word was with God, and the Word was God. 2 He was with God in the beginning. 3 Through him all things
were made; without him nothing was made that has been made. 4 In him was life, and that life was the light of all mankind. 5 The light shines
in the darkness, and the darkness has not overcome
</p>
</div>
<div class="column halign--justify">
<h3>
This is a justified column aligned title. I've made it long enough to wrap
</h3>
<h4>
A Shorter Title
</h4>
<p>
In the beginning was the Word, and the Word was with God, and the Word was God. 2 He was with God in the beginning. 3 Through him all things
were made; without him nothing was made that has been made. 4 In him was life, and that life was the light of all mankind. 5 The light shines
in the darkness, and the darkness has not overcome
</p>
</div>
</div>
</section>
Columns (Vertical Alignment)
HTML
<section class="row">
<div class="width--wide">
<div class="column valign--top">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
</div>
<div class="column">
<h3>
This column has lots of content to make sure it's tall enough to show the alignment on the other columns
</h3>
<p>
In his book The Last Word, author Thomas Nagel writes, ‘I want atheism to be true, and I am made uneasy by the fact that some of the
most intelligent and well informed people I know are religious believers. It isn’t just that I don’t believe in God and, naturally,
hope that I’m right in my belief. It is that I hope there is no God. I don’t want there to be a God, I don’t want the universe to
be like that.’
</p>
</div>
<div class="column valign--middle">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
</div>
<div class="column valign--bottom">
<h3>
Why might someone <br>
‘hope there is no God’?
</h3>
</div>
</div>
</section>