hibuno

<style lang="scss" scoped>
/*
 * Card Columns Masonry - Bootstrap 4
 * https://codepen.io/JacobLett/pen/oZmWdd
 */
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  .card-columns {column-count: 3;}
}

hibuno

<template>
  <div class="mt-5">
    <div class="container">
      <div class="card-columns">
        <div class="card" v-for="item in posts" v-bind:key="item.key">
          <img class="card-img-top" :src="item.urlToImage" alt="Card image cap">
          <div class="card-body">
            <p class="card-text"><small class="text-muted">{{ item.author }} - {{ item.source.name }}</small></p>
            <h5 class="card-title">{{ item.title }}</h5>
            <p class="card-text"><small class="text-muted">{{ item.publishedAt }}</small></p>

hibuno

<template>
  <div class="mt-5">
    <div class="row">
      <div class="col-12" v-for="item in posts" v-bind:key="item.key">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{ item.title }}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ item.publishedAt }}</h6>
            <p class="card-text">{{ item.description }}</p>
            <a href="#" class="card-link">Card link</a>

hibuno

<template>
  <div>
    <!-- Navigation -->
    <Navigation/>
    <!-- Content -->
    <div class="container content">
      <!-- Content -->
      <nuxt/>
    </div>
    <!-- Footer -->

hibuno

.navbar {
  background-color: white;
  box-shadow: 0px -9px 20px #000000;

  .nav {
    &-item {
      padding: 0 .5rem;
    }
    &-link {
      padding: 1rem;

hibuno

<template>
  <div class="mt-5">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Post Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Sunday, 28 January 2017</h6>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, cupiditate? Facilis, placeat dolorem voluptatum sit animi modi eveniet, eaque quis vero deleniti asperiores id at commodi adipisci reprehenderit laboriosam similique!.</p>
            <a href="#" class="card-link">Card link</a>

hibuno

<template>
  <div>
    <!-- Navigation -->
    <Navigation/>
    <!-- Content -->
    <div class="container content">
      <div class="row">
        <div class="col-md-9 col-lg-9">
          <!-- Content -->
          <Banner />

hibuno

...
  /*
  ** Custom SCSS
  */
  css: [
    { src: '~/assets/scss/main.scss', lang: 'scss' }
  ],
  /*
  ** Custom Plugin
   */

hibuno

<template>
  <div>
    <!-- Navigation -->
    <Navigation/>
    <!-- Content -->
    <div class="container">
      <div class="row">
        <div class="col-md-9 col-lg-9">
          <!-- Content -->
          <Banner />

hibuno

<template>
  <div>
    <!-- Navigation -->
    <Navigation/>
    <!-- Content -->
    <div class="container">
      <div class="row">
        <div class="col-md-9 col-lg-9">
          <!-- Content -->
          <Banner />