archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Replace slate/smoke references in Cards examples

Browse Source
This commit is contained in:
Adam Wathan 2017-11-03 07:51:24 -04:00
parent a227b1e024
commit 06d4e91a0b
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/source/docs/examples/cards.blade.md
View File

@ -19,46 +19,46 @@ title: "Cards"
</div>
</div>
## Classic card example
## Stacked
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-slate text-base">
<p class="text-grey-darker text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#photography</span>
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate mr-2">#travel</span>
<span class="inline-block bg-smoke-light rounded-full px-3 py-1 text-sm font-semibold text-slate">#winter</span>
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#photography</span>
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker mr-2">#travel</span>
<span class="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">#winter</span>
</div>
</div>
@endcomponent
## Advanced card example
## Horizontal
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
<div class="max-w-md flex">
<div class="rounded rounded-l w-128 text-center overflow-hidden">
<img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg">
</div>
<div class="border-t border-r border-b border-smoke rounded rounded-r p-4 flex flex-col justify-between">
<div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
<div>
<p class="text-sm text-slate-light flex items-center">
<svg class="text-slate-lighter w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
<p class="text-sm text-grey-dark flex items-center">
<svg class="text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
Members only
</p>
<div class="font-bold text-xl mb-2">Can coffee make you a better developer?</div>
<p class="text-slate text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
<div class="text-black font-bold text-xl mb-2">Can coffee make you a better developer?</div>
<p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg">
<div class="text-sm">
<p class="text-slate-darker leading-none">Jonathan Reinink</p>
<p class="text-slate-light">Aug 18</p>
<p class="text-black leading-none">Jonathan Reinink</p>
<p class="text-grey-dark">Aug 18</p>
</div>
</div>
</div>