{
"componentChunkName": "component---src-templates-doc-template-js",
"path": "/tr/docs/card",
"result": {"data":{"current":{"fields":{"page":{"path":"/docs/card","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Cards","markdown":"\nWe created 5 separate card components in simple and different views. The width of the cards is set to 100%, you can put it in any container and use it in that containers width.\n\n
\n
\n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n```html\n
\n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n```\n\n## Vertical Cards with Image\n\nWhen you are using vertical cards with images, you can use `.gra-card-media-top` in addition to the `.gra-card` class if you want the image on top or `.gra-card-media-bottom` if you want the image on bottom.\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```\n\n## Horizontal Cards with Image\n\nWhen you are using horizontal cards with images, primarly you should use `.gra-card-horizontal` in addition to the` .card`. And also if you want the image on left use the `.gra-card-media-left` and if you want the image on right use the `.gra-card-media-right`\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```","mdtype":"MDHTML","section":"cards"},{"lang":"tr","title":"Kartlar","markdown":"\nBasit ve farklı görünümlerde 5 ayrı kart komponenti oluşturuldu. Kartların genişliği %100 olarak ayarlandı, herhangi bir kapsayıcı içerisine koyup o genişlikte kullanabilirsiniz.\n\n
\n
\n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n```html\n
\n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n```\n\n## Görsel İçeren Dikey Kartlar\n\nGörsel içeren dikey kartları kullanırken görselin üstte olmasını isterseniz `.gra-card` classına ek olarak `.gra-card-media-top`, altta olmasını isterseniz `.gra-card-media-bottom` kullanabilirsiniz.\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```\n\n## Görsel İçeren Yatay Kartlar\n\nGörsel içeren yatay kartları kullanırken öncelikle `.gra-card` classına ek olarak `.gra-card-horizontal` classını eklemelisiniz. Bunun yanında görselin solda olmasını isterseniz `.gra-card-media-left` , sağda olmasını isterseniz `.gra-card-media-right` kullanabilirsiniz.\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```","mdtype":"MDHTML","section":"cards"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/card/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/card","redirect":false,"defaultLanguage":"en"}}},
"staticQueryHashes": ["63159454"]}
![\"Card](\"https://res.cloudinary.com/erenesto/image/upload/v1587131749/wb8kzewydi4y9n9uaidz.jpg\")
\n ![\"Card](\"test-image.jpg\")
\n ![\"Card](\"https://res.cloudinary.com/erenesto/image/upload/v1587131749/e16fm6knahyvtlnjmhf3.jpg\")
\n